原生JavaScript下的Ajax

时间:2020-03-18 coderHe 人气:3

概述

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

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

　　而AJAX通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

　 ajax包括以下几步骤：

　　　　1、创建AJAX对象

　　　　2、发出HTTP请求

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

　　　　4、更新网页数据

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

　　尽管名称如此，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

概述

创建

初始化请求

参数

发送请求

接收响应

超时

最后

　　参数