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对象实现异步通信一般需要以下步骤：

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

<script>
//定义对象

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){

}

}

}

</script>

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()方法

GET()请求
POST()请求
Ajax()方法请求
响应状态readyState 

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

发送请求时将表单的数据发送给服务器可通过以下两种方式：
1.$("#submit").click(function(){
$("P").html(("from").serialize());//获取表单的请求字符串信息，并显示出来
return false;
});

2.返回JSON结构的对象

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