XMLHttpRequest基础

 

XMLHttpRequest基础

1.XMLHttpRequest对象

XMLHttpRequest对象包含8个基本属性和6个基本方法：

XMLHttpRequest属性：

属性	说明
onreadystatechange	指定当readyState属性改变时的事件处理句柄
readyState	返回当前请求的状态
status	返回当前请求的HTTP状态吗
statusText	返回当前请求的响应状态
responseBody	返回正文信息
responseStream	以文本流的形式返回响应信息
responseText	以字符串流的形式返回响应信息
responseXML	以XML数据的形式返回响应信息

XMLHttpRequest方法：

方法	说明
open()	创建一个新的HTTP请求，并指定此请求的方法、URL以及验证信息（用户名/密码）
send()	发送请求到HTTP服务器并接收响应
getAllResponseHeaders()	获取响应的所有HTTP头信息
getResponseHeaders()	从响应信息中获取指定的HTTP头信息
setResponseHeaders()	单独指定请求的某个HTTP头信息
abort()	取消当前请求

使用XMLHttpRequest对象实现异步通信一般需要以下步骤：

1. 定义XMLHttpRequest对象实例
2. 调用open()方法建立与服务器端的连接
3. 注册onreadystatechangge事件处理函数，以便接收和处理从服务器端响应的信息
4. 调用sen()方法发送请求

1.2.实例化XMLHttpRequest

//定义对象

if(window.XMLHttpRequest){
var xmlHttpRequest = new XMLHttpRequest();//兼容Mozilla、Safari等非IE浏览器
}else if(window.ActiveXObject){//兼容IE
try{
var xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){

try{
var xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

}catch(e){
}
}
}

1.3 建立连接

xmlHttpRequest.open(Method,URL,Asycn,User,password);

method(POST/GET/PUT/PROPFIND)方法不区分大小写

1.4请求和响应

xmlHttpRequest.send();

jQuery Ajax

jQuery对Ajax进行了封装，在jQuery中Ajax方法属于最底层的方法，第二层是load()/get()/post()第三层是getScript()、getJSON()方法

1. GET()请求
2. POST()请求
3. Ajax()方法请求

响应状态readyState 

属性值	说明
0	未初始化，表示对象已建立，但是尚未初始化，尚未调用open()方法
1	初始化，表示对象已建立尚未调用send()方法
2	发送数据，表示send()方法已经调用，但是当前的状态及HTTP头未知
4	数据传送中，已经接收部分数据，因为响应及HTTP头不安全，这时通过responsebody和responseText获取部分数据会出现错误
5	完成，数据接收完毕，此时可以通过responsebody和responseText获取完整的响应数据

发送请求时将表单的数据发送给服务器可通过以下两种方式：

.$("#submit").click(function(){
$("P").html(("from").serialize());
//获取表单的请求字符串信息，并显示出来
return false;
});

2.返回JSON结构的对象

$("#submit").click(function(){
var array = $("input,select,:radio").serializeArray();
//在表单上调用此方法，返回包含传递表单域和值的JSON对象

});