AJAX=异步JavaScript+XML

来源：互联网发布：企业发展优化措施编辑：程序博客网时间：2024/06/15 23:04

AJAX = 异步JavaScript和XML。

AJAX是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX可以是网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不适用AJAX）如果需要更新内容，必须重新加载整个网页。

XMLHttpRequest 是AJAX的基础。

创建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){

xmlhttp = new XMLHttpRequest(); //code for IE7+,Firefox,Chrome,Opera,Safari

}else{

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //code for IE6,IE5

}

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

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

xmlhttp.send();

POST请求

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

xmlhttp.send();

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

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

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send(fname=Bill&lname=Gates");

XMLHttpRequest的open方法中的boolean变量，当为true时，请规定在响应处于onreadystatechange事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange=funtion(){

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

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

}

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

xmlhttp.send();

获取来自服务器的响应：

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

responseText属性返回字符串形式的响应：document.getElementById("ID").innerHTML=xmlhttp.responseText;

如果来自服务器的响应是xml，而且需要作为xml对象进行解析，请使用responseXML属性。

responseXML属性返回xml的响应：

xmlDoc = xmlhttp.responseXML;

txt = "";

x=xmlDoc.getElementsByTagName("NAME");

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

txt=txt+x[i].childNodes[0]+nodeValue[0]+"<br/>";

}

document.getElementById("ID").innerHTML = txt;

onreadystatechange事件：

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

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

onreadystatechange：函数名，每当readyState属性改变时就会调用这个函数。

readyState：存有XMLHttpRequest的状态，从0到4发生变化

0：请求未初始化

1：服务器连接已经建立

2：请求已接收

3：请求处理中

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

status：200：”OK“；404：未找到页面

注释：onreadystatechange事件被触发5次，对应着readyState的不同状态

使用Callback函数

callback函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个AJAX任务，你应该为创建XMLHttpRequest对象编写一个标准函数，并为每个AJAX任务调用该函数

该函数调用应该包含URL以及发生onreadystatechange事件时执行的任务（每次调用时可能不尽相同）

function myFunction(){

loadXMLDoc("url",function(){

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

document.getElementById("ID")innerHTML = xmlhttp.requestText;

}

解析XML返回结果，用表格展示：

<html>

<head>

function loadXMLDoc(url)

{

var xmlhttp;

var txt,x,xx,i;

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)

{

txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";

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('txtCDInfo').innerHTML=txt;

}

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

xmlhttp.send();

}

</script>

</head>

<body>

</div>

</body>

</html>

HTTP协议——处理状态和返回状态码

XMLHttpRequest初次创建时，readState的值从0开始，直到接收到完整的Http这个值增加到4

0——Uninitialized——初始化状态。XMLHttpRequest对象以创建或已被abort()方法重置；

1——Open——open()方法已调用，但是send()方法未调用。请求还没被发送。

2——Sent——send()方法已调用，HTTP请求已发送到Web服务器。未接收到响应。

3——Receiving——所有响应头部都已经接收到。响应体开始接收但未完成。

4——Loaded——HTTP响应已经完全接收。

处理响应完成后，无论成功还是失败都会返回一个状态码，用来表示服务器处理请求的结果，因此在响应处理函数中，在判断完成HTTP请求的处理状态后，还需要根据返回的状态码做响相应的处理。

1XX——信息提示

这些状态代码表示临时的响应。客户端在收到常规响应之前，应准备接收一个或多个1XX响应。

100——（继续）初始的请求已经接受，客户应当继续发送请求的其余部分。

101——（切换协议）服务器将遵从客户的请求转换到另外一种协议

2XX——成功

这类状态码表明服务器成功的接受了客户端请求。

200——（成功）一切正常，对GET和POST请求的应答文档跟在后面。

201——（已创建）服务器已经创建了文档，Location头给出了它的URL。

202——（已接受）已经接受请求，但处理尚未完成。

203——（非授权信息）文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝，非权威性信息

204——（无内容）没有新文档，浏览器应该继续显示原来的文档。如果用户定期的刷新页面，而Servlet可以确定用户文档足够新，这个状态码是很有用的。

205——（重置内容）没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清楚表单输入内容。

206——（部分内容）客户发送了一个带有Range头的GET请求，服务器完成了它。

3XX——重定向

客户端浏览器必须采取更多操作来实现请求。例如，浏览器可能不得不请求服务器上的不同的页面，或通过代理服务器重复该请求。

300——（多种选择）客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在Location应答头指明。

301——（永久移动）请求的网页已永久移动到新位置。服务器返回此响应（对GET或HEAD请求的响应）时，会自动将请求转到新位置。

302——（临时移动）服务器目前从不同位置的网页响应请求，但请求者应继续使用原来位置进行以后的请求。

303——（查看其他位置）请求者应当对不同的位置使用单独的GET请求来检索响应时，服务器返回此代码。

304——（未修改）自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。

305——（使用代理）请求者只能使用代理访问请求的网页。如果服务器返回此响应，还表示请求者使用代理。

306——（临时重定向）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

4XX——请求错误

这些状态码表示请求可能出错，妨碍了服务器的处理。

400——（错误请求）服务器不理解请求的语法。

401——（未授权）请求要求身份验证。对于需要登录的网页，服务器可能返回此响应。

403——（禁止）服务器拒绝请求。

404——（未找到）服务器找不到请求的网页。

405——（方法禁用）禁用请求中指定的方法。

406——（不接受）无法使用请求的内容特性响应请求的网页。

407——（需要代理授权）此状态吗与401类似，但指定请求者应当授权使用代理。

408——（请求超时）服务器等候请求时发生超时。

409——（冲突）服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。

410——（已删除）如果请求的资源已永久删除，服务器就会返回此响应。

411——（需要有效长度）服务器不接受不含有效内容长度标头字段的请求。

412——（为满足前提条件）服务器为满足请求者在请求中设置的其中一个前提条件。

413——（请求实体过大）服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。

414——（请求的URI过长）请求的RUI（通常为网址）过长，服务器无法处理。

415——（不支持的没提类型）请求的格式不受请求页面的支持。

416——（请求范围不符合要求）如果页面无法提供请求的范围，则服务器会返回次状态代码。

417——（未满足期望值）服务器未满足“期望”请求拜倒字段的要求。

423——（锁定错误）

5XX——服务器错误

这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。

500——（服务器内部错误）服务器遇到错误，无法完成请求。

501——（尚未实施）服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回次代码。

502——（错误网关）服务器作为网关或代理，从上游服务器收到无效响应。

503——（服务不可用）服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。

504——（网关超时）服务器作为网关或代理，但是没有及时从上游服务器收到请求。

505——（HTTP版本不受支持）服务器不支持请求中所用的HTTP协议版本。

0 0