解决跨域请求的几种常用方式

总结:    jsonp / iframe / window.name / cors / img.src

jsonp                                 


利用在页面中创建script节点的方法向不同域提交http请求的方法称为jsonp,首先在客户端注册一个callback,然后把callback的名字传给服务器,此时,服务器先生成json数据,然后以js语法的方式,生成一个function,function的名字就是传递上来的参数jsonp,最后将json数据直接以入参的方式,放置到function中,生成了一段js语法的文档,返回给客户端,客户端浏览器,解析script标签,并执行返回的js文档,此时数据作为参数,传入到了客户端预定义好的callback函数里。

var url = "http://localhost:8080/html5/jsonp_data.js";

// 创建script标签,设置其属性

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

script.setAttribute('src', url);

// 把script标签加入head,此时调用开始

document.getElementsByTagName('head')[0].appendChild(script);

function callbackFun(data)

{

console.log(data.age);

console.log(data.name);

}

服务器数据:callbackFun({"age":100,"name":"yuanfang"})

优点:兼容性更好,比XML轻了很多,可读性比较好

缺点:只支持get请求而不支持post请求等其他类型的http请求。只支持跨域http请求这种情况,不能解决不同域两个页面之间如何进行js调用的问题。

用法:在ajax请求中,设置dataType参数的值为jsonp

iframe                                       


iframe标签是框架的一种形式,ifram一般用来包含别的页面,作用就是让页面变得美观。iframe不推荐大量使用,但是某时候还是必要的,比如模拟窗口,或者html在线编辑器等

用法:和普通的标签相同

属性:

align:left、right、top、middle、bottom。用于规定如何根据周围的元素来对齐此框架。不赞成使用。请使用样式代替。

frameborder:1、0。用于规定是否显示框架周围的边框。

height:pixels、%。用于规定iframe的高度。

longdesc:URL。规定一个页面,该页面包含了有关iframe的较长描述。

marginheight:pixels。定义iframe的顶部和底部的边距。

marginwidth:pixels。定义iframe的左侧和右侧的边距。

name:frame_name。规定iframe的名称。

scrolling:yes、no、auto。规定是否在iframe中显示滚动条。

src:URL。规定在iframe中显示的文档的URL。

width:pixels。%。定义iframe的宽度。

优点:隔离上下文网页,便于更改,模块分离

缺点:影响网页加载速度

window.name


window对象有个name属性,该属性有个特征,在一个窗口的生命周期内,窗口在载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。

用法:

在一个页面中设置window.name=“”;在另一个页面就可以获取window.name的值

window对象有个name属性,该属性有个特征,在一个窗口的生命周期内,窗口在载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。

cors


跨域资源共享,是一种网络浏览器的技术规范,他为web服务器定义了一种方式,允许网页从不同的域访问其资源,系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求,有更大的灵活性,也更加安全。

优点:

cors支持所有类型的http请求

可以使用普通的XMLHTTPRequest发起请求和获得数据,比jsonp有更好的错误处理

jsonp只要被老的浏览器支持,它们不支持cors,但是大多数现代浏览器都已经支持了cors。

用法:

注意要配置服务器端对于cors的支持,只要是通过设置Access-Control-Allow-Origion来进行的,http://www.cnblogs.com/yuzhongwusan/p/3677955.html

function createCORSRequest(method, url) {

var xhr = new XMLHttpRequest();

if ("withCredentials" in xhr) {

// 此时即支持CORS的情况

// 检查XMLHttpRequest对象是否有“withCredentials”属性

// “withCredentials”仅存在于XMLHTTPRequest2对象里

xhr.open(method, url, true);

} else if (typeof!= "undefined") {

// 否则检查是否支持XDomainRequest,IE8和IE9支持

// XDomainRequest仅存在于IE中,是IE用于支持CORS请求的方式

xhr = new XDomainRequest();

xhr.open(method, url);

} else {

// 否则,浏览器不支持CORS

xhr = null;

}

return xhr;

}

var xhr = createCORSRequest('GET', url);

if (!xhr) {

throw new Error('CORS not supported');

}

img.src


所有具有src属性的html标签都是可以跨域的,包括img和script,img在更改src属性时就会发送请求,而script只有在添加到DOM树之后才会发送http请求

缺点:需要创建一个DOM对象,只能用于GET方法,只适合统计等用途,不能用于触发发表评论,删除文件等操作。

优点:方便收集信息,不阻塞页面加载,出错也不影响页面显示。

你可能感兴趣的:(解决跨域请求的几种常用方式)