ajax与跨域

Posted 2022-11-28 做枚温婉的妹纸吧哈哈

原生的ajax实现方式

是通过XMLHttpRequest对象来实现的，该对象包含了一些方法来进行请求的发送、监听请求过程中的状态、接收响应内容等：

var xhr = new XMLHttpRequest();
xhr.onReadyStateChange = function() 
    if (xhr.readyState === 4)  //不使用this更靠谱
        if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304)
        alert(xhr.responseText);
        
;
xhr.open('get', 'url', true);
xhr.setRequestHeader('name', 'value');
xhr.send(null); //不发送任何内容必须使用null

readyState 共有5种状态，在此一一不作说明。其中4 表示已接收到所有的响应内容。readyStateChange 事件绑定需要在open 方法调用之前。setRequestHeader 方法需要在open 和send 之间调用。

此外，如果需要在url上加参数，必须使用encodeURIComponent 来对参数的name 和value 进行编码。encodeURIComponent只能使用UTF-8编码格式.

插播一下URL编码：

RFC 1738规定：

“只有字母和数字[0-9a-zA-Z]、一些特殊符号”$-_.+!*’(),”[不包括双引号]、以及某些保留字，才可以不经过编码直接用于URL。”

而不同的操作系统、不同的浏览器、不同的网页字符集，将导致完全不同的编码结果。并且URL本身和后面追加的查询参数的编码方式很可能不同。这样会比较混乱，因此可以提前使用JS对URL进行编码，使得统一，而不直接通过浏览器。

参考：
关于URL编码
url的三个js编码函数escape(),encodeURI(),encodeURIComponent()简介

跨域

当异步请求地址的协议、主域名、子域名（例如www）、端口号中有任何一个同源页面不同，则是一次跨域请求。

跨域资源共享

CORS是W3C的一个工作草案。是通过头部来进行浏览器和服务器间的沟通。
通过设置自定义头部Origin，该头部内容为请求源的地址和端口号。服务器如果接收请求，则会在Access-Control-Allow-Origin 相应头部中返回与Origin 相同内容或者* （公共资源）。如果不接受，则不返回该头部或者头部不匹配。浏览器就会驳回该请求。

现代浏览器已经通过原生的xhr对象实现了跨域请求（IE10+）。使用方式和同源的没什么区别，当浏览器发现ajax进行跨域后，会自动添加一些请求头部。主要需要服务器实现CORS接口。
但跨域xhr对象也有一些使用上的限制。
同时，跨域请求分为简单请求和非简单请求，当为非简单请求时，预先发送一个option 类型的请求进行预检（preflight），服务器通过后，浏览器才会发送真正的请求（和简单请求一样）。

参考：
跨域资源共享 CORS 详解

JSONP

跨域资源共享方式比JSONP更强大，前者支持所有请求方式，而后者只支持GET 。不过JSONP对于那些不支持CORS的浏览器来说是实现跨域的一种方式。
JSONP的实现原理是src 是不受同源策略限制的，当script标签出现在文档树种时，会请求一段JS代码，获取到该代码后立即执行。
需要前端和服务端之间约定好callback的字段名（即下例中的callbackName），方便后端取到回调函数，并用将数据作为参数传递给回调函数然后返回这个回调函数，页面在获取到这个回调函数后会立即执行。
前端需要做的：

//1. 声明一个回调函数
function callback(data) 
    //deal with data


//2. 动态生成一个script标签并插入文档树
var script = document.createElement('script');
script.src = 'http://write.blog.csdn.net?callbackName=callback';
document.getElementsByTagName("head")[0].appendChild(script);

还有一些其他跨域方式：
前端跨域的整理

访问未声明的变量会报错，但访问不存在的对象的属性不会报错，返回undefined。