• AJAX 教程


    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
    AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
    AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
    AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。

    AJAX 实例

    使用 AJAX 修改该文本内容

    尝试一下 »

    阅读本教程前,您需要了解的知识:
    阅读本教程,您需要有以下基础:

    • HTML 和 CSS 基础
    • JavaScript 基础

    AJAX 应用

    • 运用XHTML+CSS来表达资讯;
    • 运用JavaScript操作DOM(Document Object Model)来执行动态效果;
    • 运用XML和XSLT操作资料;
    • 运用XMLHttpRequest或新的Fetch API与网页服务器进行异步资料交换;
    • 注意:AJAX与Flash、Silverlight和Java Applet等RIA技术是有区分的。


    AJAX 简介

     AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

    您应当具备的基础知识

    在继续学习之前,您需要对下面的知识有基本的了解:

    • HTML / XHTML
    • CSS
    • JavaScript / DOM
    什么是 AJAX ?

    AJAX = 异步 JavaScript 和 XML。
    AJAX 是一种用于创建快速动态网页的技术。
    通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
    传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
    有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。

    AJAX 工作原理

    AJAX是基于现有的Internet标准

    AJAX是基于现有的Internet标准,并且联合使用它们:

    • XMLHttpRequest 对象 (异步的与服务器交换数据)
    • JavaScript/DOM (信息显示/交互)
    • CSS (给数据定义样式)
    • XML (作为转换数据的格式)

    AJAX应用程序与浏览器和平台无关的!

    Google Suggest

    在 2005 年,Google 通过其 Google Suggest 使 AJAX 变得流行起来。
    Google Suggest 使用 AJAX 创造出动态性极强的 web 界面:当您在谷歌的搜索框输入关键字时,JavaScript 会把这些字符发送到服务器,然后服务器会返回一个搜索建议的列表。

    今天就开始使用 AJAX

    AJAX 基于已有的标准。这些标准已被大多数开发者使用多年。
    请阅读下一章,看看 AJAX 是如何工作的!



    AJAX 实例

    实例

    使用 AJAX 修改该文本内容

    尝试一下 »

    AJAX 实例解析

    上面的 AJAX 应用程序包含一个 div 和一个按钮。
    div 部分用于显示来自服务器的信息。当按钮被点击时,它负责调用名为 loadXMLDoc() 的函数:

    <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
    <button type="button" onclick="loadXMLDoc()">修改内容</button>

    接下来,在页面的 head 部分添加一个 <script> 标签。该标签中包含了这个 loadXMLDoc() 函数:

    <head>
      <script>
        function loadXMLDoc(){ .... AJAX 脚本执行 ...}    
      </script>
    </head>

    下面的章节会为您讲解 AJAX 的工作原理。



    AJAX - 创建 XMLHttpRequest 对象

    XMLHttpRequest 是 AJAX 的基础。

    XMLHttpRequest 对象

    所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
    XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    创建 XMLHttpRequest 对象

    所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。
    创建 XMLHttpRequest 对象的语法:

    var iable=new XMLHttpRequest();

    老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:

    var iable=new ActiveXObject("Microsoft.XMLHTTP");

    为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :
    实例

    var xmlhttp;
    if (window.XMLHttpRequest){ 
      // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 
      xmlhttp=new XMLHttpRequest();
    }else{ 
      // IE6, IE5 浏览器执行代码 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    尝试一下 »
    在下一章中,您将学习发送服务器请求的知识。



    AJAX - 向服务器发送请求请求

    XMLHttpRequest 对象用于和服务器交换数据。

    向服务器发送请求

    如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:

    xmlhttp.open("GET","ajax_info.txt",true);
    xmlhttp.send();

    GET 还是 POST?

    与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
    然而,在以下情况中,请使用 POST 请求:

    • 无法使用缓存文件(更新服务器上的文件或数据库)
    • 向服务器发送大量数据(POST 没有数据量限制)
    • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
    GET 请求

    一个简单的 GET 请求:
    实例

    xmlhttp.open("GET","/try/ajax/demo_get.php",true);
    xmlhttp.send();

    尝试一下 »
    在上面的例子中,您可能得到的是缓存的结果。
    为了避免这种情况,请向 URL 添加一个唯一的 ID:
    实例

    xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
    xmlhttp.send();

    尝试一下 »

    如果您希望通过 GET 方法发送信息,请向 URL 添加信息:
    实例

    xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
    xmlhttp.send();

    尝试一下 »

    POST 请求

    一个简单 POST 请求:
    实例

    xmlhttp.open("POST","/try/ajax/demo_post.php",true);
    xmlhttp.send();

    尝试一下 »
    如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
    实例

    xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("fname=Henry&lname=Ford");

    尝试一下 »


    url - 服务器上的文件

    open() 方法的 url 参数是服务器上文件的地址:

    xmlhttp.open("GET","ajax_test.html",true);

    该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务)。

    异步 - True 或 False?

    AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
    XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:

    xmlhttp.open("GET","ajax_test.html",true);

    对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。
    通过 AJAX,JavaScript 无需等待服务器的响应,而是:

    • 在等待服务器响应时执行其他脚本
    • 当响应就绪后对响应进行处理
    Async=true

    当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:
    实例

    xmlhttp.onreadystatechange=function(){ 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
          document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
      }
    }
    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
    xmlhttp.send();

    尝试一下 »
    您将在稍后的章节学习更多有关 onreadystatechange 的内容。

    Async = false

    如需使用 async=false,请将 open() 方法中的第三个参数改为 false:
    xmlhttp.open("GET","test1.txt",false);
    我们不推荐使用 async=false,但是对于一些小型的请求,也是可以的。
    请记住,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。
    注意:当您使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可:
    实例

    xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
    xmlhttp.send();
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    尝试一下 »



    AJAX - 服务器 响应

    服务器响应

    如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

    属性描述
    responseText 获得字符串形式的响应数据。
    responseXML 获得 XML 形式的响应数据。
    responseText 属性

    如果来自服务器的响应并非 XML,请使用 responseText 属性。
    responseText 属性返回字符串形式的响应,因此您可以这样使用:
    实例

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    尝试一下 »

    responseXML 属性

    如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性:
    实例
    请求 cd_catalog.xml 文件,并解析响应:

    xmlDoc=xmlhttp.responseXML;
    txt="";
    x=xmlDoc.getElementsByTagName("ARTIST");
    for (i=0;i<x.length;i++)
    { 
      txt=txt + x[i].childNodes[0].nodeValue + "<br>";
      }
    document.getElementById("myDiv").innerHTML=txt;

    尝试一下 »



    AJAX - onreadystatechange 事件

    onreadystatechange 事件

    当请求被发送到服务器时,我们需要执行一些基于响应的任务。
    每当 readyState 改变时,就会触发 onreadystatechange 事件。
    readyState 属性存有 XMLHttpRequest 的状态信息。
    下面是 XMLHttpRequest 对象的三个重要的属性:


    Paste_Image.png

    在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
    当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
    实例

    xmlhttp.onreadystatechange=function()  {  
      if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    
      }  
    }

    尝试一下 »
    注意: onreadystatechange 事件被触发 5 次(0 - 4),对应着 readyState 的每个变化。

    使用回调函数

    回调函数是一种以参数形式传递给另一个函数的函数。
    如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。
    该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):
    实例

    function myFunction(){ 
      loadXMLDoc("/try/ajax/ajax_info.txt",function() { 
        if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
          document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
        } 
      });
    }

    尝试一下 »



    AJAX ASP/PHP 实例

    AJAX 用于创造动态性更强的应用程序。

    AJAX ASP/PHP 实例

    下面的例子将为您演示当用户在输入框中键入字符时,网页如何与 web 服务器进行通信: 请在下面的输入框中键入字母(A - Z):

    尝试一下 »

    实例解析 - showHint() 函数

    当用户在上面的输入框中键入字符时,会执行函数 "showHint()" 。该函数由 "onkeyup" 事件触发:

    function showHint(str){ 
      var xmlhttp; 
      if (str.length==0) { 
        document.getElementById("txtHint").innerHTML=""; 
        return; 
      } 
    
      if (window.XMLHttpRequest) { 
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 
        xmlhttp=new XMLHttpRequest(); 
      } else { 
        // 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","/try/ajax/gethint.php?q="+str,true); 
    
      xmlhttp.send();
    }

    源代码解析:
    如果输入框为空 (str.length==0),则该函数清空 txtHint 占位符的内容,并退出函数。
    如果输入框不为空,showHint() 函数执行以下任务:

    • 创建 XMLHttpRequest 对象
    • 当服务器响应就绪时执行函数
    • 把请求发送到服务器上的文件
    • 请注意我们向 URL 添加了一个参数 q (带有输入框的内容)
    AJAX 服务器页面 - ASP 和 PHP

    由上面的 JavaScript 调用的服务器页面是 ASP 文件,名为 "gethint.asp"。
    下面,我们创建了两个版本的服务器文件,一个用 ASP 编写,另一个用 PHP 编写。

    ASP 文件

    "gethint.asp" 中的源代码会检查一个名字数组,然后向浏览器返回相应的名字:

    <%
    response.expires=-1
    dim a(30)
    'Fill up array with names
    a(1)="Anna"
    a(2)="Brittany"
    a(3)="Cinderella"
    a(4)="Diana"
    a(5)="Eva"
    a(6)="Fiona"
    a(7)="Gunda"
    a(8)="Hege"
    a(9)="Inga"
    a(10)="Johanna"
    a(11)="Kitty"
    a(12)="Linda"
    a(13)="Nina"
    a(14)="Ophelia"
    a(15)="Petunia"
    a(16)="Amanda"
    a(17)="Raquel"
    a(18)="Cindy"
    a(19)="Doris"
    a(20)="Eve"
    a(21)="Evita"
    a(22)="Sunniva"
    a(23)="Tove
    a(24)="Unni"
    a(25)="Violet"
    a(26)="Liza"
    a(27)="Elizabeth"
    a(28)="Ellen"
    a(29)="Wenche"
    a(30)="Vicky"
    
    'get the q parameter from URL
    q=ucase(request.querystring("q"))
    
    'lookup all hints from array if length of q>0
    if len(q)>0 then 
      hint="" 
      for i=1 to 30 
        if q=ucase(mid(a(i),1,len(q))) then 
          if hint="" then 
            hint=a(i) 
          else 
            hint=hint & " , " & a(i) 
          end if 
        end if 
      next
    end if
    
    'Output "no suggestion" if no hint were found
    'or output the correct values
    if hint="" then 
      response.write("no suggestion")
    else 
      response.write(hint)end if
    %>
    PHP 文件

    下面的代码用 PHP 编写,与上面的 ASP 代码作用是一样的。

    <?php
    // Fill up array with names
    $a[]="Anna";
    $a[]="Brittany";
    $a[]="Cinderella";
    $a[]="Diana";
    $a[]="Eva";
    $a[]="Fiona";
    $a[]="Gunda";
    $a[]="Hege";
    $a[]="Inga";
    $a[]="Johanna";
    $a[]="Kitty";
    $a[]="Linda";
    $a[]="Nina";
    $a[]="Ophelia";
    $a[]="Petunia";
    $a[]="Amanda";
    $a[]="Raquel";
    $a[]="Cindy";
    $a[]="Doris";
    $a[]="Eve";
    $a[]="Evita";
    $a[]="Sunniva";
    $a[]="Tove";
    $a[]="Unni";
    $a[]="Violet";
    $a[]="Liza";
    $a[]="Elizabeth";
    $a[]="Ellen";
    $a[]="Wenche";
    $a[]="Vicky";
    
    //get the q parameter from URL
    $q=$_GET["q"];
    
    //lookup all hints from array if length of q>0
    if (strlen($q) > 0){ 
      $hint=""; 
      for($i=0; $i<count($a); $i++) { 
        if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { 
          if ($hint=="") { 
            $hint=$a[$i]; 
          } else { 
            $hint=$hint." , ".$a[$i]; 
          } 
        } 
      }
    }
    
    // Set output to "no suggestion" if no hint were found
    // or to the correct values
    if ($hint == ""){ 
      $response="no suggestion";
    }else{ 
      $response=$hint;
    }
    
    //output the response
    echo $response;
    ?>


    AJAX Database 实例

    AJAX 可用来与数据库进行动态通信。

    AJAX 数据库实例

    下面的例子将演示网页如何通过 AJAX 从数据库读取信息: 请在下面的下拉列表中选择一个客户:

    尝试一下 »

    实例解释 - showCustomer() 函数

    当用户在上面的下拉列表中选择某个客户时,会执行名为 "showCustomer()" 的函数。该函数由 "onchange" 事件触发:

    function showCustomer(str){ 
      var xmlhttp; 
      if (str=="") { 
        document.getElementById("txtHint").innerHTML=""; return; 
      } 
      if (window.XMLHttpRequest) { 
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 
        xmlhttp=new XMLHttpRequest(); 
      } else { 
        // 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","/try/ajax/getcustomer.php?q="+str,true); 
      xmlhttp.send();
    }

    showCustomer() 函数执行以下任务:

    • 检查是否已选择某个客户
    • 创建 XMLHttpRequest 对象
    • 当服务器响应就绪时执行所创建的函数
    • 把请求发送到服务器上的文件
    • 请注意我们向 URL 添加了一个参数 q (带有输入域中的内容)
    AJAX 服务器页面

    由上面的 JavaScript 调用的服务器页面是 PHP 文件,名为 "getcustomer.php"。
    用 PHP 编写服务器文件也很容易,或者用其他服务器语言。请看用 PHP 编写的相应的例子
    "getcustomer.php" 中的源代码负责对数据库进行查询,然后用 HTML 表格返回结果:

    <%
    response.expires=-1
    sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
    sql=sql & "'" & request.querystring("q") & "'"
    set conn=Server.CreateObject("ADODB.Connection")
    conn.Provider="Microsoft.Jet.OLEDB.4.0"
    conn.Open(Server.Mappath("/db/northwind.mdb"))
    set rs=Server.CreateObject("ADODB.recordset")
    rs.Open sql,conn
    
    response.write("<table>")
    do until rs.EOF 
      for each x in rs.Fields 
        response.write("<tr><td><b>" & x.name & "</b></td>") 
        response.write("<td>" & x.value & "</td></tr>") 
      next 
      rs.MoveNext
    loop
    response.write("</table>")
    %>


    AJAX XML 实例

    AJAX 可用来与 XML 文件进行交互式通信。

    AJAX XML 实例

    下面的例子将演示网页如何使用 AJAX 来读取来自 XML 文件的信息:

    尝试一下 »

    实例解析 - loadXMLDoc() 函数

    当用户点击上面的"获取我收藏的 CD"这个按钮,就会执行 loadXMLDoc() 函数。
    loadXMLDoc() 函数创建 XMLHttpRequest 对象,添加当服务器响应就绪时执行的函数,并将请求发送到服务器。
    当服务器响应就绪时,会构建一个 HTML 表格,从 XML 文件中提取节点(元素),最后使用 XML 数据的 填充 id="demo" 的表格元素:

    // LoadXMLDoc()
    function loadDoc() { 
      var xhttp = new XMLHttpRequest(); 
      xhttp.onreadystatechange = function() { 
        if (this.readyState == 4 && this.status == 200) { 
          myFunction(this); 
        }
      }; 
      xhttp.open("GET", "cd_catalog.xml", true); 
      xhttp.send();
    }
    function myFunction(xml) { 
      var i; 
      var xmlDoc = xml.responseXML; 
      var table="<tr><th>Artist</th><th>Title</th></tr>"; 
      var x = xmlDoc.getElementsByTagName("CD"); 
      for (i = 0; i <x.length; i++) { 
        table += "<tr><td>" + 
        x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + 
        "</td><td>" + 
        x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + 
        "</td></tr>"; 
      } 
      document.getElementById("demo").innerHTML = table;
    }
    AJAX 服务器页面

    上面这个例子中使用的服务器页面实际上是一个名为 "cd_catalog.xml" XML 文件。



    AJAX 实例

    一个简单的AJAX实例
    创建一个简单的XMLHttpRequest,从一个TXT文件中返回数据。
    用AJAX加载 XML 文件
    创建一个简单的XMLHttpRequest,从一个XML文件中返回数据。
    用AJAX进行一次 HEAD 请求
    检索资源(文件)的头信息。
    用AJAX进行一次指定的 HEAD 请求
    检索资源(文件)的指定头信息。
    用AJAX从ASP 文件返回数据
    当用户在文本框内键入字符时网页如何与Web服务器进行通信
    用AJAX从数据库返回数据
    用AJAX网页如何获取数据库中的信息
    用AJAX从XML 文件返回数据
    创建一个XMLHttpRequest从XML文件中检索数据并显示在一个HTML表格中。
    用callback函数的AJAX实例
    用一个callback函数创建一个XMLHttpRequest,并从一个TXT文件中检索数据。

  • 相关阅读:
    转载--C 的回归
    学嵌入式不是你想的那么简单--转载
    scanf() 与 gets()--转载
    getchar、getch、getche 与 gets()
    scanf()函数原理
    C/C++头文件一览
    再论函数指针、函数指针数组
    初论函数指针、指针函数、指针的指针
    转载--一个“码农”自述的血泪史:当了35年程序员,我最大的遗憾就是没抓住机遇转行
    转载--协方差的意义和计算公式
  • 原文地址:https://www.cnblogs.com/aksir/p/6857342.html
走看看 - 开发者的网上家园