AJAX机制详解以及跨域通信

1.Ajax

1.1.Ajax简介
Ajax简介这一部分我们主要是谈一下ajax的起源，ajax是什么？因为这些是跟技术无关的。所以，大多细节都是一笔带过。

Ajax的起源？

　　Ajax一词源于2005年 Jesse James Garrett发表的一篇题为"Ajax:A new Approach to Web Applications".他在这篇文 章中介绍了一种新技术，用他的话说，就是Ajax ：Asynchronous JavaScript +XML的缩写。

Ajax是什么？

　　这种新技术的主要目的就是为了使前端网页能够向服务器请求额外的数据而不需要卸载页面。自从这种技术出现以后，微软率先引入XHRt对象(ajax能够实现的核心对象)，然后其他浏览器相继实现这种技术。总而言之，ajax就是一种能异步通信的技术。

1.2.Ajax的核心对象---XMLHttpRequest
因为IE5是最先引入这个XHR对象的，当时并没有事实上的标准。在IE中有三种不同的XHR对象版本：MSXML2.XMLHttp,MSXML2.XMLHttp.3.0和MSXML2.XMLHttp.6.0;

根据这三种版本号，在IE中创建一个XHR对象如下：

function createXHR() { //IE7之前的版本通过这种方式
  var versions = [
    'MSXML2.XMLHttp',
    'MSXML2.XMLHttp.3.0',
    'MSXML2.XMLHttp.6.0'
  ];
  var xhr = null;
  for (var item in versions) {
    try {
      xhr = new ActiveXObject(item); //若不存在该版本，可能会出错
      if (xhr) break;
    } catch (e) {
      //一般对这种错误不做处理
    }
  }
  return xhr;
}

在IE引入这个对象之后，其他浏览器厂商也相继跟随，这时候XHR对象成为事实上的标准！

跨浏览器创建XHR对象;

function createXHttpRequest() {
  if (typeof XMLHttpRequest !== 'undefined') { //不要用 if(XMLHttpRequest){}这种形式，
    return new XMLHttpRequest();              //如果是这种形式在找不到XMLHttpRequest函数的情况下，会报错。
} else if (typeof ActiveXObject !== 'undefined') { 
         return createXHR(); //用到刚才我们创建的函数 
  } else { throw new Error('不能创建XMLHttpRequest对象'); } }

1.2.XMLHttpRequest的用法
XMLHttpRequest对象的函数有6个：

XMLHttpRequest对象的属性有5个：

属性 描述
responseText 作为响应主题被返回的文本
responseXML 如果相响应的是text/html或者application/xml类型的话，这个属性将保存着响应的XML文档
status http的响应状态码
statusText http状态的说明
readyState XMLHttpRequest对象的状态位 0 1 2 3 4 分别表示5种状态
timeout 设置超时时间,单位是ms.目前只有IE8+支持---尚未标准化(不推荐使用)

XMLHttpRequest对象的事件属性onReadyStateChange：-----所有浏览器兼容

该属性监听的是 XMLHttpRequest对象的readyState属性的变化：

readyState的变化分别对应如下状态：

0：尚未初始化。未调用open()之前

1：启动。调用open()之后，但是未调用send();

2：发送。调用send()但是尚未得到响应。

3：正在接收数据。刚接收到响应数据开始到接收完成之前。

4： 完成。数据接收完成。

XMLHttpRequest对象的事件属性ontimeout -----仅限IE8+,不过最新的主流高版本浏览器也已经实现（不推荐使用）
xhr.timeout=1000;//一秒钟
xhr.ontimeout=functon(){  //处理代码  ......}

这种使用方式有个问题需要注意，就是在超时之后，在接收到数据后仍然会触发onreadystatechange事件，如果在处理onreadychange事件时访问xhr.status属性，会出错。所以我们在访问该属性时需要做一下try{}catch处理。但是，因为这个属性暂不兼容，所有我们就不重点讲了。

XMLHttpRequest对象的事件属性onload onerror onloadstar onbort onprogress：

-----非IE浏览器和IE 10+已实现

onload在IE8以上可以实现，大部分事件根据readySate变化均可以实现，以上事件只不过是方便使用而已。

onload和onprogress 这两种事件分别对应着readyState=4和readyState=3的情况，使用方式分别如下：

补充：有些事件均可以根据readyState的状态进行模拟。只有有的浏览器进行了方便化处理而已。

3.单向跨域技术 ---CORS
今天我们这里讲的是客户端网页向不在同一个域的服务器请求数据..客户端在收到返回的数据时时,用回调函数处理数据。

即：

1. 客户端向域外服务器请求数据

2.服务器得到响应后向客户端发送数据。

3.客户端根据返回的数据执行回调函数.

我知道不同域下的iframe也可以进行通信，而且这也是一种跨域通信技术。但是，这种iframe页面之间的双向通信，我们在下一个专题里面讲解，今天主要讲的是单向通信。

3.1.CORS跨域请求的原理
在用xhr（XMLHttpRequest）对象或者xdr(XDomainRequest)对象，发送域外请求时，大概的实现原理如下图：

3.2.IE中CORS技术的实现
IE8引入了一个XDR类型，这个类型与XHR基本类似，但是其能实现安全可靠地跨域通信。

XHD的特点：

1.cookie不会随请求发送，也不会随响应返回。

2.只能设置请求头部中的Content-Type片段。

3.不能访问响应头部信息。

4.只是支持get和post请求。

XDR支持onload和onerror事件属性，且其使用方式和XHR基本一致，不过其open()只接收两个参数，默认是异步的。

3.3.跨浏览器的CORS技术实现

在标准浏览器中XHR对象就已经可以自动实现跨域请求，但是XHR和XDR的不同之处：

1.XHR可以在设置 withCredentials =true时，浏览器会把cookie发送给服务器，服务器此时通过设置头部Access-Control-Allow-Credentials:true时来响应。如果，服务器不设置这个属性，则浏览器会触发onerror事件。

2.在回调函数中可以访问status和statusText属性，而且支持同步请求。

以下是实现跨域请求的代码：

4.单向跨域技术 ---JSONP技术

JSONP技术比较简单，其主要原理主要是利用script标签的特性。

script标签和image标签一样，它们都具有src属性，而且这个属性是可跨域的。

因为script标签返回的都是js代码，且该js代码会自动执行。所以，如果我们请求返回的数据也是类似一段js代码的形式，岂不是就可以实现在脚本加载完毕后自动执行。

如果我们的请求，返回的数据是 callback + '(' + json + ')'; 这种形式的数据, 那么在脚本加载完毕之后也就能自动执行callback()函数了.

4.1.客户端写法

1.客户端将回调函数名写入<Script>脚本的url参数中。

2.script加载的时候会发送跨域请求。

4.2.服务器端

1.通过url得到函数名，命名为callback

2.将请求的数据作为函数的参数格式转化json格式，命名为。

3.将返回结果拼接为 callback+"("+json+")"; --------返回的就是填充式的数据，这段数据在脚本中会自动执行。

4.返回数据.

4.3.JSONP技术的缺点

1.因为是通过url传参数，所以请求只能是get类型的。

2.<script>目前只有onload属性事件，onerror还没有统一化，如果加载脚本出错，客户端很难得到反馈。

3.所请求数据的站点必须是可信任的，如果返回的数据段中注入的有恶意的代码，危害较大，且难以发现。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Django框架如何使用ajax的post方法

JQuery ajax 返回json时出现中文乱码该如何解决

如何解决JQuery ajaxSubmit提交中文乱码

以上就是AJAX机制详解以及跨域通信的详细内容，更多请关注Gxl网其它相关文章！