XHR——XMLHttpRequest对象

时间  2019-11-16
标签 xhr xmlhttprequest 对象 繁體版
原文   原文链接

XmlHttp是什么？

最通用的定义为：XmlHttp是一套能够在Javascript、VbScript、Jscript等脚本语言中经过http协议传送或从接收XML及其余数据的一套API。XmlHttp最大的用处是能够更新网页的部份内容而不须要刷新整个页面。
来自MSDN的解释：XmlHttp提供客户端同http服务器通信的协议。客户端能够经过XmlHttp对象(MSXML2.XMLHTTP.3.0) 向http服务器发送请求并使用微软XML文档对象模型Microsoft? XML Document Object Model (DOM)处理回应。 php

如今的绝对多数浏览器都增长了对XmlHttp的支持，IE中使用ActiveXObject方式建立XmlHttp对象，其余浏览器如：Firefox、Opera等经过window.XMLHttpRequest来建立xmlhttp对象。 html

XmlHttp对象参考：

属性：

onreadystatechange* 指定当readyState属性改变时的事件处理句柄。只写
readyState 返回当前请求的状态，只读.
responseBody 将回应信息正文以unsigned byte数组形式返回.只读
responseStream 以Ado Stream对象的形式返回响应信息。只读
responseText 将响应信息做为字符串返回.只读
responseXML 将响应信息格式化为Xml Document对象并返回，只读
status 返回当前请求的http状态码.只读
statusText 返回当前请求的响应行状态，只读

* 表示此属性是W3C文档对象模型的扩展.数据库

方法：

abort 取消当前请求
getAllResponseHeaders 获取响应的全部http头
getResponseHeader 从响应信息中获取指定的http头
open 建立一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码)
send 发送请求到http服务器并接收回应
setRequestHeader 单独指定请求的某个http头

建立XMLHttpRequest对象

建立XMLHttpRequest对象
对于Ajax，最核心的一个对象是XMLHttpRequest，全部的Ajax操做都离不开对这个对象的操做
xmlHttp = new XMLHttpRequest();

三、XMLHttpRequest对象相关方法
XMLHttpRequest.open(传递方式,地址,是否异步请求)
XMLHttpRequest.onreadystatechange
XMLHttpRequest.responseText(xhr.send(null))数组

与以前众多DOM操做同样,建立XHR对象也具备兼容性问题:IE6及以前的版本使用ActiveXObject,IE7以后及其它浏览器使用XMLHttpRequest浏览器

不但IE6及其以前的版本将XHR做为一个ActiveXObject运行,并且还存在众多版本:一开始是Microsoft.XMLHTTP 以后变成Msxml2.XMLHTTP及更新版的Msxml3.XMLHTTP缓存

	function XHR() {
		var xhr;
		try {xhr = new XMLHttpRequest();}
		catch(e) {
			var IEXHRVers =["Msxml3.XMLHTTP","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];
			for (var i=0,len=IEXHRVers.length;i< len;i++) {
				try {xhr = new ActiveXObject(IEXHRVers[i]);}
				catch(e) {continue;}
			}
		}
		return xhr;
	}

使用XHR

	var xhr = XHR();
	//open方法 建立一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码)
	xhr.open("get","test.txt",true);
	/*第一个参数是请求方式,通常用get与post方法,与form标签的method相似
	第二个参数是请求的URL
	第三个参数是请求是同步进行仍是异步进行,true表示异步
	调用了open方法仅仅是传递了参数而已*/
	xhr.send(null);//调用了send方法后才会发出请求
	//而且get方式发送请求时send参数是null

在服务器环境中执行上面的脚本,而且给一个php或asp脚本发送请求,会发现服务器端脚本其实会被执行服务器

	//PHP脚本
	$fp =fopen("a.txt","wb");
	fwrite($fp,"PHP文件在后台执行了");
	fclose($fp);
	echo "返回内容!";

上面PHP脚本的返回内容不会直接在页面上显示出来,必须要用JS经过XHR对象接收并发

	var xhr = XHR();
	xhr.open("get","test.php",true);
	xhr.onreadystatechange = callback;//在readystatechange事件上绑定一个函数
	//当接收到数据时,会调用readystatechange事件上的事件处理函数
	xhr.send(null);
	functon callback() {
		//在这里面没有使用this.readyState这是由于IE下面ActiveXObject的特殊性
		if (xhr.readyState == 4) {//readyState表示文档加载进度,4表示完毕
			alert(xhr.reponseText);//responseText属性用来取得返回的文本
		}
	}

XHR对象参考

readyState属性 返回当前请求的状态

  • 0 (未初始化) 对象已创建，可是还没有初始化（还没有调用open方法）
  • 1 (初始化) 对象已创建，还没有调用send方法
  • 2 (发送数据) send方法已调用，可是当前的状态及http头未知
  • 3 (数据传送中) 已接收部分数据，由于响应及http头不全，这时经过responseBody和responseText获取部分数据会出现错误
  • 4 (完成) 数据接收完毕,此时能够经过经过responseBody和responseText获取完整的回应数据
	var xhr =XHR();
	alert(xhr.readyState);//0
	xhr.open("get","test.htm",true);
	alert(xhr.readyState);//1
	xhr.send(null);
	alert(xhr.readyState);//IE下会是4,而FF下会是2
	//能够经过readystatechange事件监听
	xhr = XHR();
	xhr.onreadystatechange = function () {
		alert(xhr.readyState);//FF下会依次是1,2,3,4但最后还会再来个1
		//IE下则是1,1,3,4
	};
	xhr.open("get","test.txt",true);
	xhr.send(null);

从上面能够看到,对于readyState这个属性,各个浏览器见解也不同,但其实咱们只须要知道当状态为4的时候能够获取response就好了!app

status 返回当前请求的http状态码

status属性返回当前请求的http状态码,此属性仅当数据发送并接收完毕后才可获取。完整的HTTP状态码以下:异步

  • 100 Continue 初始的请求已经接受，客户应当继续发送请求的其他部分
  • 101 Switching Protocols 服务器将听从客户的请求转换到另一种协议
  • 200 OK 一切正常，对GET和POST请求的应答文档跟在后面。
  • 201 Created 服务器已经建立了文档，Location头给出了它的URL。
  • 202 Accepted 已经接受请求，但处理还没有完成。
  • 203 Non-Authoritative Information 文档已经正常地返回，但一些应答头可能不正确，由于使用的是文档的拷贝
  • 204 No Content 没有新文档，浏览器应该继续显示原来的文档。若是用户按期地刷新页面，而Servlet能够肯定用户文档足够新，这个状态代码是颇有用的
  • 205 Reset Content 没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容
  • 206 Partial Content 客户发送了一个带有Range头的GET请求，服务器完成了它
  • 300 Multiple Choices 客户请求的文档能够在多个位置找到，这些位置已经在返回的文档内列出。若是服务器要提出优先选择，则应该在Location应答头指明。
  • 301 Moved Permanently 客户请求的文档在其余地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。
  • 302 Found 相似于301，但新的URL应该被视为临时性的替代，而不是永久性的。
  • 303 See Other 相似于301/302，不一样之处在于，若是原来的请求是POST，Location头指定的重定向目标文档应该经过GET提取
  • 304 Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（通常是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还能够继续使用。
  • 305 Use Proxy 客户请求的文档应该经过Location头所指明的代理服务器提取
  • 307 Temporary Redirect 和302（Found）相同。许多浏览器会错误地响应302应答进行重定向，即便原来的请求是POST，即便它实际上只能在POST请求的应答是303时 才能重定向。因为这个缘由，HTTP 1.1新增了307，以便更加清除地区分几个状态代码：当出现303应答时，浏览器能够跟随重定向的GET和POST请求；若是是307应答，则浏览器只 能跟随对GET请求的重定向。
  • 400 Bad Request 请求出现语法错误。
  • 401 Unauthorized 客户试图未经受权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头，浏览器据此显示用户名字/密码对话框，而后在填写合适的Authorization头后再次发出请求。
  • 403 Forbidden 资源不可用。
  • 404 Not Found 没法找到指定位置的资源
  • 405 Method Not Allowed 请求方法（GET、POST、HEAD、Delete、PUT、TRACE等）对指定的资源不适用。
  • 406 Not Acceptable 指定的资源已经找到，但它的MIME类型和客户在Accpet头中所指定的不兼容
  • 407 Proxy Authentication Required 相似于401，表示客户必须先通过代理服务器的受权。
  • 408 Request Timeout 在服务器许可的等待时间内，客户一直没有发出任何请求。客户能够在之后重复同一请求。
  • 409 Conflict 一般和PUT请求有关。因为请求和资源的当前状态相冲突，所以请求不能成功。
  • 410 Gone 所请求的文档已经再也不可用，并且服务器不知道应该重定向到哪个地址。它和404的不一样在于，返回407表示文档永久地离开了指定的位置，而404表示因为未知的缘由文档不可用。
  • 411 Length Required 服务器不能处理请求，除非客户发送一个Content-Length头
  • 412 Precondition Failed 请求头中指定的一些前提条件失败
  • 413 Request Entity Too Large 目标文档的大小超过服务器当前愿意处理的大小。若是服务器认为本身可以稍后再处理该请求，则应该提供一个Retry-After头
  • 414 Request URI Too Long URI太长
  • 416 Requested Range Not Satisfiable 服务器不能知足客户在请求中指定的Range头
  • 500 Internal Server Error 服务器遇到了意料不到的状况，不能完成客户的请求
  • 501 Not Implemented 服务器不支持实现请求所须要的功能。例如，客户发出了一个服务器不支持的PUT请求
  • 502 Bad Gateway 服务器做为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答
  • 503 Service Unavailable 服务器因为维护或者负载太重未能应答。例如，Servlet可能在数据库链接池已满的状况下返回503。服务器返回503时能够提供一个Retry-After头
  • 504 Gateway Timeout 由做为代理或网关的服务器使用，表示不能及时地从远程服务器得到应答
  • 505 HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本

事实上,咱们只须要知道状态为200的时候(OK)才读取response就好了!

responseText与responseXML

responseText 将响应信息做为字符串返回 . XMLHTTP尝试将响应信息解码为Unicode字符串，XMLHTTP默认将响应数据的编码定为UTF-8，若是服务器返回的数据带 BOM(byte-order mark)，XMLHTTP能够解码任何UCS-2 (big or little endian)或者UCS-4 数据。注意，若是服务器返回的是xml文档，此属性并不处理xml文档中的编码声明。你须要使用responseXML来处理。

responseXML 将响应信息格式化为Xml Document对象并返回 . 若是响应数据不是有效的XML文档，此属性自己不返回XMLDOMParseError，能够经过处理过的DOMDocument对象获取错误信息。

其它一些XHR对象的方法

abort 取消当前请求

getAllResponseHeaders 获取响应的全部http头 每一个http头名称和值用冒号分割，并以\r\n结束。当send方法完成后才可调用该方法。

getResponseHeader 从响应信息中获取指定的http头 当send方法成功后才可调用该方法。若是服务器返回的文档类型为"text/xml", 则这句话xmlhttp.getResponseHeader("Content-Type");将返回字符串"text/xml"。可使用 getAllResponseHeaders方法获取完整的http头信息。

setRequestHeader 单独指定请求的某个http头 若是已经存在已此名称命名的http头，则覆盖之。此方法必须在open方法后调用。

请求方式

GET 请求

 	//JS
 	var xhr = XHR();
 	xhr.open("get","test.php?qs=true&userName=abc&pwd=123456",true);
 	xhr.onreadystatechange = function () {
 		if (xhr.readyState==4 && xhr.status ==200) {
 			alert(xhr.responseText);
 		}
 	};
 	xhr.send(null);
 	//PHP
 	print_r($_GET);

POST 请求

 	//JS
 	var xhr = XHR();
 	xhr.open("post","test.php",true);
 	xhr.onreadystatechange = function () {
 		if (xhr.readyState==4 && xhr.status ==200) {
 			alert(xhr.responseText);
 		}
 	};
 	//比GET请求多了一步
 	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 	//另外,数据是经过send方法发送的
 	xhr.send("qs=true&userName=abc&pwd=123456");
 	//PHP
 	header("Cache-Control: no-cache, must-revalidate");//可让浏览器不缓存结果
 	print_r($_POST);


@font-face { font-family: "Times New Roman"; }@font-face { font-family: "宋体"; }p.MsoNormal { margin: 0pt 0pt 0.0001pt; text-align: justify; font-family: "Times New Roman"; font-size: 10.5pt; }h3 { margin-top: 13pt; margin-bottom: 13pt; page-break-after: avoid; text-align: justify; line-height: 172%; font-family: "Times New Roman"; font-weight: bold; font-size: 16pt; }span.msoIns { text-decoration: underline; color: blue; }span.msoDel { text-decoration: line-through; color: red; }div.Section0 { page: Section0; }

同步（flase）异步(true)原理

1、同步原理（flase）:使用回调函数时，回调函数会插入执行队列，执行对列得等回调函数执行完才会依次往下执行（造成堵塞）

 

2、异步原理（true）:使用回调函数时，回调函数会插入执行队列，执行对列不会等回调函数执行才执行，而是一直往下执行。而回调函数则会跑到执行队列的最前面。（不造成堵塞）

 

3、状态值(state :0.1.2.3.4.)

 

 

例子：

 

 

 

 

 

 

 

 

4、异步原理例子：（不堵塞代码执行）

 

 

5、同步原理：（堵塞代码执行）

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程