ajax实现
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