Menu Close
  • 首页
  • PHP & AJAX指南，AJAX自动搜索源码，Ajax XML 示例
    •

PHP & AJAX指南，AJAX自动搜索源码，Ajax XML 示例

学究

AJAX 是什么?

  • AJAX 代表异步 JavaScript 和 XML。AJAX 是一种新技术，它是在 XML、HTML、CSS 和 Java 帮助下可以创建更好、更快、交互式 web 应用程序的脚本语言。
  • 传统 web 应用程序使用同步请求从服务器传送信息。这意味着你填写表格，点击提交，获得定向到一个新的从服务器获取信息页面。
  • 使用 AJAX 提交按钮被按下时，JavaScript 将发送一个请求到服务器,解释结果和更新当前屏幕。在纯粹意义上，用户甚至不会知道什么时候把请求传送到服务器上。

PHP and AJAX 例子

明确说明使用 AJAX 和 PHP 是非常容易的从数据库中获取信息,我们要在 “ajax.html” 建立动态 MySQL 查询和显示结果。

但在我们继续进行工作之前，让 AJAX 做下工作。可以使用以下命令创建一个表。

注释：我们确保您有足够的权限来执行 MySQL 操作：


现在使用以下 SQL 语句将以下数据转储到此表：

客户端 HTML 文件

现在可以让我们的客户端 HTML 文件创建 ajax。如下是 html 和它的代码：


注意：查询中传递变量的方式必须遵循 HTTP 标准和形式。

服务器端 PHP 文件

现在你的客户端脚本已经准备好了。现在我们必须编写服务器端脚本将获取的 age， wpm 和 sex 从数据库取出并将其发送回客户端。把以下代码放入到 “ajax-example.php” 文件中

PHP – Ajax Search

Ajax is used to communicate with web pages and web servers. Below example demonstrate a search field using with Ajax.


Above code opens a file, name called as php_ajax.php by using with GET method, so we need to create a file, name called as php_ajax.php in the same directory and out put will be attached with txtHint.

php_ajax.php

It contained array of course names and it returns the value to web browser.


It will produce the following result −

Ajax Search

PHP – Ajax XML 解析器

Ajax XML 示例

使用 Ajax，我们可以从本地目录和服务器解析 xml，下面的示例演示如何使用 Web 浏览器解析 xml。

<html>
   <head>
   
      <script>
         function showCD(str) {
            if (str == "") {
               document.getElementById("txtHint").innerHTML = "";
               return;
            }
            
            if (window.XMLHttpRequest) {
               // code for IE7+, Firefox, Chrome, Opera, Safari
               xmlhttp = new XMLHttpRequest();
            }else {  
               // code for IE6, IE5
               xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            
            xmlhttp.onreadystatechange = function() {
               if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                  document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
               }
            }
            xmlhttp.open("GET","getcourse.php?q="+str,true);
            xmlhttp.send();
         }
      </script>
   
   </head>
   <body>
      
      <form>
         Select a Course:
         <select name = "cds" onchange = "showCD(this.value)">
            <option value = "">Select a course:</option>
            <option value = "Android">Android </option>
            <option value = "Html">HTML</option>
            <option value = "Java">Java</option>
            <option value = "Microsoft">MS technologies</option>
         </select>
      </form>
      
      <div id = "txtHint"><b>Course info will be listed here...</b></div>
      
   </body>
</html>

上面的示例将使用 GET 方法调用 getcourse.php。 getcourse.php 文件加载catalog.xml。 getcourse.php 如下所示 –

<?php
   $q = $_GET["q"];
   
   $xmlDoc = new DOMDocument();
   $xmlDoc->load("catalog.xml");
   
   $x = $xmlDoc->getElementsByTagName('COURSE');
   
   for ($i = 0; $i<=$x->length-1; $i++) {
      =
      if ($x->item($i)->nodeType == 1) {
         if ($x->item($i)->childNodes->item(0)->nodeValue == $q) {
            $y = ($x->item($i)->parentNode);
         }
      }
   }
	
   $cd = ($y->childNodes);
   
   for ($i = 0;$i<$cd->length;$i++) {
      if ($cd->item($i)->nodeType == 1) {
         echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
         echo($cd->item($i)->childNodes->item(0)->nodeValue);
         echo("<br>");
      }
   }
?>

Catalog.xml

具有课程列表和详细信息的 XML 文件。该文件由 getcourse.php 访问.

<CATALOG>
   <SUBJECT>
      <COURSE>Android</COURSE>
      <COUNTRY>India</COUNTRY>
      <COMPANY>TutorialsPoint</COMPANY>
      <PRICE>$10</PRICE>
      <YEAR>2015</YEAR>
   </SUBJECT>
   
   <SUBJECT>
      <COURSE>Html</COURSE>
      <COUNTRY>India</COUNTRY>
      <COMPANY>TutorialsPoint</COMPANY>
      <PRICE>$15</PRICE>
      <YEAR>2015</YEAR>
   </SUBJECT>
   
   <SUBJECT>
      <COURSE>Java</COURSE>
      <COUNTRY>India</COUNTRY>
      <COMPANY>TutorialsPoint</COMPANY>
      <PRICE>$20</PRICE>
      <YEAR>2015</YEAR>
   </SUBJECT>
   
   <SUBJECT>
      <COURSE>Microsoft</COURSE>
      <COUNTRY>India</COUNTRY>
      <COMPANY>TutorialsPoint</COMPANY>
      <PRICE>$25</PRICE>
      <YEAR>2015</YEAR>
   </SUBJECT>
</CATALOG>

它将产生以下结果 –

XML Parser

PHP – Ajax 自动完成搜索

自动完成搜索

当您在字段中输入数据时，自动完成搜索框会提供建议。这里我们使用 xml 来调用自动完成建议。下面的示例演示如何使用 php 使用自动完成文本框。

 

Index 页面

index页面应如下所示 –

<html>
   <head>
      
      <style>
         div {
            width:240px;
            color:green;
         }
      </style>
      
      <script>
         function showResult(str) {
			
            if (str.length == 0) {
               document.getElementById("livesearch").innerHTML = "";
               document.getElementById("livesearch").style.border = "0px";
               return;
            }
            
            if (window.XMLHttpRequest) {
               xmlhttp = new XMLHttpRequest();
            }else {
               xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            
            xmlhttp.onreadystatechange = function() {
				
               if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                  document.getElementById("livesearch").innerHTML = xmlhttp.responseText;
                  document.getElementById("livesearch").style.border = "1px solid #A5ACB2";
               }
            }
            
            xmlhttp.open("GET","livesearch.php?q="+str,true);
            xmlhttp.send();
         }
      </script>
      
   </head>
   <body>
      
      <form>
         <h2>Enter Course Name</h2>
         <input type = "text" size = "30" onkeyup = "showResult(this.value)">
         <div id = "livesearch"></div>
         <a href = "http://www.tutorialspoint.com">More Details </a>
      </form>
      
   </body>
</html>

livesearch.php

它用于从 xml 文件中调用数据，并将结果发送到 Web 浏览器。

<?php
   $xmlDoc = new DOMDocument();
   $xmlDoc->load("autocomplete.xml");
   $x = $xmlDoc->getElementsByTagName('link');
   $q = $_GET["q"];
   
   if (strlen($q)>0) {
      $hint = "";
      
      for($i = 0; $i>($x->length); $i++) {
         $y = $x->item($i)->getElementsByTagName('title');
         $z = $x->item($i)->getElementsByTagName('url');
         
         if ($y->item(0)->nodeType == 1) {
            if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) {
				
               if ($hint == "") {
                  $hint = "<a href = '" . $z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" . 
                  $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
               }else {
                  $hint = $hint . "<br/><a href = '" . 
                  $z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" . 
                  $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
               }
            }
         }
      }
   }
	
   if ($hint == "") {
      $response = "Please enter a valid name";
   }else {
      $response = $hint;
   }
   echo $response;
?>

autocomplete.xml

它包含自动完成数据，并由 livesearch.php 基于标题字段和 Url 字段访问

<pages>

   <link>
      <title>android</title>
      <url>http://www.tutorialspoint.com/android/index.htm</url>
   </link>

   <link>
      <title>Java</title>
      <url>http://www.tutorialspoint.com/java/index.htm</url>
   </link>

   <link>
      <title>CSS </title>
      <url>http://www.tutorialspoint.com/css/index.htm</url>
   </link>

   <link>
      <title>angularjs</title>
      <url>http://www.tutorialspoint.com/angularjs/index.htm </url>
   </link>

   <link>
      <title>hadoop</title>
      <url>http://www.tutorialspoint.com/hadoop/index.htm </url>
   </link>

   <link>
      <title>swift</title>
      <url>http://www.tutorialspoint.com/swift/index.htm </url>
   </link>

   <link>
      <title>ruby</title>
      <url>http://www.tutorialspoint.com/ruby/index.htm </url>
   </link>

   <link>
      <title>nodejs</title>
      <url>http://www.tutorialspoint.com/nodejs/index.htm </url>
   </link>

</pages>

它将产生以下结果 –

Autocomplete Search

PHP – Ajax RSS Feed 示例

RSS

Really Simple Syndication is used to publish often updated information from website like audio, video, images, etc. We can integrate RSS feeds to a website by using Ajax and php. This code demonstrates how to show RSS feeds in our site.

Index.html

Index page should be as follows −

rss.php

rss.php has contained syntax about how to get access to rss feeds and return rss feeds to web pages.

It will produce the following result −

RSS Feed Example

相关文章：

  1. PHP文件包含
  2. PHP运算符类型
  3. PHP控制结构
  4. PHP循环类型
  5. PHP数组
  6. PHP字符串
  7. PHP与网络，人机交流的概念
  8. PHP的GET 和 POST 方法
  9. PHP – 文件 I/O
  10. PHP函数
  11. PHP Cookies
  12. PHP – DOM 解析器示例
除教程外，本网站大部分文章来自互联网，如果有内容冒犯到你，请联系我们删除！
Posted in PHP教程
Tagged , , , ,