ajax与跨域

前端之家收集整理的这篇文章主要介绍了ajax与跨域前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

原生的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 方法需要在opensend 之间调用

此外,如果需要在url上加参数,必须使用encodeURIComponent 来对参数的namevalue 进行编码。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

原文链接:https://www.f2er.com/ajax/161447.html

猜你在找的Ajax相关文章