AJAX 的工作原理。

来源：互联网发布：最新热点网络话题编辑：程序博客网时间：2024/04/29 20:57

AJAX 的工作原理。

AJAX - 创建 XMLHttpRequest 对象

· Previous Page

· Next Page

XMLHttpRequest 是 AJAX 的基础。

XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建 XMLHttpRequest 对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

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

var xmlhttp;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

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

向服务器发送请求

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

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

xmlhttp.send();

方法

描述

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

· method：请求的类型；GET 或 POST

· url：文件在服务器上的位置

· async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

· string：仅用于 POST 请求

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

· 无法使用缓存文件（更新服务器上的文件或数据库）

· 向服务器发送大量数据（POST 没有数据量限制）

· 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

GET 请求

一个简单的 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();

亲自试一试

POST 请求

一个简单 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");

亲自试一试

方法

描述

setRequestHeader(header,value)

向请求添加 HTTP 头。

· header: 规定头的名称

· value: 规定头的值

url - 服务器上的文件

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

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

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

异步 - 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 无需等待服务器的响应，而是：

· 在等待服务器响应时执行其他脚本

· 当响应就绪后对响应进行处理

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();

亲自试一试

您将在稍后的章节学习更多有关 onreadystatechange 的内容。

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;

服务器响应

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

属性

描述

responseText

获得字符串形式的响应数据。

responseXML

获得 XML 形式的响应数据。

responseText 属性

如果来自服务器的响应并非 XML，请使用 responseText 属性。

responseText 属性返回字符串形式的响应，因此您可以这样使用：

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

亲自试一试

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;

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性

描述

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

status

200: "OK"

404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

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

}

亲自试一试

注释：onreadystatechange 事件被触发 4 次，对应着 readyState 的每个变化。

使用 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;

}

});

}

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)

{// 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 编写。

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

'如果未找到提示，则输出 "no suggestion"

'否则输出正确的值

if hint="" then

response.write("no suggestion")

else

response.write(hint)

end if

PHP 文件

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

注释：如需在 PHP 中运行这个例子，请将 url 变量的值（Javascript 代码中）由 "gethint.asp" 改为 "gethint.php"。

<?php

// 用名字来填充数组

$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";

//获得来自 URL 的 q 参数

$q=$_GET["q"];

//如果 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];

}

// 如果未找到提示，则把输出设置为 "no suggestion"

// 否则设置为正确的值

if ($hint == "")

{

$response="no suggestion";

}

else

{

$response=$hint;

}

//输出响应

echo $response;

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

AJAX 数据库实例

下面的例子将演示网页如何通过 AJAX 从数据库读取信息：

请在下面的下拉列表中选择一个客户：

窗体顶端

请选择一位客户：

窗体底端

客户信息将在此处列出。

测试源代码如下亲自试一下源代码

<html>

<head>

function showCustomer(str)

{

var xmlhttp;

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","/ajax/getcustomer.asp?q="+str,true);

xmlhttp.send();

}

</script>

</head>

<body>

<label>请选择一位客户：

<option value="APPLE">Apple Computer, Inc.</option>

<option value="BAIDU ">BAIDU, Inc</option>

<option value="Canon">Canon USA, Inc.</option>

<option value="Google">Google, Inc.</option>

<option value="Nokia">Nokia Corporation</option>

<option value="SONY">Sony Corporation of America</option>

</select>

</label>

</form>

<br />

<div id="txtHint">客户信息将在此处列出 ...</div>

</body>

</html>

实例解释 - showCustomer() 函数

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

function showCustomer(str)

{

var xmlhttp;

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","getcustomer.asp?q="+str,true);

xmlhttp.send();

}

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

· 检查是否已选择某个客户

· 创建 XMLHttpRequest 对象

· 当服务器响应就绪时执行所创建的函数

· 把请求发送到服务器上的文件

· 请注意我们向 URL 添加了一个参数 q （带有输入域中的内容）

AJAX 服务器页面

由上面的 JavaScript 调用的服务器页面是 ASP 文件，名为 "getcustomer.asp"。

用 PHP 编写服务器文件也很容易，或者用其他服务器语言。请看用 PHP 编写的相应的例子。

"getcustomer.asp" 中的源代码负责对数据库进行查询，然后用 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>")

rs.MoveNext

loop

response.write("</table>")

本例演示与 XML 一起使用的 JavaScript (AJAX)。

使用 XMLHttpRequest 对象的实例

通过 XML HTTP 把文本文件载入 HTML 元素

<html>

<head>

var xmlhttp;

function loadXMLDoc(url)

{

xmlhttp=null;

if (window.XMLHttpRequest)

{// code for Firefox, Opera, IE7, etc.

xmlhttp=new XMLHttpRequest();

}

else if (window.ActiveXObject)

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

if (xmlhttp!=null)

{

xmlhttp.onreadystatechange=state_Change;

xmlhttp.open("GET",url,true);

xmlhttp.send(null);

}

else

{

alert("Your browser does not support XMLHTTP.");

}

function state_Change()

{

if (xmlhttp.readyState==4)

{// 4 = "loaded"

if (xmlhttp.status==200)

{// 200 = "OK"

document.getElementById('T1').innerHTML=xmlhttp.responseText;

}

else

{

alert("Problem retrieving data:" + xmlhttp.statusText);

}

</script>

</head>

<button onclick="loadXMLDoc('/example/ajax/test_xmlhttp2.txt')">Click</button>

</body>

</html>

通过 XML HTTP 加载 XML 文件

<html>

<head>

var xmlhttp;

function loadXMLDoc(url)

{

xmlhttp=null;

if (window.XMLHttpRequest)

{// code for IE7, Firefox, Opera, etc.

xmlhttp=new XMLHttpRequest();

}

else if (window.ActiveXObject)

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

if (xmlhttp!=null)

{

xmlhttp.onreadystatechange=state_Change;

xmlhttp.open("GET",url,true);

xmlhttp.send(null);

}

else

{

alert("Your browser does not support XMLHTTP.");

}

function state_Change()

{

if (xmlhttp.readyState==4)

{// 4 = "loaded"

if (xmlhttp.status==200)

{// 200 = "OK"

document.getElementById('A1').innerHTML=xmlhttp.status;

document.getElementById('A2').innerHTML=xmlhttp.statusText;

document.getElementById('A3').innerHTML=xmlhttp.responseText;

}

else

{

alert("Problem retrieving XML data:" + xmlhttp.statusText);

}

</script>

</head>

<body>

<h2>Using the HttpRequest Object</h2>

<p><b>Status:</b>

</p>

<p><b>Status text:</b>

</p>

<p><b>Response:</b>

</p>

</body>

</html>

通过 XML HTTP 进行一次 HEAD 请求

<html>

<head>

var xmlhttp;

function loadXMLDoc(url)

{

xmlhttp=null;

if (window.XMLHttpRequest)

{// code for Firefox, Mozilla, IE7, etc.

xmlhttp=new XMLHttpRequest();

}

else if (window.ActiveXObject)

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

if (xmlhttp!=null)

{

xmlhttp.onreadystatechange=state_Change;

xmlhttp.open("GET",url,true);

xmlhttp.send(null);

}

else

{

alert("Your browser does not support XMLHTTP.");

}

function state_Change()

{

if (xmlhttp.readyState==4)

{// 4 = "loaded"

if (xmlhttp.status==200)

{// 200 = "OK"

document.getElementById('p1').innerHTML=xmlhttp.getAllResponseHeaders();

}

else

{

alert("Problem retrieving data:" + xmlhttp.statusText);

}

</script>

</head>

<body>

The getAllResponseHeaders() function returns the headers of a resource.

The headers contain file information like length,

server-type, content-type, date-modified, etc.</p>

<button onclick="loadXMLDoc('/example/ajax/test_xmlhttp.txt')">Get Headers</button>

</body>

</html>

通过 XML HTTP 进行一次指定的 HEAD 请求

<html>

<head>

var xmlhttp;

function loadXMLDoc(url)

{

xmlhttp=null;

if (window.XMLHttpRequest)

{// all modern browsers

xmlhttp=new XMLHttpRequest();

}

else if (window.ActiveXObject)

{// for IE5, IE6

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

if (xmlhttp!=null)

{

xmlhttp.onreadystatechange=state_Change;

xmlhttp.open("GET",url,true);

xmlhttp.send(null);

}

else

{

alert("Your browser does not support XMLHTTP.");

}

function state_Change()

{

if (xmlhttp.readyState==4)

{// 4 = "loaded"

if (xmlhttp.status==200)

{// 200 = "OK"

document.getElementById('p1').innerHTML="This file was last modified on: " + xmlhttp.getResponseHeader('Last-Modified');

}

else

{

alert("Problem retrieving data:" + xmlhttp.statusText);

}

</script>

</head>

<body>

The getResponseHeader() function returns a header from a resource.

Headers contain file information like length,

server-type, content-type, date-modified, etc.</p>

<button onclick="loadXMLDoc('/example/ajax/test_xmlhttp.txt')">Get "Last-Modified"</button>

</body>

</html>

把 XML 文件显示为 HTML 表格

<html>

<head>

var xmlhttp;

function loadXMLDoc(url)

{

xmlhttp=null;

if (window.XMLHttpRequest)

{// code for IE7, Firefox, Mozilla, etc.

xmlhttp=new XMLHttpRequest();

}

else if (window.ActiveXObject)

{// code for IE5, IE6

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

if (xmlhttp!=null)

{

xmlhttp.onreadystatechange=onResponse;

xmlhttp.open("GET",url,true);

xmlhttp.send(null);

}

else

{

alert("Your browser does not support XMLHTTP.");

}

function onResponse()

{

if(xmlhttp.readyState!=4) return;

if(xmlhttp.status!=200)

{

alert("Problem retrieving XML data");

return;

}

txt="<table border='1'>";

x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");

for (i=0;i<x.length;i++)

{

txt=txt + "<tr>";

xx=x[i].getElementsByTagName("TITLE");

{

try

{

txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";

}

catch (er)

{

txt=txt + "<td> </td>";

}

xx=x[i].getElementsByTagName("ARTIST");

{

try

{

txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";

}

catch (er)

{

txt=txt + "<td> </td>";

}

txt=txt + "</tr>";

}

txt=txt + "</table>";

document.getElementById('copy').innerHTML=txt;

}

</script>

</head>

<body>

</div>

</body>

</html>

例子解释

当用户在文本框中键入内容时，使用 XMLHttp：

当用户键入文本时，通过使用 XML HTTP 与服务器进行在线通信

<html>

<head>

var xmlHttp=null;

function showHint(str)

{

if (str.length==0)

{

document.getElementById("txtHint").innerHTML="";

return;

}

try

{// Firefox, Opera 8.0+, Safari, IE7

xmlHttp=new XMLHttpRequest();

}

catch(e)

{// Old IE

try

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

catch(e)

{

alert ("Your browser does not support XMLHTTP!");

return;

}

var url="/ajax/gethint.asp?q=" + str;

url=url+"&sid="+Math.random();

xmlHttp.open("GET",url,false);

xmlHttp.send(null);

document.getElementById("txtHint").innerHTML=xmlHttp.responseText;

}

</script>

</head>

First Name:

<input type="text" id="txt1"

onkeyup="showHint(this.value)">

</form><p>Suggestions: <span id="txtHint"></span></p> </body>

</html>

例子解释