AJAX用法示例详解

野性酷女 2022-07-16 09:51 206阅读 0赞

**1、简介**  
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。  
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。总的来说，AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

**2、什么是AJAX？**  
AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。  
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。  
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

**3、AJAX - 创建XMLHttpRequest对象**  
XMLHttpRequest是AJAX 的基础。  
**3.1 XMLHttpRequest对象**  
所有现代浏览器均支持XMLHttpRequest对象（IE5和IE6使用ActiveXObject）。  
XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。  
**3.2创建XMLHttpRequest对象**  
所有现代浏览器（IE7+、Firefox、Chrome、Safari以及Opera）均内建XMLHttpRequest对象。创建

XMLHttpRequest对象的语法：
    variable=newXMLHttpRequest();
    //老版本的InternetExplorer（IE5和IE6）使用ActiveX对象：
    variable=newActiveXObject("Microsoft.XMLHTTP");

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

varxmlhttp;
    if(window.XMLHttpRequest){
        //code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }else{
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

**4、AJAX - 向服务器发送请求**  
XMLHttpRequest对象用于和服务器交换数据。  
**4.1向服务器发送请求**  
如需将请求发送到服务器，我们使用XMLHttpRequest对象的open()和send()方法：

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

**4.1.1 open(method,url,async)**：规定请求的类型、URL以及是否异步处理请求。  
method：请求的类型；GET或POST  
url：文件在服务器上的位置  
async：true（异步）或false（同步）

**4.1.2 send(string)**：将请求发送到服务器。  
string：仅用于POST请求

**4.2 GET还是POST？**  
与POST相比，GET更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用POST请求：  
无法使用缓存文件（更新服务器上的文件或数据库）;  
向服务器发送大量数据（POST没有数据量限制）;  
发送包含未知字符的用户输入时，POST比GET更稳定也更可靠。

**4.3 GET 请求**  
**4.3.1** 一个简单的GET请求：

xmlhttp.open("GET","demo_get.asp",true);
    xmlhttp.send();

在上面的例子中，您可能得到的是缓存的结果。为了避免这种情况，请向URL添加一个唯一的ID：

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
    xmlhttp.send();

如果希望通过 GET方法发送信息，请向URL添加信息：

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
    xmlhttp.send();

**4.4 POST请求**  
**4.4.1** 一个简单POST请求：

xmlhttp.open("POST","demo_post.asp",true);
    xmlhttp.send();

如果需要像HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头。然后在send()方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("fname=Bill&lname=Gates");

**4.4.2** setRequestHeader(header,value)：向请求添加HTTP头。  
header: 规定头的名称  
value: 规定头的值  
url - 服务器上的文件

**4.4.3** open() 方法的url参数是服务器上文件的地址：  
xmlhttp.open(“GET”,”ajax\_test.asp”,true);  
该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。

**4.5 异步 - True或False？**  
AJAX 指的是异步JavaScript 和 XML（Asynchronous JavaScript and XML）。  
XMLHttpRequest对象如果要用于AJAX的话，其open()方法的async参数必须设置为true：

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

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

**4.5.1 Async = true**  
当使用 async=true 时，请规定在响应处于onreadystatechange事件中的就绪状态时执行的函数：

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

**4.5.2 Async = false**  
如需使用async=false，请将open()方法中的第三个参数改为false：

xmlhttp.open("GET","test1.txt",false);

我们不推荐使用async=false，但是对于一些小型的请求，也是可以的。  
请记住，JavaScript会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。  
注释：当您使用async=false时，请不要编写onreadystatechange函数-把代码放到send()语句后面即可：

xmlhttp.open("GET","test1.txt",false);
    xmlhttp.send();
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

**5、AJAX - 服务器响应**  
**5.1 服务器响应**  
如需获得来自服务器的响应，请使用XMLHttpRequest对象的responseText或responseXML属性。  
responseText：获得字符串形式的响应数据。  
responseXML：获得XML形式的响应数据。

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

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

**5.3 responseXML属性**  
如果来自服务器的响应是XML，而且需要作为XML对象进行解析，请使用responseXML属性：  
请求books.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;

**6、AJAX - onreadystatechange 事件**  
**6.1 onreadystatechange事件**  
当请求被发送到服务器时，我们需要执行一些基于响应的任务。  
每当readyState改变时，就会触发onreadystatechange事件。readyState属性存有XMLHttpRequest的状态信息。下面是XMLHttpRequest对象的三个重要的属性：  
（1）onreadystatechange：存储函数（或函数名），每当readyState属性改变时，就会调用该函数。  
（2）readyState：存有XMLHttpRequest的状态。从0到4发生变化。  
0: 请求未初始化  
1: 服务器连接已建立  
2: 请求已接收  
3: 请求处理中  
4: 请求已完成，且响应已就绪  
（3）status  
200: “OK”  
404: 未找到页面

**6.2** 在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的每个变化。

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

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

**7、AJAX 请求实例**  
下面的例子将为您演示当用户在输入框中键入字符时，网页如何与web服务器进行通信：  
请在下面的输入框中姓名键入字母（A - Z）（然后会在建议中给出提示）：  
姓名：  
建议：

实例解释 - showHint()：函数当用户在上面的输入框中键入字符时，会执行函数 “showHint()” 。该函数由 “onkeyup” 事件触发：

解释：  
如果输入框为空 (str.length==0)，则该函数清空txtHint占位符的内容，并退出函数。  
如果输入框不为空，showHint()函数执行以下任务：  
创建 XMLHttpRequest 对象；  
当服务器响应就绪时执行函数；  
把请求发送到服务器上的文件；；  
请注意我们向 URL 添加了一个参数 q （带有输入框的内容）  
AJAX 服务器页面 - ASP 和 PHP；  
由上面的 JavaScript 调用的服务器页面是 ASP 文件，名为 “gethint.asp”。  
下面，我们创建了两个版本的服务器文件，一个用 ASP 编写，另一个用 PHP 编写。

//gethint.asp文件
    "gethint.asp" 中的源代码会检查一个名字数组，然后向浏览器返回相应的名字：
    <% response.expires=-1 dim a(30) '用名字来填充数组 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" '获得来自 URL 的 q 参数 q=ucase(request.querystring("q")) '如果 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 '如果未找到提示，则输出 "no suggestion" '否则输出正确的值 if hint="" then response.write("no suggestion") else response.write(hint) end if %>

注：参考w3c关于Aajax介绍。