ajax及跨域的几种办法

之前一直用的是jquery的ajax、getJSON、和post，还是没有深入理解ajax

ajax实例

具体的说明，请参考《javasicript 高级程序设计第三版》P572页

function createXHR(){
    /*判断是否支持XMLHttpRequest*/
    if(typeof XMLHttpRequest != "undefined"){
        return new XMLHttpRequest();
    }else if(typeof ActiveXObject != "undefined"){
        if(typeof arguments.callee.activeXString != "string") {
            var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
                i, len;
            for (i = 0, len = versions.length; i < len; i++) {
                try {
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                } catch (ex) {
                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    }else{
        throw new Error("No XHR object available");
    }
}

function newXHR(){
    var xhr = new createXHR();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                alert(xhr.responseText);
            } else{
                alert("Request was unsuccessful: " + xhr.status);
            }
        }
    }
    /*第三个选项表示是同步还是异步，ps:现在是同源访问index.php*/
    xhr.open("get","index.php",true);
    xhr.send(null);
}

跨资源共享

同源即：相同的域，相同的端口，相同的协议，其他的都属于跨域
基本大的方法CORS
核心思想，使用自定义的http头部让浏览器与服务器进行沟通

IE对CROS实现

引入XDR（XDomainRequest）实现吧安全可靠的跨域通信
XDR与XHR的不同：

cookie不会随请求发送
只能设置请求头中的Content-Type字段
不能访问响应头部的信息
只支持GET和POST请求

var xdr = new XDomainRequest();
xdr.onload = function(){
```
alert(xdr.reponseText);
```
};
/失败因素很多，需要捕获错误/
xdr.onerror = function(){
```
alert("An error occurred");
```
}
xdr.open(“get”,”http://www.somewhere-else.com/page/“)
xdr.send(null);

对于发送post请求需要加入

xdr.open("post","http://www.somewhere-else.com/page/");
xdr.contentType = "appplication/x-www-form-urlencoded"
xdr.send("name1=value&name2=value2")

其他浏览器对CROS

直接在xhr中写入绝对url

xdr.open("get","http://www.somewhere-else.com/page/")

限制：

不能使用setRequestHeader()
不能发送和接收cookie
getAllResponseHeaders()方法总会返回空字符串

Preflighted Requests

使用透明服务器验证机制支持开发人员使用自定义的头部，GET和POST之外的方法

带凭据的请求

将withCredentials属性设为true

跨浏览器的CROS

先检测XHR是否支持CORS的最简单方式，然后检查是否存在withCredentials属性，再结合检测XDomainRequest对象是否存在

function createCORSRequest(method, url){
    var xhr = new XMLHttpRequest();
    if("withCredentials" in xhr){
        xhr.open(method,url,true)
    } else if(typeof XDomainRequest != "undefined"){
        xhr = new XDomainRequest();
        xhr.open(method,url)
    } else{
        xhr = null;
    }
    return xhr;
}
var request = createCORSRequest("get","http://www.somewhere-else.com/page/");
if(request){
    request.onload = function(){
        //对 request.responseText处理
    }
    request.send();
}

其他跨域技术

图像ping

只能发送Get请求，无法访问响应文本，一般用于统计页面点击次数和动态广告曝光次数

var image = new Image();
image.onload = iamge.onerror = function(){
    alert("done");
};
img.src = "http://···"

JSONP

支持双向通信，无法保证安全可靠，无法确定请求是否失败

http://···/?callback=handleResponse
function handleResponse(res){

}