首先用构造函数创建一个XMLHttpRequest对象(简称XHR)
var request=new XMLHttpRequest();
以上代码使用大部分浏览器,但是不支持ie6,ie5
var request;
if(window.XMLHttpRequest){
request=new XMLHttpRequest();
}
else{
request=new ActiveXObject("Microsoft.XMLHTTP");//ie6,ie5
}
HTTP请求:
http是一种无状态协议:不建立持久连接,服务端不保留连接的相关信息,客户端发出请求,服务器端接收响应,然后连接就断开了,这个过程没有记忆;若想获得此次连接的信息,要重新发出请求。
一个完整的http请求的过程:
1. 建立TCP连接;
2. web浏览器向web服务器发送请求命令;
3. wab浏览器发送请求头信息;
4. web服务器响应;
5. web服务器发送应答头信息;
6. web服务器向浏览器发送数据;
7. web服务器关闭TCP连接
常见的状态码表示的HTTP请求错误类型
XHR发送请求
常用方法:
1. open(methond,url,async):XHR发出http请求
参数的具体含义:
method
表示发送请求的方法(get/post,一般get用于向服务器发送请求查询信息,post用于发送请求修改服务器信息),不区分大小写
url
请求地址(相对地址/绝对地址)
async
请求同步/异步——默认值true,同步为false
2. send(string):将请求发送到服务器
参数string:请求的主体
使用get请求:没有主体,全部放在url中,所以参数string可以不写或写NULL;
使用post请求:填写参数即为要发送请求的主体,必须填写。
代码示例:
request.open("GET","get.php",true);
request.send();
request.open("post","post.php",true);
request.send();
无参数的post请求
request.open("post","create.php",true);
requst.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=小明&sex=男");
这段代码是要创建一个叫“小明”的男人;
函数requst.setRequestHeader()是为了设置http的头信息,告诉服务器客户端要发送一个表单,参数为表单的格式,一般有两种类型,比较常见的是application/x-www-form-urlencoded这种类型。
XHL取得响应常用的方法或属性来获取响应值:
- responseText:获得字符串形式的响应数据
- responseXML:获得XML形式的响应数据
- status和statusText:以数字和文本形式返回HTTP状态码
- getAllResponseHeader():获取所有的响应报头
- getResponseHeader():获取响应中某个字段的值
XHL得到响应返回成功时的通知(监听):
readyState属性
- readyState=0:请求未初始化,open函数还未调用;
- readyState=1:服务器连接已建立,open函数得到调用;
- readyState=2:请求已接收(接收到头信息);
- readyState=3:请求处理中(接收到相应主体);
- readyState=4:请求已完成,且响应已完成。
readyState属性监听实例:
var request=new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
//通过onreadystatechange函数监听服务器响应,在readyState改变时触发
request.onreadystatechange=funtion(){
if (request.readyState===4&&request.status===200){
//则响应完成且请求成功,可以进行一些操作,例如在页面上呈现请求后服务器响应的文本request.reponseText
}
}