Ajax简析

一、 引言

Ajax(Asynchronous JavaScript and XML)创建交互式 Web 应用程序而无需牺牲浏览器兼容性的流行方法，由于其重要性，所有现代的浏览器内部均构建了其对象。

其中XMLHttpRequest 对象是AJAX功能的核心,Internet Explorer 使用了一个名为 ActiveXobject的对象，而不是 XMLHttpRequest 对象，而 MozillaOpera、Safari、baidu 和 大部分非 Microsoft 浏览器都使用的是后者（下文统称 XMLHttpRequest 对象）。IE7开始也开始使用XMLHttpRequest 对象。

二、创建XMLHttpRequest 对象的方法

var xmlhttp=ActiveXobject("Microsoft.XMLHTTP");//较老的IE版本创建Microsoft.XMLHTTP对象

  var xmlhttp=new XMLHttpRequest();//现阶段比较常用的方法

三、XMLHttpRequest对象的ReadyState属性值列表。

ReadyState取值 描述 
0  描述一种"未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。 
1  描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。 
2  描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。 
3  描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。 
4  描述一种"已加载"状态；此时，响应已经被完全接收。 

onreadystatechange事件
        无论readyState值何时发生改变，XMLHttpRequest对象都会激发一个readystatechange事件。其中，onreadystatechange属性接收一个EventListener值-向该方法指示无论readyState值何时发生改变，该对象都将激活。并设置回调函数

responseText属性
        这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。

responseXML属性
       此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应；此时，Content-Type头部指定MIME(媒体)类型为text/xml，application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。无论何时，只要readyState值不为4，那么该responseXML的值也为null。

　　其实，这个responseXML属性值是一个文档接口类型的对象，用来描述被分析的文档。如果文档不能被分析(例如，如果文档不是良构的或不支持文档相应的字符编码)，那么responseXML的值将为null。

　　status属性

　　这个status属性描述了HTTP状态代码，而且其类型为short。而且，仅当readyState值为3(正在接收中)或4(已加载)时，这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。

　　statusText属性

　　这个statusText属性描述了HTTP状态代码文本；并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。

三、 XMLHttpRequest对象的方法

　　XMLHttpRequest对象提供了各种方法用于初始化和处理HTTP请求，下列将逐个展开详细讨论。

　　abort()方法

　　你可以使用这个abort()方法来暂停与一个XMLHttpRequest对象相联系的HTTP请求，从而把该对象复位到未初始化状态。

　　open()方法

　　你需要调用open(DOMString method，DOMString uri，boolean async，DOMString username，DOMString password)方法初始化一个XMLHttpRequest对象。其中，method参数是必须提供的-用于指定你想用来发送请求的HTTP方法(GET，POST，PUT，DELETE或HEAD)。为了把数据发送到服务器，应该使用POST方法；为了从服务器端检索数据，应该使用GET方法。另外，uri参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URI。借助于window.document.baseURI属性，该uri被解析为一个绝对的URI-换句话说，你可以使用相对的URI-它将使用与浏览器解析相对的URI一样的方式被解析。async参数指定是否请求是异步的-缺省值为true。为了发送一个同步请求，需要把这个参数设置为false。对于要求认证的服务器，你可以提供可选的用户名和口令参数。在调用open()方法后，XMLHttpRequest对象把它的readyState属性设置为1(打开)并且把responseText、responseXML、status和statusText属性复位到它们的初始值。另外，它还复位请求头部。注意，如果你调用open()方法并且此时readyState为4，则XMLHttpRequest对象将复位这些值。

　　send()方法

　　在通过调用open()方法准备好一个请求之后，你需要把该请求发送到服务器。仅当readyState值为1时，你才可以调用send()方法；否则的话，XMLHttpRequest对象将引发一个异常。该请求被使用提供给open()方法的参数发送到服务器。当async参数为true时，send()方法立即返回，从而允许其它客户端脚本处理继续。在调用send()方法后，XMLHttpRequest对象把readyState的值设置为2(发送)。当服务器响应时，在接收消息体之前，如果存在任何消息体的话，XMLHttpRequest对象将把readyState设置为3(正在接收中)。当请求完成加载时，它把readyState设置为4(已加载)。对于一个HEAD类型的请求，它将在把readyState值设置为3后再立即把它设置为4。

　　send()方法使用一个可选的参数-该参数可以包含可变类型的数据。典型地，你使用它并通过POST方法把数据发送到服务器。另外，你可以显式地使用null参数调用send()方法，这与不用参数调用它一样。对于大多数其它的数据类型，在调用send()方法之前，应该使用setRequestHeader()方法(见后面的解释)先设置Content-Type头部。如果在send(data)方法中的data参数的类型为DOMString，那么，数据将被编码为UTF-8。如果数据是Document类型，那么将使用由data.xmlEncoding指定的编码串行化该数据。

　　setRequestHeader()方法

　　该setRequestHeader(DOMString header，DOMString value)方法用来设置请求的头部信息。当readyState值为1时，你可以在调用open()方法后调用这个方法；否则，你将得到一个异常。

　　getResponseHeader()方法

　　getResponseHeader(DOMString header，value)方法用于检索响应的头部值。仅当readyState值是3或4(换句话说，在响应头部可用以后)时，才可以调用这个方法；否则，该方法返回一个空字符串。

　　getAllResponseHeaders()方法

　　该getAllResponseHeaders()方法以一个字符串形式返回所有的响应头部（每一个头部占单独的一行）。如果readyState的值不是3或4，则该方法返回null。

四、 发送请求 设置回调函数编码如下

<script>
var xmlHttp;
function doAjax(url) {
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
alert("ie浏览器")
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("当前浏览不支持异步，请升级浏览器！");
return;
}
if (xmlHttp != null) {
//设置回调函数
xmlHttp.onreadystatechange = doBack;
//以POST方式打开建立服务器连接
xmlHttp.open("post", url, true);
//设置头信息
xmlHttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
//发送请求
xmlHttp.send(null);
}}
//回调函数是处理响应部分，每种状态改变时都被调用
function doBack() {
var msg = document.getElementById("msg");
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//成功
alert(xmlHttp.responseText);
if (xmlHttp.responseText == 1) {
msg.innerText = "已经被使用，请更换用户名重试。";
} else {
msg.innerText = "可以使用";
}
} else {
alert("异步请求失败！");
}
}
}
function checkName() {
var username = document.getElementById("username");
var msg = document.getElementById("msg");
if (username.value == "") {
msg.innerText = "用户名不能为空！";
return checkName();
}
doAjax("demo1?username=" + username.value);
}
</script>
</head>

<body>
<input type="text" name="username" id="username" />
<input type="button" value="验证用户名" οnclick="checkName()">
<span id="msg"></span>
</body>

五.ajax的Jquery封装剖析

JSP页面进行点击触发页面，调用check()方法进行异步提交,用Ajax进行处理 ，代码如下

获取input表单的数据，获取span标签中的信息，并分别封装到两个对象中，脚本进行判断是否为空值后，对数据进行异步请求，传递给后台的数据有请求类型，请求地址，以及数据，然后设置回调方法，其中的参数（ms）为从后台接收到的信息，最后将从后台接收到的信息写入到jsp页面。

后台使用json的代码如下

因为后台向前台传递的是对象 ，但是json 接收的是字符串 ，所以需要转换将json对象转换成字符串对象（json转换成json字符串需要导包Gson）