jsonp跨域请求及本质

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在html页面中，能实现跨域请求的是

第一：

第二：

var img = document.createElement("img");
img.src = "http://localhost:59602/JsonpTest1.ashx?callBack=callBack";现在根据这两种讲解跨域请求第一种：
直接上代码：前台HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function callBack() {
alert("执行了");
}
</script>
<script src="http://localhost:59602/JsonpTest.ashx?callBack=callBack"></script>
</head>
<body></body>
</html>

后台用的c#的一般处理程序

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string callBack= context.Request.QueryString["callBack"];
context.Response.Write(callBack+"()");
}

执行结果成功

第二种：

前台代码：html页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

</body>
<script>
var img = document.createElement("img");
img.src = "http://localhost:59602/JsonpTest1.ashx?callBack=callBack";
// img.style.display = "none";
document.body.appendChild(img);
img.onload = function (data1) {
console.log("成功");
}
img.onerror = function (data1) {
console.log("失败");
console.log(data1);
}
</script>
</html>

后台代码：后台用的302重定向调整，直接返回图片也可以

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Redirect("https://img.alicdn.com/tfs/TB1cokKnY_I8KJjy1XaXXbsxpXa-190-140.gif", false);
}

第三中：JQ的ajax封装的jsonp，本质就是用的上面两种

前台页面：HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.10.2.js"></script>
<script>
$(function () {
$.ajax({
url:"http://localhost:59602/JsonpTest.ashx",
dataType:"jsonp",
jsonpCallback:"callback",
success:function (data) {
alert("回调成功");
}
});
}); function callback(data) {
alert("回调callback");
}
</script>
</head>
<body></body>
</html>