AJAX=异步JavaScript+XML
2016-08-23 13:43
337 查看
AJAX = 异步JavaScript和XML。
AJAX是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX可以是网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不适用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>
<script type="text/javascript">
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 id="txtCDInfo">
<button onclick="loadXMLDoc('/example/xmle/cd_catalog.xml')">获得 CD 信息</button>
</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协议版本。
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>
<script type="text/javascript">
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 id="txtCDInfo">
<button onclick="loadXMLDoc('/example/xmle/cd_catalog.xml')">获得 CD 信息</button>
</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协议版本。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML）
- Ajax学习(一),获得XMLHttpRequest对象,进行初步异步交互(jquery.javascript)
- AJAX--异步JavaScript和xml
- 异步的JavaScript 和 XML等于ajax
- AJAX(Asynchronous JavaScript And XML，异步JavaScript + XML)
- AJAX异步JavaScript和XML 基本
- ajax-异步JavaScript和XML
- 什么是AJAX? AJAX:”Asynchronous JavaScript and XML”中文意思：异步JavaScript和XML。
- jquery中的ajax（异步xml和javascript通信）
- javascript 性能分析：Ajax 异步javascript和xml
- [Ajax]异步的 JavaScript 和 XML：Ajax入门教程（整理）
- ajax 异步的javascript和xml
- 使用JavaScript和Ajax发出异步请求 XMLHttpRequest
- Sencha-概念-Ajax（异步JavaScript和XML）（官网文档翻译13）
- 【JavaScript】AJAX总结（异步JavaScript和XML）
- jquery中的ajax（异步xml和javascript通信）
- Ajax（异步 JavaScript 和 XML）
- ajax的异步请求（javascript和xml）实现方式
- AJAX(异步JavaScript和XML)注册账户实时验证
- AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）