1.CORS

使用自定义http头部让浏览器与服务器沟通，从而确定请求和响应是成功还是失败

IE浏览器

   支持XDomainRequest( )构造函数 只能实现异步功能，没有state属性，只能通过onload事件判定响应是否有效。

  特点：

     不能请求和发送cookie

     不能访问头部信息

     只能修改头部的content-type字段

     只支持post和get请求

   实现代码

var xdr = new XDomainRequest();xdr.onload = function(){    console.log(xdr.responseText);}xdr.open('get', url地址);......xdr.send(null);

 

其他浏览器支持

    XHTMLRequest（）创建对象

    可以访问state和stateText属性，还支持同步请求

 特点：

     不能使用setRequeatheader()

     设置自定义头部

    不能发送和接受cookie

    调用getAllResponseHeader()方法总会返回空字符串

 实现代码

var xhr =  new XMLHttpRequest();xhr.onreadystatechange = function () {    if(xhr.readyState == 4){        if(xhr.status >= 200 && xhr.status < 304 || xhr.status == 304){            console.log(xhr.responseText);        }    }}xhr.open('get', url地址);......xhr.send(null);

 

跨浏览器的CORS

检查XHR是否存在withCredentials属性，再结合检测XDomainRequest对象是否存在

  实现代码

function createCORS(method, url){    var xhr = new XMLHttpRequest();    if('withCredentials' in xhr){        xhr.open(method, url, true);    }else if(typeof XDomainRequest != 'undefined'){        var xhr = new XDomainRequest();        xhr.open(method, url);    }else{        xhr = null;    }    return xhr;}var request = createCORS('get', url地址);if(request){    request.onload = function(){        ......    };    request.send();}

2.JSONP

由回调函数和数据组成，当响应到来时调用。 回调函数的名字一般在请求中指定，数据就是传入回调函数中的JSON数据 JSONP通过动态

实现代码

function handleResponse(response){    console.log('The responsed data is: '+response.data);}var script = document.createElement('script');script.src = 'http://www.baidu.com/json/?callback=handleResponse';document.body.insertBefore(script, document.body.firstChild);

3.动态创建script                                

元素使用，使用时可以为src属性指定一个跨域URL。

实现代码

function loadScript(url, func) {  var head = document.head || document.getElementByTagName('head')[0];  var script = document.createElement('script');  script.src = url;  script.onload = script.onreadystatechange = function(){    if(!this.readyState || this.readyState=='loaded' || this.readyState=='complete'){      func();      script.onload = script.onreadystatechange = null;    }  };  head.insertBefore(script, 0);}window.baidu = {  sug: function(data){    console.log(data);  }}loadScript('http://suggestion.baidu.com/su?wd=w',function(){console.log('loaded')});