1.jsonp方法

转：https://blog.csdn.net/liusaint1992/article/details/50959571

主要实现功能：

1.参数拼装。

2.给每个回调函数唯一命名。

3.在回调成功或请求失败之后删除创建的javascript标签。 需要兼容IE。IE下onerror事件不兼容。这里有对它的模拟实现。在IE下加载失败也能get到。

4.超时功能。超时取消回调。执行error。

5.error事件。可执行自己传入的error事件。

代码封装，调用，以及后台代码如下

  1. /*author:ls <841766635@qq.com>
  2. * data:2016/03/20
  3. */  
  4.  
  5. function JSONP(url,config){
  6.     var data = config.data || [];
  7.     var paraArr=[],paraString='';//get请求的参数。
  8.     var urlArr;
  9.     var callbackName;//每个回调函数一个名字。按时间戳。
  10.     var script,head;//要生成script标签。head标签。
  11.     var supportLoad;//是否支持 onload。是针对IE的兼容处理。
  12.     var onEvent;//onload或onreadystatechange事件。
  13.     var timeout = config.timeout || 0;//超时功能。  
  14.  
  15.     for(var i in data){
  16.         if(data.hasOwnProperty(i)){
  17.             paraArr.push(encodeURIComponent(i) + "=" +encodeURIComponent(data[i]));
  18.         }
  19.     }  
  20.  
  21.     urlArr = url.split("?");//链接中原有的参数。
  22.     if(urlArr.length>1){
  23.         paraArr.push(urlArr[1]);
  24.     }  
  25.  
  26.     callbackName = 'callback'+new Date().getTime();
  27.     paraArr.push('callback='+callbackName);
  28.     paraString = paraArr.join("&");
  29.     url = urlArr[0] + "?"+ paraString;  
  30.  
  31.     script = document.createElement("script");
  32.     script.loaded = false;//为了实现IE下的onerror做的处理。JSONP的回调函数总是在script的onload事件（IE为onreadystatechange）之前就被调用了。因此我们在正向回调执行之时，为script标签添加一个属性，然后待到onload发生时，再检测有没有这个属性就可以判定是否请求成功，没有成功当然就调用我们的error。  
  33.  
  34.     //将回调函数添加到全局。
  35.     window[callbackName] = function(arg){
  36.         var callback = config.callback;
  37.         callback(arg);
  38.         script.loaded = true;
  39.     }  
  40.  
  41.     head = document.getElementsByTagName("head")[0];
  42.     head.insertBefore(script, head.firstChild) //chrome下第二个参数不能为null
  43.     script.src = url;  
  44.  
  45.     supportLoad = "onload" in script;
  46.     onEvent = supportLoad ? "onload" : "onreadystatechange";  
  47.  
  48.     script[onEvent] = function(){  
  49.  
  50.         if(script.readyState && script.readyState !="loaded"){
  51.             return;
  52.         }
  53.         if(script.readyState == 'loaded' && script.loaded == false){
  54.             script.onerror();
  55.             return;
  56.         }
  57.         //删除节点。
  58.         (script.parentNode && script.parentNode.removeChild(script))&& (head.removeNode && head.removeNode(this));
  59.         script = script[onEvent] = script.onerror = window[callbackName] = null;  
  60.  
  61.     }  
  62.  
  63.     script.onerror = function(){
  64.         if(window[callbackName] == null){
  65.             console.log("请求超时，请重试！");
  66.         }
  67.         config.error && config.error();//如果有专门的error方法的话，就调用。
  68.         (script.parentNode && script.parentNode.removeChild(script))&& (head.removeNode && head.removeNode(this));
  69.         script = script[onEvent] = script.onerror = window[callbackName] = null;
  70.     }  
  71.  
  72.     if(timeout!= 0){
  73.         setTimeout(function() {
  74.             if(script && script.loaded == false){
  75.                 window[callbackName] = null;//超时，且未加载结束，注销函数
  76.                 script.onerror();
  77.             }
  78.         }, timeout);
  79.     }  
  80.  
  81. }

　　

  1. <!-- jsonp.html-->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>jsonp测试</title>
  7.     <script src="jsonp.js"></script>
  8. </head>
  9. <body>
  10.     <script>
  11.         function myerror(){
  12.             alert('there must be something wrong!');
  13.         }
  14.         function getData (data){
  15.             alert("服务器过来的数据是"+data);
  16.         }
  17.         var url = 'http://runningls.com/demos/2016/jsonp/jsonp.php';
  18.         //调用函数。
  19.         JSONP(url,{
  20.             data:{
  21.                 id:1
  22.             },
  23.             callback:getData,
  24.             error:myerror,
  25.             timeout:10000
  26.         });
  27.     </script>
  28. </body>

　　

  1. <?php   
  2.  
  3. $callback = $_GET['callback'];
  4. $id = $_GET['id'];  
  5.  
  6. if($id == 1){
  7.     $res = 'this is 1';
  8. }  
  9.  
  10. if($id == 2){
  11.     $res = 'this is 2';
  12. }  
  13.  
  14. $res = $callback."('$res')";  
  15.  
  16. echo $res;  
  17.  
  18. ?>

　　2.hash方法

  1. //利用hash，场景是当前页面A 通过iframe 和frame嵌入跨域的页面B
  2. //在A中伪代码如下：
  3. var B = document。个体ElementsByTagName('iframe');
  4. B.src = B.src + '#' + 'data';
  5. //在B 中的伪代码如下
  6. window.onhashchange = function(){
  7. var data = window.location.hash;
  8. }

　　3.postMessage

  1. //窗口A（http:A.com)向跨域的窗口B（http://B.com)发送信息
  2. window.postMessage('data','http://B.com');//B窗口
  3. //在窗口B中监听；
  4. window.addEventListener('message',function(event){
  5.     console.log(event.origin); //http://A.com
  6.     console.log(event.source);//Bwindow
  7.     console.log(event.data); //data
  8. },false);

　　4.webSocket方法

  1. //websocket 【 参考质料】（http://www.ruanyifeng.com/blog/2017/05/websocket.html)
  2. var ws = new WebSocket('wss://echo.websocket.org');
  3. ws.onpen = function(evt){
  4.     console.log.('Connection open ...');
  5.     ws.send('hello websockets')
  6. }
  7. ws.onmessage = function(evt){
  8.   console.log('Received message：'+evt.data)
  9.   ws.close()
  10. }
  11. ws.onclose = function (evt){
  12.   console.log('connection closed.')
  13. }

　　5.CORS方法

  1. //CORS【 参考质料】（http://www.ruanyifeng.com/blog/2016/04/cors.html)
  1. //url （必须），options（可选） 
    fetch('/some/url',{
    //配置属性才能跨域
     method:'get 
    }).then(function(response){
  2.  
  3. }).catch(function(err){
     //出错了，等价于 then 的第二个参数 
    })；

　　

javascript 跨域 的几种方法的更多相关文章

  1. javascript跨域的几种方法

    以下的例子包含的文件均为为 http://www.a.com/a.html .http://www.a.com/c.html 与 http://www.b.com/b.html,要做的都是从a.htm ...

  2. 实现跨域的N种方法

    从域说起 域: 域是WIN2K网络系统的安全性边界.我们知道一个计算机网最基本的单元就是"域",这一点不是WIN2K所独有的,但活动目录可以贯穿一个或多个域.在独立的计算机上,域即 ...

  3. vue开发环境和生产环境里面解决跨域的几种方法

    什么是跨域   跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据.源指协议,端口,域名.只要这个3个中有一个不同就是跨域. 这里列举一个经典的列子: #协议跨域 http://a.baidu. ...

  4. AJAX实现跨域的三种方法

    由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只能访问本地的资源,而不能跨域访问. 比如说你的网站域名是aaa.com,想要通过AJAX请 ...

  5. Ajax跨域的几种方法以及每种方法的原理

    js中几种实用的跨域方法原理详解 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协 ...

  6. js常用代码示例及解决跨域的几种方法

    1.阻止默认行为 // 原生js document.getElementById('btn').addEventListener('click', function (event) { event = ...

  7. 后端跨域的N种方法

    简单来说,CORS是一种访问机制,英文全称是Cross-Origin Resource Sharing,即我们常说的跨域资源共享,通过在服务器端设置响应头,把发起跨域的原始域名添加到Access-Co ...

  8. spring boot 解决 跨域 的两种方法 -- 前后端分离

    1.前言 以前做项目 ,基本上是使用 MVC 模式 ,使得视图与模型绑定 ,前后端地址与端口都一样 , 但是现在有些需求 ,需要暴露给外网访问 ,那么这就出现了个跨域问题 ,与同源原则冲突, 造成访问 ...

  9. .net设置浏览器缓存和跨域的几种方法

    .自定义过滤器属性 public class NoCacheAttribute : FilterAttribute, IActionFilter { public void OnActionExecu ...

随机推荐

  1. C#操作wps、excel

    比如打开表格,如下 object openEt() { ]; Type wpsAppName; string progID = "KET.Application";// " ...

  2. 手机App调试(Android)

    方法一:  用Chrome+手机来调试.1) 在PC上安装谷歌的USB驱动:         http://developer.android.com/sdk/win-usb.html#top     ...

  3. 普通PC机支持内存128G,单条32G内存

    以前,不管是英特尔还是AMD的消费级平台支持内存容量大多都是64GB,这一现状被英特尔公司去年推出的第九代酷睿而改变.第九代酷睿最大支持128GB内存,虽然只是简单的提高了内存容量,对大多数电脑用户而 ...

  4. [java,2018-02-24] svn检出项目名称不正确

    ,今天从svn中检出项目时发现,检出项目的名称与实际的不相同,如下图: 这才想起来,当时创建项目时是随意起了个test的名称作为项目名,后来觉得能用,就在me中直接把项目名称改掉,提交到了svn.再从 ...

  5. MSB8013

    解决方案: 去掉勾选

  6. Java并发编程三个性质：原子性、可见性、有序性

      并发编程 并发程序要正确地执行,必须要保证其具备原子性.可见性以及有序性:只要有一个没有被保证,就有可能会导致程序运行不正确  线程不安全在编译.测试甚至上线使用时,并不一定能发现,因为受到当时的 ...

  7. C#操作IIS程序池及站点的创建配置(转)

      原文:http://www.cnblogs.com/wujy/archive/2013/02/28/2937667.html 最近在做一个WEB程序的安装包:对一些操作IIS进行一个简单的总结:主 ...

  8. 解决spring-security session超时 Ajax 请求没有重定向的问题

    开始时, 代码是这样的: $.ajax({ type : "POST", url : sSource, cache : false, dataType : "json&q ...

  9. 20165304《Java程序设计》第九周学习总结

    教材学习内容总结 URL类 URL类是java.net包中的一个重要的类,URL的实例封装着一个统一资源定位符,使用URL创建对象的应用程序称作客户端程序. 一个URL对象通常包含最基本的三部分信息: ...

  10. Mybatis运行错误：信息: SQLErrorCodes loaded: [DB2, Derby, H2, HDB, HSQL, Informix, MS-SQL, MySQL, Oracle, PostgreSQL, Sybase]

    Mybatis运行出现错误提示: 五月 23, 2018 12:07:22 上午 org.springframework.jdbc.support.SQLErrorCodesFactory <i ...