一、XMLHttpRequest对象
它是一个具有应用程序接口的JavaScript对象,能够使用超文本传输协议(HTTP)连接一个服务器。
初始化:var http_request = new ActiveXObject("Msxml2.XMLHTTP");或者var http_request = new ActiveXObject(Microsoft.XMLHTTP");
var http_request = new XMLHttpRequest();
1、XMLHTTPRequest对象的常用方法
① open( method , URL , asyncFlag )
method:get或者post
URL:请求地址,可以是绝对地址或者相对地址,并且可以查询字符串
asyncFlag:可选参数,用于指定请求参数,异步请求为true,同步请求为false,默认为true
② sen( content )
content:用于指定发送的数据,可以使DOM对象的实例、输入流或者字符串,也可以是什么都不填
③ setRequestHeader( label , value )
label:用于指定HTTP头
value:用于为指定的HTTP头设置值
④ abort()
用于停止当前异步请求
⑤ getRequestHeader( headerLabel )
headerLabel:用于指定HTTP头,包括server、Content-Type和Date等
⑥ getResponseHeaders()
用于以字符串形式返回完整的HTTP头信息。
2、XMLHttpRequest对象的常用属性
属性 | 描述 |
onreadystatechange |
每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数 |
readyState |
请求的状态。有以下5个取值: 0=未初始化 1=正在加载 2=已加载 3=交互中 4=完成 |
responseText |
服务器的响应,表示为字符串 |
responseXML |
服务器的响应,表示为XML。这个对象可以解析为一个DOM对象 |
status |
返回服务器的HTTP状态码,如: 200=“成功” 202=”请求被接受,但尚未成功“ 400=“错误的请求” 404=“文件未找到” 500=“内部服务器错误” |
statusText | 返回HTTP状态码对应的文本,如OK或者Not Found(未找到)等 |
二、传统Ajax工作流程
1、发送请求
①初始化XMLHttpRequest对象
if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else if(window.ActiveXObject){ xmlhttp = new ActiveXObject(Microsoft.XMLHTTP); }
②为XMLHTTPRequest对象指定一个回调函数,用于对返回结果进行处理
xmlhttp.onreadystatechange = function(){getResult(param)};//调用回调函数
③创建个与服务器的连接
xmlhttp.open("GET",url,true) xmlhttp.open("POST",url,true) //url可以是一个JSP页面的URL地址,也可以是Servlet的映射地址
④向服务器发送请求
//向服务器发送GET请求 xmlhttp.send();
//向服务器发送POST请求 //无参数: xmlhttp.send(); //有参数: var param = "user="+form1.user.value+"&pwd="+form1.pwd.value;//组合参数 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//在发送POST请求前,需要设置正确的请求头 xmlhttp.send(param);
2、处理服务器响应
①处理字符串响应
function getResult(){ if(xmlhttp.readyState==4&&xmlhttp.status==200){ document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
②处理XML响应
function getResult(){ if(xmlhttp.readyState==4&&xmlhttp.status==200){ var xmlDoc = xmlhttp.responseXML; var message = ""; for(i=0;i<xmlhttp.getElementsByTagName("board").length;i++){ var board = xmlDoc.getElementsByTagName("board").item(i); message = message+board.getAttribute("name"); document.getElementsById("msg").innerHTML=message; } } }
三、jQuery实现Ajax
1、$.get(url [,data] [,success(data,textStatus,jqXHR)] [,dataType])
url:请求页面的URL地址
data:可选参数,发送至服务器的key/value数据。(data参数会自动添加到url中,如果url中的某个参数又通过data参数进行传递,get()方法是不会自动合并相同名称的参数的。)
success(data,textStatus,jqXHR):可选参数,用于指定载入成功后执行的回调函数。其中,data用于保存呢返回的数据;testStatus为状态码(可以是timeout、error、notmodified、success或parsererror);jqXHR为XMLHTTPRequest对象。不过回调函数只有当testStatus的值为success时才会执行,如果需要在出错的时候也执行,那么就需要使用$.ajax()方法实现。
dataType:可选参数,用于指定返回数据的类型,可以是xml、json、script或者html。默认值为html
$.get("check.jsp",{user:$("#username").val()},function(data){alert(data);});
2、$.post(url [,data] [,success(data,textStatus,jqXHR)] [,dataType])
url:请求页面的URL地址
data:可选参数,发送至服务器的key/value数据。(data参数会自动添加到url中,如果url中的某个参数又通过data参数进行传递,get()方法是不会自动合并相同名称的参数的。)
success(data,textStatus,jqXHR):可选参数,用于指定载入成功后执行的回调函数。其中,data用于保存呢返回的数据;testStatus为状态码(可以是timeout、error、notmodified、success或parsererror);jqXHR为XMLHTTPRequest对象。不过回调函数只有当testStatus的值为success时才会执行,如果需要在出错的时候也执行,那么就需要使用$.ajax()方法实现。
dataType:可选参数,用于指定返回数据的类型,可以是xml、json、script或者html。默认值为html
$.post("check.jsp",{title:"祝福",content:"祝愿天下有情人不成眷属"},function(data){alert(data);});
3、JSON数据
①对象(名称/值):{"属性1":属性值1,"属性2":属性值2······"属性n":属性值n}
②数组(值得有序列表):{"数组名":[对象1,对象2,对象3,······,对象n]}
4、$.ajax(url [,settings])
url:必选参数,用于发送请求的地址(默认为当前页)
settings:可选参数,用于进行Ajax请求设置,包含许多可选的设置参数,都是以key/value形式体现的。常用的设置参数如表所示
设置参数 |
说明 |
type |
用于指定请求方式,可以设置为GET或者POST,默认值为GET |
data |
用于指定发送到服务器的数据,如果数据不是字符串,将自动转换为请求字符串格式。在发送GET请求时,该数据将附加在URL的后面。设置processData参数为false,可以禁止自动转换。 该设置参数的值必须为key/value格式。如果为数组,jQuery将自动为不同值对应同一个名称。 |
dataType |
用于指定服务器返回数据的类型。如果不指定,jQuery将自动根据HTTP包的MIME信息返回responseText或responseXML,并作为回调函数参数传递,可用值如下: text:返回纯文本字符串 xml:返回xml文档,可用jQuery进行处理 html:返回纯文本HTML信息(包含的<script>元素会在插入DOM后执行) script:返回纯文本JavaScript代码。不会自动缓存结果,除非设置了cache参数。 json:返回JSON格式的数据 jsonp:JSONP格式。使用JSONP形式调用函数时,如果存在代码“url?callback=?”,那么jQuery将自动替换“?”为正确的函数名,以执行回调函数 |
async |
设置发送请求的方式,默认是true,为异步请求方式,同步请求方式可以设置成false |
beforeSend(jqXHR,Settings) |
用于设置一个发送请求前可以修改XMLHttpRequest对象的函数,如添加自定义HTTP头等 |
complete(jqXHR,textStatus) |
用于设置一个请求为完成后的回调函数,无论成功或失败,该函数均被调用 |
error(jqXHR,textStatus,errorThrown) |
用于设置请求失败时调用的函数 |
success(data,textStatus,jqXHR) |
用于设置请求成功时调用的函数 |
global |
用于设置是否触发全局Ajax事件。设置为true时,触发全局Ajax事件;设置为false则不处罚全局Ajax事件。默认值为true |
timeout |
用于设置请求超时的时间(单位为毫秒)。此设置将覆盖全局设置 |
cache |
用于设置是否从浏览器缓存中加载请求信息,设置为true将会从浏览器缓存中加载请求信息。默认值true,当dataType的值为script何jsonp时值为false |
doFilter(data,type) |
用于指定将Ajax返回的原始数据进行预处理的函数。提供了data和type两个参数:data是Ajax返回的原始数据,type是调用$.ajax()方法时提供的dataType参数。 函数返回的值将由jQuery进一步处理 |
contentType |
用于设置发送信息数据值服务器内容编码类型,默认值为applciation/x-www-form-urlencoded,该默认值使用大多数应用场合 |
ifModified |
用于设置是否仅在服务器数据改变时获取新数据。使用HTTP包的Last-Modified头信息判断,默认值为false |
$.ajax({ url:"chatServlet", //设置请求地址 type:"GET", //设置请求方式 dataType:"json", //设置返回数据的类型 data:{ //设置传递的数据 "action":"get", "nocache":new Date().getTime(), }, //设置请求成功时执行的回调函数 success:function(data){ var message = ""; var chats = eval(data); $.each(chats.function(i){ message +="<br/>"+chats[i].message; }; $("#content").html(message); }, //设置请求失败时执行的回调函数 error:function(){ alert("请求失败!"); } });