jsonp跨域请求

最新推荐文章于 2024-04-20 11:50:28 发布

我是一休哥

最新推荐文章于 2024-04-20 11:50:28 发布

阅读量1k

点赞数

分类专栏： javascript 文章标签： javascript jsonp

本文链接：https://blog.csdn.net/u011796274/article/details/23739029

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

先来创建web项目，包括一个jsp，内容如下：

<%
	out.write("this is content of JSP");
%>

我们可以用浏览器测试一下是否可以访问http://localhost:8080/TestJsonp/content.jsp

结果：this is content of JSP

现在要用ajax来进行访问（这里用原生的ajax，排除框架造成问题的可能）：

var xmlhttp;
if(window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
}else { //IE5 IE6
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open('GET', "http://localhost:8080/TestJsonp/content.jsp", true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
    document.getElementById('show').innerHTML = "ajax request:" + xmlhttp.responseText;
};

<div id="show"></div>

我们将这段代码放在同源环境下运行（http://localhost:8080），结果：ajax request:this is content of JSP

但我们这回不在同源环境下运行（上面javascript代码在http://localhost:63342运行），结果：Origin http://localhost:63342 is not allowed by Access-Control-Allow-Origin

上面的异常就是因为跨域访问造成的。浏览器访问地址的域名、协议、端口必须是相同的，否则就是跨域访问。浏览器出于安全的考虑，不允许javascript进行跨域访问，所以会给出警告。

那我们如何解决这个问题呢？哈哈，我们的主人公jsonp就要出场了。

1.json和jsonp

json（javascript object notation）大家都了解吧，是一种轻量级的数据交换格式，那jsonp是什么呢？

jsonp是json with padding的简称。它是一个非官方的协议，它允许在服务器端集成script tags返回至客户端，通过javascript callback的形式实现跨域访问。下面我们来看一个小例子。

2.跨域的简单原理

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="js/test.js"></script>
</head>
<body>
</body>
</html>

test.js的代码：

alert("success!");

这个结果大家都应该知道，跳出了“success!”这样的提示框。那我们换一种访问方式：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://localhost:8080/TestJsonp/test.js"></script>
</head>
<body>
</body>
</html>

我们访问http://localhost:8080上的test.js文件，同样跳出了"success!"的提示框。到这里大家应该明白了跨域访问的原理了：

<script>标签的src属性是可以进行跨域访问的，所以它可以获取任何服务器上的脚本并执行。

3.jsonp的实现形式

下面就来说说怎样用javascript callback来实现跨域访问。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
		function callback(data) {
			alert(data.message);
		}
    </script>
    <script type="text/javascript" src="http://localhost:8080/TestJsonp/test.js"></script>
</head>
<body>
</body>
</html>

function的定义要在上面，否则不能识别callback方法。

test.js的代码：

callback({message:"success!"});

成功弹出“success!”。其实这就是jsonp的简单实现模式：

创建一个回调函数，然后在远程服务上调用这个函数并且将json数据形式作为参数传递，完成回调。

其实，我们也可以动态的来加载javascript文件：

//添加<script>标签的方法
function addScriptTag(src){
    var script = document.createElement('script');
    script.setAttribute("type","text/javascript");
    script.src = src;
    document.body.appendChild(script);
}
window.onload = function(){
    addScriptTag("http://localhost:8080/TestJsonp/test.js");
}

但服务器不知道我们回调函数的名称，所以我们都将名称传到服务器，然后服务器用java生成javascript代码传回客户端：

function testfunc(data) {
    alert(data.message);
}
//添加<script>标签的方法
function addScriptTag(src){
    var script = document.createElement('script');
    script.setAttribute("type","text/javascript");
    script.src = src;
    document.body.appendChild(script);
}
window.onload = function(){
    addScriptTag("http://localhost:8080/TestJsonp/content.jsp?callback=testfunc");
}

content.jsp的代码：

<%
    String callback = request.getParameter("callback");
    out.write(callback + "({'message':'success!'})");
%>

4.jquery下jsonp的实现

jquery ajax提供了jsonp的实现：

$(document).ready(function() {
    $.ajax({
        url : "http://localhost:8080/TestJsonp/content.jsp",
        type : "POST",
        async : true,
        dataType : "jsonp",
        jsonp : "callback",
        success : function(data) {
            alert(data.message);
        }
    });
});

jsonp设置为callback，就相当于在url后面添加的“callback=?”，jquery会自动生成回调函数名称来替代“?”，回调函数便是success方法。