个性化阅读
专注于IT技术分析

JavaScript AJAX XMLHttpRequest对象的基本原理及用法全解

Web前端人员都知道,在网页开发或者是程序中,获取后台数据数据的重要性,是前端开发者必须掌握的一项技能。而这项技术在2005年才被大家认识并开始流行至今。是一个叫Garrett的提出了Ajax,声称在能够在浏览器请求额外的数据时无需卸载页面,会带来更好的用户体验。在这之前,web都是沿用“单击”然后“等待”的交互模式。这种浏览器和服务器通信的技术的问世可谓是刷新了人对JavaScript和web的认识。而这项Ajax技术的核心是XMLHttpRequest对象,简称:XHR。别看名字中包含XML,其实和数据格式无关,重点是无需刷新页面都可以从服务器获取数据,数据格式不一定是XML。

XHR图1

一、XHR的用法

XHR发展至今,大多数浏览器都已经开始支持XHR,但IE7之前的版本是不支持的,但是所有浏览器都有MSXML库,所以我们要告诉浏览器根据MSXML库中的一个ActiveX对象实现。在使用XHR的时候需要创建XHR实例对象。

例如:

var xhr=new XMLHttpRequest();

在使用XHR对象是,需要调用一个open()方法,open()方法接受三个参数,第一个参数是发送的方式;第二个是请求的页面;第三个是一个布尔值,表示是否异步发送请求,如果异步则为“true”,否则为“false”。同事要调用一个send()发送方法,这个方法接收一个参数,是发送到服务器的请求数据,如果没有发送数据,就填写“null”,因为有些浏览器这里必须得有个值,否则可能就有问题了。

例如:

xhr.open("GET","https://api.apiopen.top/recommendPoetry",falese);
xhr.send(null);

发送请求之后,服务器都对其做出响应。响应的结果会自动添加到XHR的属性值那里去。一般而然,http的状态码是200标示已经响应成功。

除此之外,XHR还有一个属性是readyState,readyState属性有0-4这五个值,分别用来标示请求和响应过程中当前的活动状态。0-4这四个阶段中,当readyState的值为4时,表示数据已经返回到浏览器啦,可以在浏览器中使用数据啦。不过使用readyState之前,需要在open() 之前指定onreadystatechange事件在检测readyState状态。

XHR原理图

例如:

var xhr;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange=function()
{
if (xhr.readyState==4 && xhr.status==200)
{
console.log(xhr.responseText);//返回的数据文本
}
}
xhr.open("GET","https://api.apiopen.top/recommendPoetry",true);
xhr.send(null);

以上代码返回的是一个json格式的对象,当我想访问对象属性的时候发现是“undefined”为什么呢?原来是字符串类型了。要转为object格式才可以访问对象属性。

console.log(typeof(JSON.parse(xhr.responseText)));//object类型
console.log(typeof(xhr.responseText));//string类型

二、HTTP头部信息

在请求和响应都会有响应的HTTP头部信息,客户端向服务器发送一个请求,请求头包含请求的方法、URI、协议版本、以及包含请求修饰符、客户信息和内容的类似于MIME的消息结构。服务器以一个状态行作为响应,相应的内容包括消息协议的版本,成功或者错误编码加上包含服务器信息、实体元信息以及可能的实体内容。XHR中有三个方法是处理头部信息的:

  • setRequestHeader(“myheader”,”myvalue”);设置头部信息,带两个参数,第一个是头部信息的名称,第二个是需要设置的值。
  • getRequestHeader(“myheader”);获得头部的信息,带一个参数,该参数标示需要获取的头部信息的名称,返回值。
  • getAllRequestHeaders( );不带参数,返回全部头部信息。

例如:

xhr.open("GET","https://api.apiopen.top/recommendPoetry",true);
xhr.setRequestHeader('myname','myname');
xhr.send(null);
XHR设置头部效果图

三、GET请求

GET请求是常见的请求类型,是页面向服务器请求数据的方法,请求的形式是在url连接上带参数,通常参数是放在url的末尾,并且每一对名-值的参数都要用和好“&”分开。可是有些请求的页面的url是没有问号“?”的,我们需要加上问号才能添加参数。如下例子中我们定义了一个函数,用于判断连接中是否有问号,“-1”表示找不到索引,用三元运算给连接url加上问好“?”,如果存在问号表示已经带了一个参数了,就给链接url加上“&”和参数隔开。

例如:

function addurl(url,name,val){
url = url + (url.indexOf("?") == -1 ? "?" : "&");
url = url + name +"="+ val; 
console.log(url)//https://api.apiopen.top/recommendPoetry?page=1 在url后面添加参数
}
var href = "https://api.apiopen.top/recommendPoetry";
addurl(href,"page","1");

如果出现加入的参数有格式的问题,需要给参数的每个名字和值使用encodeURIComponent( ) 函数可把字符串作为 URI 组件进行编码,例如:encodeURIComponent(name)。反正我没遇到过这样的问题,如果你遇到了这样可以解决。

XHR-sosesy

四、POST请求

GET提交虽然简单,查询字符串只需要以参数的形式加到url提交就可以了,那么简单你以为不用付出代价么,相对于POST而然,代价就是不够安全,会把你请求的数据暴露出来让大家都能看见,并且请求的参数是有限的,浏览器通常都会限制url长度在2K个字节,不过你不介意就没关系。所以我个人会用POST请求比较多,因为在实际项目中,不可能把用户的信息暴露出来,并且要提交的数据一般都比较多,用POST是最适合的选择,而且也不难,就是把open( )方法中的第一个参数换成POST就可以初始化一个POST请求了。另外因为send( )是发送数据到服务器的,所以可以在这里加入一个XML格式的文档,为什么GET不行,因为GET发送携带的数据有限啊,适合少量发送,而POST可以把一整个文档都发送过去。所以可以用于提交表单文件等。

另外,既然send( )中装载着数据,所以使用POST时要注意设置Content-Type的内容为application/x-www-form-urlencoded,用于告诉服务器请求有参数变量。以便浏览器出来迎接数据。所以,GET产生一个TCP数据包;POST产生两个TCP数据包。

例如:

xhr.open("post","https://api.apiopen.top/recommendPoetry",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("page=1");
赞(0) 打赏
未经允许不得转载:srcmini » JavaScript AJAX XMLHttpRequest对象的基本原理及用法全解
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏