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. 使用Tensorflow操作MNIST数据

    MNIST是一个非常有名的手写体数字识别数据集,在很多资料中,这个数据集都会被用作深度学习的入门样例.而TensorFlow的封装让使用MNIST数据集变得更加方便.MNIST数据集是NIST数据集的 ...

  2. Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue ...

  3. 基于Dubbo框架构建分布式服务（集群容错&负载均衡）

    Dubbo是Alibaba开源的分布式服务框架,我们可以非常容易地通过Dubbo来构建分布式服务,并根据自己实际业务应用场景来选择合适的集群容错模式,这个对于很多应用都是迫切希望的,只需要通过简单的配 ...

  4. Redis-Sentinel 数据源配置

    1.redis配置文件 : redis.properties # Redis settings #sentinel_node_1 redis.sentinel1.host=192.168.0.1 re ...

  5. 20165304 2017-2018-2《Java程序设计》学习总结

    20165304 2017-2018-2<Java程序设计>学习总结 一.每周作业及实验报告链接汇总 1.我期望的师生关系 2.20165304学习基础和C语言基础调查 3.linux系统 ...

  6. 生活实遇记-Kindle好久没用，屏幕一直处于电池状态，怎么解决？

    2018-01-02 实遇记-Kindle好久没用,屏幕一直处于电池状态,怎么解决? 今天我翻腾出自己的kindle,好久没用了,屏幕一直是一个电池状态,充电头+线充了2个钟头,按电源键木有反应,也是 ...

  7. ArcGIS自定义脚本-通过txt/excel/dbf/table生成多边形要素类

    ArcGIS自定义脚本-通过txt/excel/dbf/table生成多边形要素类 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:读取文本文件,常见多边形要素 ...

  8. Could not find a package,configuration file provided by "G2O" ,G2OConfig.cmake,g2o-config.cmake

    因为项目需要使用到g2o,所以自己从git上面clone下来, git clone https://github.com/RainerKuemmerle/g2o.git 然后: cd g2o mkdi ...

  9. 1、detail页面 /items/detail/:id

    <template> <div class="item_detail"> <van-swipe :autoplay="3000" ...

  10. vue初体验

    作为一个前端的小菜鸟,在平时的开发与学习中,除了要深入了解javascript 及 css 的各种特性,熟悉一门框架也是必不可少的.vue以其小巧,轻便,学习平滑等各种特性深受欢迎. 这里总结一下小菜 ...