原生JavaScript下的Ajax

时间 2020-03-18

标签原生 javascript ajax 栏目 JavaScript 繁體版

原文原文链接

概述

　　AJAX即asynchronous javascript and XML，中文翻译是异步的javascript和XML。是指一种建立交互式网页应用、用于建立快速动态网页的开发技术。javascript

传统的网页（不使用 AJAX）若是须要更新内容，必须重载整个网页页面。java

　　而AJAX经过在后台与服务器进行少许数据交换，可使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。ajax

　 ajax包括如下几步骤：浏览器

　　　　一、建立AJAX对象缓存

　　　　二、发出HTTP请求安全

　　　　三、接收服务器传回的数据服务器

　　　　四、更新网页数据网络

　　归纳起来，就是一句话，ajax经过原生的XMLHttpRequest对象发出HTTP请求，获得服务器返回的数据后，再进行处理.app

　　尽管名称如此，XMLHttpRequest 也能够用于获取任何类型的数据，而不只仅是XML，它甚至支持HTTP之外的协议（包括 file:// 和 FTP）。异步

XMLHttpRequest对象建立和使用

建立

　　XMLHttpRequest对象是AJAX的核心技术，这是由微软首先引入的一个特性。

　　 IE5是第一款引入XHR对象的浏览器。

　　在IE5中，XHR对象是经过MSXML库中的一个ActiveX对象实现的，而IE7+及其余标准浏览器都支持原生的XHR对象

1 var xhr;
2 if(window.XMLHttpRequest){
3     xhr = new XMLHttpRequest();
4 }else{
5     xhr = new ActiveXObject('Microsoft.XMLHTTP');
6 }

初始化请求

　　建立好以后使用open方法初始化一个请求

1     open(method: string, url: string): void;
2     open(method: string, url: string, async: boolean, username?: string | null, password?: string | null): void;

　　参数

　　method: 　　要使用的HTTP方法，好比「GET」、「POST」、「PUT」、「DELETE」、等。对于非HTTP(S) URL被忽略。
　　url: 　　该URL相对于执行代码的当前页面，且只能向同一个域中使用相同端口和协议的URL发送请求。若是URL与启动请求的页面有任何差异，都会引起安全错误
　　async 可选: 　　一个可选的布尔参数，默认为 true，表示要不要异步执行操做。若是值为 false， send()方法直到收到答复前不会返回。若是 true，已完成事务的通知可供事件监听器使用。若是 multipart属性为 true则这个必须为 true，不然将引起异常。
　　user 可选: 　　可选的用户名用于认证用途；默认为 null。
　　password 可选: 　　可选的密码用于认证用途，默认为 null。

发送请求

　　发送请求使用的是send方法

 send(body?: Document | BodyInit | null): void;

　　若是是异步请求（默认为异步请求），则此方法会在请求发送后当即返回；若是是同步请求，则此方法直到响应到达后才会返回

　　1.GET方法，send()方法无参数，或参数为null；

　　注：没有设置头部信息的话，会默认发送带有 "* / *" 的Accept 头部。

接收响应

　　上边几个步骤设置完之后就能够接收服务器响应回来的数据

　　一个完整的HTTP响应由状态码、响应头集合和响应主体组成。在收到响应后，这些均可以经过XHR对象的属性和方法使用

　　属性有

responseText  做为响应主体被返回的文本(文本形式)，若是请求未成功或还没有发送，则返回 null。
responseXML 返回一个 Document，若是响应的内容类型是'text/xml'或'application/xml'，这个属性中将保存着响应数据的XML DOM文档，若是请求未成功、还没有发送或时不能被解析为 XML 或 HTML，则返回 null。
status 表明请求的响应状态
readyState 表明请求的状态码

　　在接收到响应后，第一步是检查status属性，以肯定响应已经成功返回。

　　通常来讲，能够将HTTP状态码为200做为成功的标志。

　　此时，responseText属性的内容已经就绪，并且在内容类型正确的状况下，responseXML也能够访问了。

　　此外，状态码为304表示请求的资源并无被修改，能够直接使用浏览器中缓存的版本；固然，也意味着响应是有效的

　　不管内容类型是什么，响应主体的内容都会保存到responseText属性中，而对于非XML数据而言，responseXML属性的值将为null

 1   xhr.onreadystatechange = function () {
 2 　　if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){
 3    　　 console.log(xhr.responseText);
 4 　　}else{
 5    　　 alert('request was unsuccessful:' + xhr.status);
 6 　　}
 7     if (xhr.readyState === 4) {
 8       if (xhr.status == 200) {
 9        console.log(xhr.responseText);
10       }
11     }
12   }

　　这里要注意一下超时的问题

超时

　　XHR对象的timeout属性等于一个整数，表示多少毫秒后，若是请求仍然没有获得结果，就会自动终止。该属性默认等于0，表示没有时间限制

　　若是请求超时，将触发ontimeout事件须要在send以后状态码改变以前使用

  xhr.ontimeout = function () {
    console.log('The request timed out.');
  }
  xhr.timeout = 1000;

　　[注意]IE8-浏览器不支持该属性

最后

　　AJAX自己并不难，主要的就是有一部份内容涉及到网络方面的知识，因此致使学起来有必定的难度。

　　[注意]若是要创建N个不一样的请求，就要使用N个不一样的XHR对象。固然能够重用已存在的XHR对象，但这会终止以前经过该对象挂起的任何请求

　　HTTP协议有一个天生的缺陷：通讯只能由客户端发起，所以HTTP协议作不到服务器主动向客户端推送信息

　　它的这种单向请求的特色，注定了若是服务器有连续的状态变化，客户端要获知就必须采用轮询的方式。而轮询的效率低下且很是浪费资源，由于必须不停地链接或者让HTTP链接始终打开。此时，也就出现了WebSocket。

以后会写一下WebSocket API的用法

原生JavaScript下的Ajax

概述

建立

初始化请求

参数

发送请求

接收响应

超时

最后

　　参数