XmlHttpRequest发送请求与得到响应

XmlHttpRequest,中文可以解释为可扩展超文本传输请求。Xml可扩展标记语言,Http超文本传输协议,Request请求。

XMLHTTP是一组API函数集,可被JavaScript、JScript、VBScript以及其它web浏览器内嵌的脚本语言调用,通过HTTP在浏览器和web服务器之间收发XML或其它数据。XMLHTTP最大的好处在于可以动态地更新网页,它无需重新从服务器读取整个网页,也不需要安装额外的插件。该技术被许多网站使用,以实现快速响应的动态网页应用。例如:Google的Gmail服务、Google Suggest动态查找界面以及Google Map地理信息服务。

XMLHTTP是AJAX网页开发技术的重要组成部分。

除XML之外,XMLHTTP还能用于获取其它格式的数据,如JSON或者甚至纯文本。

(来自维基百科)

XHR发送请求

1、open方法:

参数:

  1. method:发送请求方法,get方式还是post方式,不区分大小写,一般使用大写。
  2. url:请求地址,可以使用相对地址,也就是相对文档的地址,也可以使用绝对地址。
  3. async:请求同步/异步,一般使用异步请求,这个参数就是true,如要使用同步的话,就是false。默认的是true(异步),所以,如果是异步请求的话,这个参数可以不写。

2、send方法:

send方法将请求发送到服务器上

参数:

string:

  • 使用get请求时,实际是没有主体的,所有的参数都拼在url中,所以send参数可以不填,或者填写null。

  • post请求时,send请求一定要有参数。

XHR获取服务器的响应

一个标准的获取服务器响应的实例

if (xmlHttp) {
xmlHttp.open('GET', the_request_url, true);
xmlHttp.onreadystatechange=function(){
if (xmlHttp.readyState==4) {
if (xmlHttp.status==200) {
<!--dosomething.... 比如xmlHttp.responseText-->
}
}
};
xmlHttp.send(null);
}

onreadystatechange事件

当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。

readyState属性

此属性的变化代表了服务器的响应变化

0:没初始化,open没调用

1:服务器连接已建立,open已经调用

2:服务器已经接收到头信息了

3:服务器接收到响应主体了

4:响应完成

  • responseText:获得字符形式的响应数据
  • responseXML:获得XML形式的响应数据
  • status和statusText:以数字和文本形式返回HTTP状态码
  • getAllResponseHeader():获取所有的响应报头
  • getResponseHeader():查询响应中的某个字段的值

当 readyState 等于 4 且状态为 200 时,表示响应已就绪

典型的XHR建立一个ajax请求(异步请求)
1、var request=new XMLHttpRequest():
2、构造方法request.open("GET","get.php",true);
3、send一些数据request.send();
4、对过程监听
if(request.readyState===4&&request.status===20){
//做一些事情request.responseText
}
}

(完)

分享到