Javascript jsonp 和ajax跨域请求

最新推荐文章于 2022-04-16 16:31:02 发布

原创最新推荐文章于 2022-04-16 16:31:02 发布 · 223 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript jsonp跨域请求 #javascript ajax 跨域

jsonp跨域请求专栏收录该内容

1 篇文章

订阅专栏

跨域是指在脚本代码中向非同源域发送HTTP请求，这是跨站资源请求，会受到同源策略限制而失败。

JSONP(JSON with Padding)方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP实现跨域2</title>
</head>
<body>
    <div id="mydiv">
        <button id="btn">点击</button>
    </div>
</body>
<script type="text/javascript">
    function handle(response){
            console.log(response);
    }
</script>
<script type="text/javascript">
    window.onload = function() {
    var oBtn = document.getElementById('btn');
    oBtn.onclick = function() {     
        var script = document.createElement("script");
        script.src = "https://api.dub.com/v2/book/search?q=javascript&count=1&callback=handle";
//var url ="/makeAppointment?name="+encodeURI(name)+"&tel="+tel+"&callback=?";
        document.body.insertBefore(script, document.body.firstChild);   
    };
};
</script>
</html>

Jquery 方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery实现JSONP</title>
</head>
<body>
    <div id="mydiv">
        <button id="btn">点击</button>
    </div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){

            $.ajax({
                async : true,
                url : "https://api.duban.com/v2/book/search",
                type : "GET",
                dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
                jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
                jsonpCallback: 'handle', //设置回调函数名
                data : {
                    q : "javascript", 
                    count : 1
                }, 
                success: function(response, status, xhr){
                    console.log('状态为：' + status + ',状态是：' + xhr.statusText);
                    console.log(response);
                }
            });
        });
    });
</script>
</html>

CORS（cross-origin-resource-sharing）方法：

CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。

可能在IE10 以下不支持，想要兼容 IE8 IE9，需要使用 XDomainRequest 代替 XMLHttpRequests

function getHello() {
var xhr = new XMLHttpRequest();
xhr.open("post", "http://b.example.com/Test.ashx", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");　
　　 
// 声明请求源
xhr.setRequestHeader("Origin", "http://a.example.com");

xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var responseText = xhr.responseText;
console.info(responseText);
}
}
xhr.send();
}

WebSocket

Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案

原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

<p>user input：<input type="text"></p>
<script src="./socket.io.js"></script>
<script>
var socket = io('http://www.domain2.com:8080');
// 连接成功处理
socket.on('connect', function() {
    // 监听服务端消息
    socket.on('message', function(msg) {
        console.log('data from server: ---> ' + msg); 
    });
 // 监听服务端关闭
    socket.on('disconnect', function() { 
        console.log('Server socket has closed.'); 
    });
});
document.getElementsByTagName('input')[0].onblur = function() {
    socket.send(this.value);
};
</script>

postMessage

//发送信息页面 http://localhost:63342/index.html

<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>跨域请求</title>   
</head>  
<body>  
    <iframe src="http://localhost:3000/users/reg" id="frm"></iframe>  
    <input type="button" value="OK" onclick="run()">  
</body>  
</html>  
<script>  
   function  run(){  
        var frm=document.getElementById("frm");  
        frm.contentWindow.postMessage("跨域请求信息","http://localhost:3000");  
   }  
</script>

//接收信息页面 http://localhost:3000/message.html
 window.addEventListener("message",function(e){ //通过监听message事件，可以监听对方发送的消息。
  console.log(e.data);  
},false);