全部 android asp.net C/C++ cshap IOS Java javascript nodejs perl php python ruby web容器 其他 前端 数据库 第三方平台 混合式APP 网络 系统 默认分类

Ajax_05之跨域请求

0 65

1、跨域请求: Cross Domain Request:跨域名的HTTP请求,浏览器从某个域名下的资源访问了另一域名下的另一资源(协议、域名或是端口号不同); ①浏览器允许跨域请求的情形:                   响应:     h、单向跨域之server proxy:   原理:在数据提供方没有提供对JSONP或window.name协议的支持,也没有对其它域开放访问权限时,可使用server proxy(服务器代理)方式抓取数据,跨域的HTTP请求在服务器端进行,客户端不用产生跨域的Ajax请求;   实现:在服务器配置一个代理,将Ajax请求绑定到这个代理路径下,然后由这个代理发送Http请求去访问文件;   限制:该跨域方式不需要和目标资源签订协议,带有侵略性,另需对该代理实施一定程度的保护,如限制他人使用或使用频率;  i、双向跨域之document.domain:   原理:同域策略认为域和子域属于不同的域,修改document的domain属性为同一host,可以在域和子域或不同子域间通信;   实现:将不同子域document的domain属性修改为同一host,浏览器会认为它们处于同一域下,此时即可互相调用对方的method来通信;   代码:   请求:   document.domain = 'a.com';   var ifr = document.createElement('iframe');   ifr.src = 'http://www.script.a.com/b.html';   ifr.display = none;   document.body.appendChild(ifr);   ifr.onload = function(){       var doc = ifr.contentDocument || ifr.contentWindow.document;       //在这里操作doc,也就是b.html       ifr.onload = null;   };   响应:   document.domain = 'a.com';  j、双向跨域之FIM:   原理:Fragment Identiter Messaging,父窗口与iframe可以相互读写URL,URL中“#”号及其后面的字符被称为frag,它一般用于浏览器锚点定位,HTTP请求中不会携带frag,每个window通过改变其他window的location来发送消息,并通过监听自己的URL变化来接收消息;   限制:这种方式通信会产生不必要的浏览器历史记录,且有些浏览器不支持onhashchange事件,需要用轮询来获知URL的改变,另URL在浏览器下有长度限制,制约了每次传送的数据量;  k、双向跨域之Flash LocalConnection:   原理:Flash API中有LocalConnection类,该类允许两个SWF之间进行通信,SWF可以播放在独立的Flash Player或者AIR中,也可以嵌套在HTML页面或者PDF中;   实现:在不同域的HTML页面各自嵌套一个SWF来相互传递数据;   限制:数据量有40kb的大小限制,且过程复杂,实用性不强;  l、双向跨域之window.postMessage:   HTML5定义的新方法,可跨window通信,在较旧浏览器中无法使用;   代码:   请求:         响应:     m、双向跨域之Cross Frame:   原理:FIM的变种,借助空白iframe,不会产生多余浏览器历史记录,也不需要轮询URL的改变;域中pageA和空白代理页proxyA,另一个域pageB和其空白代理页proxyB,pageA向pageB发送消息时页面创建隐藏的iframe,iframe的src指向proxyB,并把message作为URL frag;pageB和proxyB是同域,iframe加载完成后,pageB可以获得iframe的URL,解析出message,并移除iframe;反向同理;   限制:Opera无法使用,但可使用window.postMessage;  n、动态创建script:   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, 0);   }   window.baidu = {     sug: function(data){       console.log(data);     }   }   loadScript('http://suggestion.baidu.com/su?wd=w',function(){console.log('loaded')});   //我们请求的内容在哪里?   //我们可以在chorme调试面板的source中看到script引入的内容  o、Web Socket:   原理:web sockets是一种浏览器的API,它的目标是在一个单独的持久连接上提供全双工、双向通信,在JS创建了web socket之后,会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后,建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议;   代码:   var socket = new WebSockt('ws://www.baidu.com');//http->ws; https->wss   socket.send('hello WebSockt');   socket.onmessage = function(event){       var data = event.data;   }   限制:只有在支持web socket协议的服务器上才能正常工作;2、jQuery中发起JSONP请求的方法: ①$.getJSON两种方法:  a、使用XHR接收服务器端返回的JSON响应:   $.getJSON('x.php',function(obj){});  b、使用script标签执行服务器返回的script响应——JSONP:   $.getJSON('http://其他域名/x.php?callback=?',doResponse); ②$.ajax的两种方法:  a、使用XHR接收服务器端返回的响应:   $.ajax({});  b、使用script标签执行服务器返回的script响应——JSONP:   $.ajax({    type:'GET',    url:'x.php',    data:{k:v},    dataType:'jsonp',//设定服务器端返回JSONP数据    success:fn   });

* 本篇内容部分自网上整理而来,请原作者勿怪!

热忱回答0

要回复文章请先登录注册