jsonp只能是GET请求不能是POST请求(说不出的痛,我一直记错了)
优点
- 不受同源策略限制
- 兼容性好
同源策略:这是浏览器的一个安全功能,指的是:协议,域名和端口号(设置dataType:jsonp)
缺点
- 只支持GET不支持POST,
- 只支持http请求,不能解决不同域的两个页面之间如何进行j调用问题
原理
动态添加一个script标签,向服务器发送请求,通过callback参数指定回调函数名字,然后调用此回调,以json的数据格式作为参数传递,完成回调
jQuery 实现jsonp
$.ajax({
url:'xxxxx',
dataType:'jsonp',
jsonp:'callback',
success: function(data){
xxxxx
}
})
js实现
function loadScript(url,func){
var head = document.head||document.getElementByTagName('head')[0];
var script = document.createElement('script');
script.src = url;
script.onload = script.onreadystatechange = function(){
if(!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete'){
func();
script.onload = script.onreadystatechange = null;
}
}
head.insertBefore(script,null);
}
window.baidu = {
sug: function(data){
console.log(data);
}
}
loadScript('[http://suggestion.baidu.com/su?wd](http://suggestion.baidu.com/su?wd)=w',
function(){console.log('loaded')});
其他跨域方法
-
通过修改document.domain来跨子域
-
使用window.name来进行跨域
-
window.postMessage
-
CORS(使用自定义的HTTP头部与服务器进行沟通,从而决定请求活响应是应该成功还是失败)
function createCORS(method,url){
var xhr = new XMLHttpRequest();
if('withCredentials' in xhr){
xhr.open(method, url, true);
}else if(typeof XDomainRequest != 'undefined'){
var xhr = new XDomainRequest();
xhr.open(method, url);
}else{
xhr = null;
}
return xhr;
}
var request =createCORS('get','xxxxxx');
if(request){
request.onload = function(){
......
};
request.send();
}
- websocket(是一种浏览器的API,它的目标是在一个单独的持久连接上提供全双工,双向通信)
原理:在js创建websockets之后,会有一个HTTP请求发送到浏览器,取得服务器相应之后,建立的连接会使用HTTP升级从HTTP协议交换为websocketst协议
var scoket = new WebScokt('ws://xxxxxx');
scoker.send('xxxx');
scoket.onmessage = function(event){
xxxxx
}
网友评论