[ JS 进阶 ] Ajax 详解 (1) ：XHR 对象

2024年2月26日 269次阅读 来源: kraaas

Ajax是一种能够向服务器要求分外的数据而无需卸载页面(无革新)的手艺，是对Asynchronous Javascript + XML的简写，因其优越的用户体验，现已成为web不可或缺的手艺。我们所熟知的Jquery的封装的ajax要领，也是经由过程这类手艺完成的。

1. 没有 XHR 对象之前我们怎样完成 Ajax

在XHR涌现之前，Ajax式的通讯必需借助一些hack手腕来完成，大多数是运用隐蔽的框架或内联框架，还能够运用script标签和img标签；

<iframe> : iframe元素照样挺壮大的，我们起首须要把发送给web服务器的数据编码到URL中，如：pages/index.html?name='jozo'&age=22,然后设置iframe的src属性为该URL，服务器能建立一个包括响应内容的HTML文档，那末我们就能够把响应信息保存在该文档中返回web浏览器。如许完成的话，须要让iframe元素对用户不可见，能够经由过程CSS来隐蔽它。

<script>: script标签的src属性也能提议HTTP GET要求，而且它能够跨域通讯而不受同源战略的限定。经由过程这类体式格局交互时，服务器的响应须要采纳JSON编码的数据格式，并用一个指定的回调函数名包裹须要返回的数据：callBack({"name":"jozo","age":22}),这个包裹的响应会成为script标签的里的内容来实行，就相当于实行了callBack()这个函数，所以在web端须要定义一个同名函数。这个就是JSONP跨域，细致请自行查阅。

<img>:img标签一样也是应用src属性提议的HTTP GET 要求，但它的功用没有上面二者的全，由于它只能完成单向的通讯，只能由客户端发送数据到服务器，服务器则响应对应的图片，而我们没法随意马虎从图片中猎取数据，而且这个图片必需不可见，比方通明的1x1PX的图片。

2. XHR 对象

Ajax手艺的中心是XMLHttpRequest对象，XHR为向服务器发送要乞降剖析服务器响应供应了流通的接口，能以异步的体式格局从服务器获得更多的信息，意味着用户单击后，能够没必要革新页面也能获得数据。这个单词包括XML,Http,Rquest,确切，ajax与这三者都有关联 ：

  • XML ：可作为ajax交互数据的数据类型，固然也不仅局限于xml，像我们所知的json,jsonp,html,script,text都能够作为数据类型。

  • http : 运用ajax手艺实在就是经由过程发送HTTP要乞降吸收响应的来到达目标。能够经由过程设置发送要求头信息来使服务器做出响应的响应。

  • request ：说广泛一些就是request和response，要乞降响应，get要求，post要求，然后操纵响应信息。

下面来看下详细的XHR对象有哪些属性和要领。

3. XHR 对象的属性和要领

属性：

  1. readyState：HTTP 要求的状况
  2. responseText：响应体（不包括头部）
  3. responseXML：对要求的响应，剖析为 XML 并作为 Document 对象返回。
  4. status：由服务器返回的 HTTP 状况代码，如 200 示意胜利
  5. statusText：这个属性用称号而不是数字指定了要求的 HTTP 的状况代码。也就是说，当状况为 200 的时刻它是 “OK”，当状况为 404 的时刻它是 “Not Found”。

要领：

  1. abort() : 作废当前响应，封闭衔接而且完毕任何未决的收集运动。
  2. getAllResponseHeaders()：把 HTTP 响应头部作为未剖析的字符串返回。
  3. getResponseHeader()：返回指定的 HTTP 响应头部的值。
  4. open()：初始化 HTTP 要求参数，比方 URL 和 HTTP 要领，然则并不发送要求。
  5. send()：发送 HTTP 要求，运用传递给 open() 要领的参数，以及传递给该要领的可选要求体。
  6. setRequestHeader()：向一个翻开但未发送的要求设置或增加一个 HTTP 要求。

标红的属性和要领都是比较经常使用的，偷个懒，详细的属性和要领的引见去 w3school 看下了哈，⊙▂⊙。

属性和要领都要熟习控制才很好的控制背面的内容。

4. 跨浏览器的 XHR 对象

IE7之前的浏览器都是不支撑原生的XMLHttpRquest对象的，IE5,6中是经由过程MSXML库中的一个ActiveX对象完成的。《JS高等程序设想》和《JS威望指南》都是经由过程检测MSXML库中XMLHttp的版原本建立XHR对象的，看起来比较贫苦，我们照样用w3school的吧 o(╯□╰)o：

var xhr = null;
function createXHR(){
    if (window.XMLHttpRequest){
         // 新浏览器
         xhr = new XMLHttpRequest();
     }else if (window.ActiveXObject){
         // IE5,IE6
         xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
}

5. 一些细节

  1. Ajax手艺能够用于 HTTP 和 HTTPS 要求。

  2. 我们须要将ajax测试代码布置到服务器上，才一般事情。然则，在firefox浏览器上测试则不必。

  3. 要求的体式格局除了get,post 外还支撑：delete,head,option,put.要求体式格局称号大小写不敏感。

  4. 当我们给要求设置了onreadystatechange事宜时，当readyState改变成0或1时能够没有触发这个事宜，经由测试，当为0时确切没有触发，为1时触发了，我也不知道为啥 ⊙▂⊙。

  5. 假如你猎取的表单数据只是用来读取服务器数据，而且表单数据是公然的，那末用get体式格局的要求吧，由于少许数据的get要求的效力比post快多了。背面能够测试来测试下。

  6. HTTP要求的各部分的指定递次是：要求要领和URL–> 要求头–>要求主体。而且在运用XHR对象的时刻，当挪用了send()要领才最先启动收集。而XHR API 的设想使每一个要领都邑写入收集流，所以在send()要领背面定义的事宜或属性会被疏忽。所以，挪用XHR对象的要领要有肯定的递次，比方：在send()要领注册onreadystatechange()事宜。

    原文作者：kraaas
    原文地址: https://segmentfault.com/a/1190000002782175
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞