廖雪峰老师JS教程读书笔记(二):原生AJAX与跨域总结

廖老师网站原文

原生AJAX请求

//创建一个XMLHttpRequest对象
var request=new XMLHttpRequest();

//readystate发生change时会执行的回调函数
request.onreadystatechange=function(){
    if(request.readystate===4){  //请求完成
        if(request.status===200){
            //请求成功要执行的代码,通过responseText取请求回来的数据
        }else{
            //请求失败要执行的代码,通过status判断失败原因
        }
    }else{
        //还在请求中 
    }
}

//规定请求的配置,method为请求方法,url为请求路径,async为是否异步,不带此参数默认为true,
request.open(method,url,async);

//此时真正发送请求,data为发送的附带数据,没有要发的可以发送null,浏览器兼容好像会好一些。
request.send(data || null)

/*
//如果不支持XMLHttpRequest对象,则需要创建ActiveXObject对象
var request;
if(window.XMLHttpRequest){
    request=new XMLHttpRequest();
}else{
    request=new AcitveXObject(Microsoft XMLHTTP);
}
*/

跨域

同源政策:

相同域名,相同协议,相同端口(有的浏览器不要)。
要请求的url不符合同源政策,则需要跨域才能访问

跨域方法:

1. Flash插件

通过Flash插件发送请求,绕过浏览器安全限制,必须安装Flash并和Flash交互,而且现在Flash用的越来越少了。


2. 代理服务器

'/proxy?url=http://www.sina.com.cn'
在同源域名下架设代理服务器转发请求,js发送请求到这个代理服务器,代理服务器再把结果返回,麻烦在于需要在服务器端额外处理


3. JSONP

利用浏览器可以引用外域的JavaScript资源这个特性,在script标签中发送请求,接受回调,这种方法只能发送GET请求,且要求返回JavaScript,通常以函数调用的方式返回
具体实现:

//在页面中先写好回调函数
var callbackFuncName=function(data){
    //要执行的代码
}

var test=document.createElement('script');
test.src=url;   //url为要请求的地址,这里要注意!!!url最后一般带有callback字段,不一定是这个名字,这个是由服务器端代码决定的。总之这个字段的值为页面中定义的回调函数的函数名。之前所说的一般会返回函数调用,就是服务器端获取到callback字段后经过处理最后发送回来callback调用。

document.getElmentsByTagName('head')[0].appendChild(test);  //动态添加发送请求的script结点到head标签的最后,接受到返回为函数调用则立即调用callback

4. CORS

CORS全称Cross-Origin Resource Sharing,是HTML5规范定义的如何跨域访问资源。
Origin为当前发送请求的页面所在的域,当它向外域发送请求时,外域发回的响应头中有一个Access-Control-Allow-Origin字段,如果这个字段有请求页面的Origin,或者为*(所有页面都能请求),那么请求成功,否则失败。
关键在于对方服务器是否愿意给你设置正确的Access-Control-Allow-Origin字段

简单请求:上面这种请求就是简单请求,简单请求包括GET、HEAD和POST(POST的Content-Type类型
仅限application/x-www-form-urlencoded、multipart/form-data和text/plain),并且不能出现任何自定义头(例如,X-Custom: 12345),通常能满足90%的需求。

复杂请求:对于PUT、DELETE以及其他类型如application/json的POST请求,在发送AJAX请求之前,浏览器会先发送一个OPTIONS请求(称为preflighted请求)到这个URL上,询问目标服务器是否接受:

OPTIONS /path/to/resource HTTP/1.1
Host: bar.com
Origin: http://my.com
Access-Control-Request-Method: POST

服务器必须响应并明确指出允许的Method:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://my.com
Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS
Access-Control-Max-Age: 86400

浏览器确认服务器响应的Access-Control-Allow-Methods头确实包含将要发送的AJAX请求的Method,才会继续发送AJAX,否则,抛出一个错误。

由于以POST、PUT方式传送JSON格式的数据在REST中很常见,所以要跨域正确处理POST和PUT请求,服务器端必须正确响应OPTIONS请求。

猜你喜欢

转载自blog.csdn.net/u013836242/article/details/77838304