AJAX是为了实现异步通信，提高用户体验度。JavaScript本身并不具有向服务器发送请求的功能(不使用NodeJs)，要么使用window.open()方法重新打开一个页面向服务器发送请求，要么使用XMLHttpRequest对象发送请求。不同的是前者是普通的同步交互模式，而后者是异步交互方式。
XMLHttpRequest提供了一系列的属性和方法，来向服务器发送异步的http请求；在服务器处理用户请求的过程中，XMLHttpRequest通过属性的状态值来反应http请求所处的状态，并根据这些状态来指示JavaScript做出相应的处理。当服务器顺利完成响应用户行为的动作，并将响应数据返回时，XMLHttpRequest提供了response系列的方法，将响应数据以文本、XML DOcument对象等方式组装起来，以供给JavaScript处理。
|
属性 |
说明 |
|
readyState |
表示XMLHttpRequest对象的状态：0：未初始化。对象已创建，未调用open； 1：open方法成功调用，但Sendf方法未调用； 2：send方法已经调用，尚未开始接受数据； 3：正在接受数据。Http响应头信息已经接受，但尚未接收完成； 4：完成，即响应数据接受完成。 |
|
Onreadystatechange |
请求状态改变的事件触发器（readyState变化时会调用这个属性上注册的javascript函数）。 |
|
responseText |
服务器响应的文本内容 |
|
responseXML |
服务器响应的XML内容对应的DOM对象 |
|
Status |
服务器返回的http状态码。200表示“成功”，404表示“未找到”，500表示“服务器内部错误”等。 |
|
statusText |
服务器返回状态的文本信息。 |
|
方法 |
说明 |
|
Open(string method,string url,boolean asynch, String username,string password) |
指定和服务器端交互的HTTP方法，URL地址，即其他请求信息； Method:表示http请求方法，一般使用"GET","POST". url：表示请求的服务器的地址； asynch：表示是否采用异步方法，true为异步，false为同步； 后边两个可以不指定，username和password分别表示用户名和密码，提供http认证机制需要的用户名和密码。 |
|
Send(content) |
向服务器发出请求，如果采用异步方式，该方法会立即返回。 content可以指定为null表示不发送数据，其内容可以是DOM对象，输入流或字符串。 |
|
SetRequestHeader(String header,String Value) |
设置HTTP请求中的指定头部header的值为value. 此方法需在open方法以后调用，一般在post方式中使用。 |
|
getAllResponseHeaders() |
返回包含Http的所有响应头信息，其中相应头包括Content-length,date,uri等内容。 返回值是一个字符串，包含所有头信息，其中每个键名和键值用冒号分开，每一组键之间用CR和LF（回车加换行符）来分隔！ |
|
getResponseHeader(String header) |
返回HTTP响应头中指定的键名header对应的值 |
|
Abort() |
停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。 |
知道了XMLHttpRequest的属性和方法就看看怎么使用它吧
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ajax的使用</title> </head> <body> <div> <label>请输入员工编号</label> <input type="text" id="number"></input> <button id="search" value="查询"></button> <div id="searchResult"></div> </div> <div> <label>请输入员工姓名</label> <input type="text" id="staffName"></input><br> <label>请输入员工编号</label> <input type="text" id="staffNumber"></input><br> <label>请输入员工年龄</label> <input type="text" id="staffAge"></input><br> <label>请输入员工职位</label> <input type="text" id="staffJob"></input><br> <button id="save" value="保存"></button> <br> <div id="saveResult"></div> </div> <script type="text/javascript" src="../../lib/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#search").bind("click",function(){ var request=new XMLHttpRequest(); request.open("GET","url?number="+$("#number").val()); request.send(); request.onreadystatechange=function(){ if(request.readyState===4 && request.status===200){ $("#searchResult").html(request.responseText); }else{ console.log("响应出错"); } } }) $("#save").bind("click",function(){ var request=new XMLHttpRequest(); request.open("POST",url); request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); var data="name="+$("#staffName").val()+"&number="+$("#staffNumber").val() +"&age="+$("#staffAge").val()+"&job="+$("#staffJob").val(); request.send(data); request.onreadystatechange=function(){ if(request.readyState===4 && request.status===200){ $("#saveResult").html(request.responseText); }else{ console.log("响应出错"); } } }) }) </script> </body> </html>
以上代码是使用XMLHttpRequest对象实现异步通信，实现了GET和POST的2种请求方式，尤其要注意POST的方式里要加上request.setRequestHeader()。有了JQuery以后，异步通信就简单许多，Jquery里有一个专门的.ajax()的方法实现异步通信。对以上的代码中的GET进行改造，如下：
$(document).ready(function(){
$("#search").bind("click",function(){
$.ajax({
type:"GET",
url:url,
data:{number:$("#number").val()},
dataType:"json",
success:function(data){
if(data.success){
$("#searchResult").html(data.msg);
}
}
error:function(jQxhr){
console.log("响应出错");
}
})
})
})
比较一下，是不是简化了许多？YES