AJAX

Ajax的简称为异步的javascript和xml
使用Ajax技术构建web应用，能够实现异步提交请求，并可以避免刷新整个页面，提高用户的体验。
Ajax并不是一个新的技术，是新瓶装老酒。

Ajxa技术主要包含四个组件，即javaScript、css、dom以及XMLHTTPRequest对象
核心是XML–是Ajax技术的核心对象，使用Ajax技术都是从XMLHttpRequest对象开始。在Ajax应用程序中，XMLHttpRequest对象负责将用户的信息以异步的方式发送到客户端，并接收服务器响应的信息和数据。
JavaScript是Ajax非常重要的组成部分， JavaScript可以用来创建XMLHttpRequest对象， 使用该对象的属性和方法，也可以直接操作客户端，将XMLHttpRequest对象返回的内容更 新到页面中，而不是刷新整个页面。可以说JavaScript在Ajax中起到了“胶水”般的粘合 作用，处处都需要使用JavaScript来实现相关功能。
CSS
CSS是Cascading Style Sheets(层叠样式表单)的简称，可以定义文字的大小、间距，图片的阴影、位置等样式，提供了独立手段控制页面的表现，因此可以让Ajax开发人员更专注开发应用逻辑相关的代码，只要提供合理的文档结构，而不必关注表现层面的实现，这在一定程度上简化了Ajax的开发。CSS还能够结合JavaScript等技术，在Ajax中实现一些特殊效果。
DOM
DOM是Document Object Model的简称，即文档对象模型，是用于HTML 和 XML 文档的API。DOM提供了文档的结构化表现，把网页和脚本或编程语言连接了起来，可以修改文档的内容和视觉表现。使用Ajax编程时，从服务器端返回的内容需要更新到客户端页面中，就可以使用DOM对象操作浏览器内容，进行局部刷新。
为了能够在不同浏览器中都能使用，创建XMLHttpRequest对象时必须考虑到不同浏览器的兼容问题，往往使用如下JavaScript代码实现
第一步：创建XMLHttpRequest对象的JS

var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest();} }

XMLHttpRequest的属性
readyState
status
statusText
onreadystatechange
responseText
responseXML
XMLHttpRequest的属性：readyState
readyState属性用来返回当前的请求状态，有五个可选值。分别是0到4，每个值的含义如下描述。
0：“未初始化”状态， 表示已经创建一个XMLHttpRequest对象，但是还没有初始化请求对象。
1：“打开”状态，表示已经调用了XMLHttpRequest对象的open()方法，已经准备好向服务器端发送请求。
2：“发送”状态，表示已经调用了XMLHttpRequest对象的send()方法把一个请求发送到服务器端，但是还没有收到服务器的响应。
3：“正在接收”状态，表示已经接收到HTTP响应头的信息，但是消息体部分还没有完全接收。
4：“已加载”状态，表示响应已经被完全接收。

XMLHttpRequest的属性：status
status属性用来返回服务器的响应状态码，例如200表示OK，一切正常；404表示请求的文件没有找到；500表示内部服务器发生错误等。如下代码所示。
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//处理代码
}}
上述演示代码中，首先判断readyState的值，当值为4时，即表示响应内容已经加载完毕，然后进一步判断status的值，当status的值为200时，即表示响应状态为OK，则进行进一步处理。

XMLHttpRequest的属性：statusText
statusText属性的含义与status属性非常类似，不过statusText用文本的形式表示服务器的响应状态，而status以状态码的形式表示。例如，statusText值为OK时，表示一切正常，对应status为200；值为Not Found表示文件没有找到，对应status为404。

XMLHttpRequest的属性： onreadystatechange
onreadystatechange是一个事件触发器，其值往往是一个JavaScript的函数名。任何一个状态的变化，不管是readyState还是status的变化，都会触发该事件，并调用指定的JavaScript函数。如下代码所示：
xmlHttp.onreadystatechange = callback;
上述代码中，指定了XMLHttpRequest的onreadystatechange值为callback，所以不管readyState还是status发生变化，都会触发该事件，调用callback函数。

XMLHttpRequest的属性： responseText
responseText属性用来接收服务器端返回的文本内容，以一个字符串的形式存在。使用responseText属性可以直接将返回的内容赋值给某一个域的innerHTML值，显示到客户端。如下代码所示：
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
document.getElementById(“message”).innerHTML = xmlHttp.responseText;
}
}
上述代码中，当判断得到响应信息加载结束并响应状态码为200时，使用responseText属性将服务器端返回的内容直接赋值给客户端页面中id值为message的域，把返回内容直接显示到message域。

XMLHttpRequest的属性： responseXML
responseXML用来接收服务器的响应，以XML的形式存在，这个对象可以解析为一个DOM对象，进一步使用DOM的API更新客户端页面，如下代码所示
var message = xmlHttp.responseXML.getElementsByTagName(“message”)[0].firstChild.data;
var passed = xmlHttp.responseXML.getElementsByTagName(“passed”)[0].firstChild.data;
上述代码中，使用XMLHttpRequest对象的responseXML属性将服务器端返回内容封装为一个DOM对象，进一步调用DOM中的方法解析返回的内容，赋值给两个变量message和passed。
XMLHttpRequest的方法
除了上述的六个属性外，XMLHttpRequest还定义了一系列方法，主要方法有：
open(DOMString method，DOMString uri，boolean async，DOMString username，DOMString password)
send()
setRequestHeader(DOMString header，DOMString value)
getResponseHeader(DOMString header)
getAllResponseHeaders()
abort()
open方法有五个参数。其中，method参数用于指定用来发送请求的HTTP方法如，GET、POST、PUT等。uri参数用于指定XMLHttpRequest对象请求的具体URI，可以是绝对URI也可以是相对URI。async参数指定该请求是否是异步的，默认值为true。对于要求认证的服务器，可以提供可选的用户名和密码参数。在调用open()方法后，XMLHttpRequest的readyState属性设置将为1，并且把responseText、responseXML、status和statusText属性设置为初始值。如下代码所示：
var url = “validate?custname=” + escape(custname.value);
xmlHttp.open(“GET”, url, true);
上述代码中，使用GET方式异步请求URL为validate的服务器端资源，同时将请求参数custname追加到URL后传递给服务器端。使用GET方式请求资源，请求参数以明文形式传递，且长度有限。使用POST方式发送请求，不仅能够隐藏请求参数，同时长度也不受限制。
var url = “validate”;
xmlHttp.open(“POST”, url, true);
xmlHttp.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”)
上述代码中，使用POST方式异步请求URL为validate的服务器端资源，值得注意的是，使用POST方式提交请求，必须使用XMLHttpRequest对象的setRequestHeader方法设置请求头Content-Type的值为application/x-www-form-urlencoded，请求参数在接下来学习的send方法中指定。
XMLHttpRequest的方法：send方法
调用open方法后，就已经准备好了一个XMLHttpRequest对象，接下来需要使用send方法把请求发送到服务器端。当open方法的async参数为true时，send方法立即返回，从而允许其它客户端脚本可以继续使用，而不需要等待服务器的响应。send()方法可以使用一个可选的参数，常常使用该参数在POST方式请求服务器资源时用来传递请求参数等信息。如果不需要传递信息，可以使用不带参数的send()方法发送请求，也可以使用send(null)的形式发送请求。如下代码所示：
xmlHttpRequest.open(“POST”,”login”,true);
xmlHttpRequest.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
xmlHttp.send(“username=”+encodeURI(username));
上述代码中，使用POST方式请求URL为login的服务器端资源，然后设置了请求头Content-Type的值，最后使用send方法发送请求，并同时传递请求参数username。如果不需要传递请求参数，则使用如下形式进行：
xmlHttpRequest.open(“GET”,”list”,true);
xmlHttp.send(null);
setRequestHeader(DOMString header，DOMString value)
setRequestHeader方法可以用来设置请求头信息，需要两个参数，一个是请求头名字，一个是请求头的值。setReaquestHeader方法必须在open方法之后调用，否则将发生异常。
getResponseHeader(DOMString header)
getResponseHeader方法可以根据一个响应头的名字，返回对应的值，如果响应头信息没有返回到客户端，则返回null值。
getAllResponseHeaders()
getAllResponseHeaders方法返回所有的响应头信息，使用键值对的形式表示响应头的名字和值。
abort()
abort()方法可以用来暂停与一个XMLHttpRequest对象相联系的HTTP请求，从而把该对象恢复到未初始化状态。