1.jsonp方法

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

主要实现功能：

1.参数拼装。

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

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

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

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

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

/*author:ls <841766635@qq.com>

* data:2016/03/20

*/  

function JSONP(url,config){

    var data = config.data || [];

    var paraArr=[],paraString='';//get请求的参数。

    var urlArr;

    var callbackName;//每个回调函数一个名字。按时间戳。

    var script,head;//要生成script标签。head标签。

    var supportLoad;//是否支持 onload。是针对IE的兼容处理。

    var onEvent;//onload或onreadystatechange事件。

    var timeout = config.timeout || 0;//超时功能。  

    for(var i in data){

        if(data.hasOwnProperty(i)){

            paraArr.push(encodeURIComponent(i) + "=" +encodeURIComponent(data[i]));

        }

    }  

    urlArr = url.split("?");//链接中原有的参数。

    if(urlArr.length>1){

        paraArr.push(urlArr[1]);

    }  

    callbackName = 'callback'+new Date().getTime();

    paraArr.push('callback='+callbackName);

    paraString = paraArr.join("&");

    url = urlArr[0] + "?"+ paraString;  

    script = document.createElement("script");

    script.loaded = false;//为了实现IE下的onerror做的处理。JSONP的回调函数总是在script的onload事件（IE为onreadystatechange）之前就被调用了。因此我们在正向回调执行之时，为script标签添加一个属性，然后待到onload发生时，再检测有没有这个属性就可以判定是否请求成功，没有成功当然就调用我们的error。  

    //将回调函数添加到全局。

    window[callbackName] = function(arg){

        var callback = config.callback;

        callback(arg);

        script.loaded = true;

    }  

    head = document.getElementsByTagName("head")[0];

    head.insertBefore(script, head.firstChild) //chrome下第二个参数不能为null

    script.src = url;  

    supportLoad = "onload" in script;

    onEvent = supportLoad ? "onload" : "onreadystatechange";  

    script[onEvent] = function(){  

        if(script.readyState && script.readyState !="loaded"){

            return;

        }

        if(script.readyState == 'loaded' && script.loaded == false){

            script.onerror();

            return;

        }

        //删除节点。

        (script.parentNode && script.parentNode.removeChild(script))&& (head.removeNode && head.removeNode(this));

        script = script[onEvent] = script.onerror = window[callbackName] = null;  

    }  

    script.onerror = function(){

        if(window[callbackName] == null){

            console.log("请求超时，请重试！");

        }

        config.error && config.error();//如果有专门的error方法的话，就调用。

        (script.parentNode && script.parentNode.removeChild(script))&& (head.removeNode && head.removeNode(this));

        script = script[onEvent] = script.onerror = window[callbackName] = null;

    }  

    if(timeout!= 0){

        setTimeout(function() {

            if(script && script.loaded == false){

                window[callbackName] = null;//超时，且未加载结束，注销函数

                script.onerror();

            }

        }, timeout);

    }  

}

　　

<!-- jsonp.html-->

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>jsonp测试</title>

    <script src="jsonp.js"></script>

</head>

<body>

    <script>

        function myerror(){

            alert('there must be something wrong!');

        }

        function getData (data){

            alert("服务器过来的数据是"+data);

        }

        var url = 'http://runningls.com/demos/2016/jsonp/jsonp.php';

        //调用函数。

        JSONP(url,{

            data:{

                id:1

            },

            callback:getData,

            error:myerror,

            timeout:10000

        });

    </script>

</body>

　　

<?php   

$callback = $_GET['callback'];

$id = $_GET['id'];  

if($id == 1){

    $res = 'this is 1';

}  

if($id == 2){

    $res = 'this is 2';

}  

$res = $callback."('$res')";  

echo $res;  

?>

　　2.hash方法

//利用hash，场景是当前页面A 通过iframe 和frame嵌入跨域的页面B

//在A中伪代码如下：

var B = document。个体ElementsByTagName('iframe');

B.src = B.src + '#' + 'data';

//在B 中的伪代码如下

window.onhashchange = function(){

var data = window.location.hash;

}

　　3.postMessage

//窗口A（http:A.com)向跨域的窗口B（http://B.com)发送信息

window.postMessage('data','http://B.com');//B窗口

//在窗口B中监听；

window.addEventListener('message',function(event){

    console.log(event.origin); //http://A.com

    console.log(event.source);//Bwindow

    console.log(event.data); //data

},false);

　　4.webSocket方法

//websocket 【 参考质料】（http://www.ruanyifeng.com/blog/2017/05/websocket.html)

var ws = new WebSocket('wss://echo.websocket.org');

ws.onpen = function(evt){

    console.log.('Connection open ...');

    ws.send('hello websockets')

}

ws.onmessage = function(evt){

  console.log('Received message：'+evt.data)

  ws.close()

}

ws.onclose = function (evt){

  console.log('connection closed.')

}

　　5.CORS方法

//CORS【 参考质料】（http://www.ruanyifeng.com/blog/2016/04/cors.html)
//url （必须），options（可选） 
fetch('/some/url',{
//配置属性才能跨域
 method:'get 
}).then(function(response){

}).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. 关于想通过ros的dstnat实现公网IP nat 公网IP的情况

    转发群里大神的“苏州-海豚在跳舞”的图 理论上客户机收到2.2.2.2过来的包应该直接丢弃.因为它并没有给2.2.2.2发过包.这里不知道如果在2.2.2.2上做 src-nat伪装成1.1.1.1回 ...

  2. Pascal语言（存档）

    数据类型 标准函数 运算符和表达式 输入语句 输出语句 if语句 case语句 for语句 while语句 repeat语句 函数与过程 形参与实参 全局变量与局部变量 数组 字符串 枚举 子界 集合 ...

  3. Python 爬58同城 城市租房信息

    爬取完会自动生成csv电子表格文件,含有房价.押付.链接等信息 环境 py2.7 pip install lxml pip install cssselect   #coding:utf-8 impo ...

  4. jdbc与TiDB数据库交互的过程

    以下是使用jdbc操作TiDB数据库,得到的交互过程和指令的说明 ==>代表发送给数据库的指令 // 加载驱动程序Class.forName(driver); // 连接数据库 Connecti ...

  5. C#中EXCEL表格的内容进度条实现

    public void ExportToExcel() { DataTable dt = getDataTable(); if (dt == null) { MessageBox.Show(" ...

  6. leetcode226

    /** * Definition for a binary tree node. * public class TreeNode { * public int val; * public TreeNo ...

  7. Selenium + Chrome headless 报ERROR:gpu_process_transport_factory.cc(1007)] Lost UI shared context 可忽略并配置不输出日志

    Selenium不再推荐使用PhantomJS,会报如下警告 UserWarning: Selenium support for PhantomJS has been deprecated, plea ...

  8. Spring Boot文档维护：集成Swagger2

    一.Swagger简介 在日常的工作中,我们往往需要给前端(WEB端.IOS.Android)或者第三方提供接口,这个时我们就需要提供一份详细的API说明文档.但维护一份详细的文档可不是一件简单的事情 ...

  9. MySql：SELECT 语句（二）排序 ORDER BY 的使用

    1.按单列排序 语句: SELECT col FROM  tablename ORDER  BY  col; ( 一般情况下, ORDER BY 子句中使用的列为选择的列,但也可以使用其他列) 2.按 ...

  10. jQuery获取URL中的参数

    //获取URL地址栏中的参数 function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + &quo ...