AJAX用法示例详解

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” 事件触发：

function showHint(str){
    var xmlhttp;
    if (str.length==0){
        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","gethint.asp?q="+str,true);
    xmlhttp.send();
}

解释：
如果输入框为空 (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介绍。