ajax 跨站返回值,跨域AJAX解决方案

由于浏览器存在同源策略机制，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。

同源策略的判定规则：

如果两个页面拥有相同的协议，端口，和主机，那么这两个页面就属于同一个源；

图示例：

同源策略判定.png

特别的：由于同源策略是浏览器的限制，所以请求的发送和响应是可以进行，只不过浏览器不接受罢了。

浏览器同源策略并不是对所有的请求均制约：

制约： XmlHttpRequest

无效： img、iframe、script等具有src属性的标签

两种实现跨域请求的方式，JSONP和CORS

对比：

Jsonp只支持 GET 请求，CORS支持所有类型的HTTP请求。

Jsonp 的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

(1) JSON-P实现跨域请求

利用script标签的src属性(浏览器允许script标签跨域)。

基本原理：

浏览器创建script标签，并利用script标签的src属性发送跨域请求，获取服务器的返回值在标签内。

服务器返回函数调用语句(myfunc(args);)，并将需要返回的值(args)作为函数参数一并返回。

浏览器执行服务器返回的调用函数的语句(myfunc(args)),对返回值进行操作。

浏览器删除第一步创建的script标签。

代码实例：

JS实现：

//创建script标签跨域请求

function getJsonp(){

var tag = document.createElement('script');

tag.src = "http://tkq2.com:8000/test";

document.head.appendChild(tag);

document.head.removeChild(tag);

}

//根据返回函数myfunc([1,2,3]);执行定义的myfunc函数

function myfunc(list) {

console.log(list);

}

Jquery实现：

//创建script标签跨域请求

function getJsonp(){

$.ajax({

url: "http://tkq2.com:8000/test",

dataType: 'jsonp',

jsonpCallback: 'myfunc'

})

}

其中jsonpCallback，自定义了回调函数名，默认为jQuery自动生成的随机函数名。如果不写回调函数名，默认执行与服务器返回的函数名相同的函数。

//根据返回函数myfunc([1,2,3]);执行定义的myfunc函数

function myfunc(list) {

console.log(list);

}

以上两种写法中，回调函数被服务端写死了，请求端必须定义和服务器端相同函数名才行。但作为服务端应该有更好的兼容性，请求端自行决定回调函数名字。

JS实现：

//创建script标签跨域请求，并根据返回函数myfunc([1,2,3]);执行定义的myfunc函数

function GetJsonp(){

var tag = document.createElement('script');

//自定义回调函数名，jsonpcallback=myfunc字段供服务端读取。

tag.src = "http://tkq2.com:8000/test?jsonpcallback=myfunc";

document.head.appendChild(tag);

document.head.removeChild(tag);

}

function myfunc(list) {

console.log(list);

}

Jquery实现

//创建script标签跨域请求，并根据返回函数myfunc([1,2,3]);执行定义的myfunc函数

function GetJsonp(){

$.ajax({

url: "http://tkq2.com:8000/test",

dataType: 'jsonp',

jsonp:'jsonpcallback', //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)

jsonpCallback:'myfunc' //自定义了回调函数名，默认为jQuery自动生成的随机函数名。如果不写回调函数名，默认执行与服务器返回的函数名相同的函数。

})

}

//回调函数

function myfunc(list) {

console.log(list);

}

(2) CORS跨域资源共享

随着技术的发展，现在的浏览器可以支持主动设置从而允许跨域请求，即：跨域资源共享(CORS，Cross-Origin Resource Sharing)，其本质是设置响应头，使得浏览器允许跨域请求。

这种实现方式：请求端和普通的AJAX方法相同，但服务器端需要做相应的配置。

跨域传输cookie：

在跨域请求中，默认情况下，HTTP Authentication信息，Cookie头以及用户的SSL证书无论在预检请求中或是在实际请求都是不会被发送。

如果想要发送：

浏览器端：XMLHttpRequest的 withCredentials 为 true (如果后台需要传cookie，则设置，否则，不用设置)

服务器端：Access-Control-Allow-Credentials 为 true

$.ajax({

url: ajaxUrlConfig.getAddOrder,

data: data,

type: 'POST',

xhrFields: {

withCredentials: true

},

dataType: 'json',

timeout: 300000

});