js——XHR知识归纳

Posted ellenxx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js——XHR知识归纳相关的知识,希望对你有一定的参考价值。

XHLHttpRequest对象

ajax技术能够向服务器请求额外的数据而无需卸载页面。其核心技术是XMLHttpRequest对象(XHR)。
IE7之前的旧版本通过MSXML库中的ActiveX对象实现。而IE7及之后的浏览器支持XMLHttpRequest构造函数
可以做兼容性的createXHR();

function createXHR(){
		//检查是否支持XMLHttpRequest
		if(typeof XMLHttpRequest!="undefined")
		{
			//支持,返回XMLHttpRequest对象
			return new XMLHttpRequest();
		}
		//如果不支持XMLHttpRequest,就检查是否支持ActiveXObject
		else if(typeof ActiveXObject !="undefined")
		{
			//检查activeXString
			if(typeof arguments.callee.activeXString!="string")
			{
				var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len;
				for(i=0,len=versions.length;i<len,i++)
				{
					try{
						//看是否有可以支持的版本
						new ActiveXObject(versions[i]);
						arguments.callee.activeXString=versions[i];
						break;
					}
					catch(ex){
						//跳过
					}
				}
			}
			//返回ActiveXObject
			return new ActiveXObject(arguments.callee.activeXString);
		}
		else
		{
			//都不行
			throw new Error("NO XHR object availablle");
		}
	}

这个例子先检查XHR对象是否存在,存在就返回XHR对象,不存在就检查ActiveX对象是否存在,存在就返回,如果两个对象都不存在,就返回错误。

XHR的使用

XHR有一个方法叫open(),接收三个参数,请求方式(get,post),请求的url,表示是否异步请求的布尔值(true为异步)

let xhr=createXHR();
xhr=open(\'get\',\'https://www.baidu.com\',flase);

open()方法不会直接发送请求,而是启用一个请求以备发送

XHR还有一个方法叫send(),接收一个参数,即作为请求主体要发送的数据。
send()和open()配合使用就可以发送特定的请求

xhr=open(\'get\',\'https://www.baidu.com\',flase);
xhr.send(null);

上面代码是同步执行的,所以要等服务器响应请求后js代码才会继续执行。服务器响应后会自动为XHR对象填充以下信息:

属性 描述
responseText 作为响应主题被返回的文本
responseXML 如果响应的内容是"text/xml"或"application/xml",这个属性将保存响应数据的XML DOM文档 ,如果不是xml文件,这个值为空
status HTTP的响应状态
statusText HTTP响应状态说明

状态判断

尽量不要用statusText去判断,statusText在跨域时不太可靠。

if((xhr.status>=200&&xhr.status<=300)||xhr.status===304)
	{
		//success
		console.log("status success");
	}
	else
	{
		console.log("status fail");
	}

注意:浏览器有时候会错误的报告204状态,IE的XHR的ActiveX会将201设置为1223,IE中原生的XHR会将204规范为200,而opera或将status设置为0。

请求/响应的活动阶段

可以检测XHR对象的readyState属性来求得请求/响应的当前阶段

  • 0:未开始,还没有调用open()方法。
  • 1:启用,调用open()方法
  • 2:发送,调用send()方法
  • 3:接收,服务器接收到部分请求
  • 4:完成,服务器接收到所有请求,而且客户端可以使用了。

这些阶段的改变会触发readystatechange事件,可以根据该事件来检测readyState

	//onreadystatechange事件要在open之前指定,保证跨域浏览器的兼容性
	xhr.onreadystatechange=function(){
		if(xhr.readyState===4)
		{
			if((xhr.status>=200&&xhr.status<=300)||xhr.status===304)
			{
				//success
				console.log("status success");
			}
			else
			{
				console.log("status fail");
			}
		}
	}


	xhr.open("get","https://www.baidu.com",true);
	xhr.send(null);

可以用xhr.abort()在响应前取消异步请求,
这个方法会使XHR停止触发时间,再也不允许访问与响应有关的对象属性,这个方法在请求终止后还会对XHR解引,不建议XHR重用,会影响内存。

请求头

  • 不同浏览器发送的信息可能有所不同
  • 设置:setRequestHeader()方法可以自定义头部信息,接收两个参数头部字段的名称和头部字段的值,但是必须在open()与send()之间调用
xhr.open("get","www.baidu.com",true);
// 不要使用浏览器正常字段,会影响浏览器响应
xhr.setRequestHeader("MyHeader","MyValue");
xhr.send(null);

响应头

  • 获取:getResponseHeader(),传入头部字段的名称,获得相应的响应头信息
  • 获取全部:getAllResponseHeaders(),取得一个包含所有头部信息的长字符串
var MyHeader=xhr.getResponseHeader(\'Content-Type\');
var allHeader=xhr.getAllResponseHeader();

Get请求

get请求常用于向服务器查询某些信息。

//这里的查询字符串需要正确的编码
xhr.open("get","example.php?name=name1&age=age1",true);

GET请求经常发生的错误是查询字符串的格式问题,查询字符串中的每个参数名和值都需要encodeURIComponent()来先进行编码。

/**
	 * [对查询字符串进行编码]
	 * @param {[type]} url   [要添加的参数的url]
	 * @param {[type]} name  [参数名]
	 * @param {[type]} value [参数值]
	 */
	function addURLParam(url,name,value)
	{
		url+=(url.indexOf("?")===-1?"?":"&");
		url+=encodeURIComponent(name)+"="+encodeURIComponent(value);
		return url;
	}

使用这个函数可以保证查询字符串的格式良好,能可靠的用于XHR对象

POST请求

post请求用于向服务器发送应该被保存的数据,把数据作为请求主体提交。
post请求可以提交XML文档

xhr.open("post","example.php",true)
xhr.send(data);

默认情况下,服务器对post请求和Web表单提交不会一视同仁。如果需要提交表单,可以使用如下代码

/**
	 * post提交表单
	 * @return {[type]} [description]
	 */
	function submitData(){
		var xhr=createXHR();
		xhr.onreadystatechange=function(){
		if(xhr.readyState===4)
		{
			if((xhr.status>=200&&xhr.status<=300)||xhr.status===304)
			{
				//success
				console.log("status success");
			}
			else
			{
				console.log("status fail");
			}
		}
		}

		xhr.open("post","example.php",true);
		//设置头部信息为表单提交时的内容
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		var form=document.getElementById("user-info");
		//将表单数据序列化
		xhr.send(serialize(form));
	}

以上是关于js——XHR知识归纳的主要内容,如果未能解决你的问题,请参考以下文章

JS知识点-2 通信类

js知识简单归纳

JaveScript简单数据类型(JS知识点归纳二)

JaveScript对象(JS知识点归纳七)

JaveScript内置对象(JS知识点归纳八)

JaveScript数组(JS知识点归纳五)