您的位置：首页 > Web前端 > JavaScript

使用jsonp跨域请求

2014-04-19 14:12 344 查看

一、异步对象，不能实现跨域请求

在站点A中访问站点B的数据：

站点A代码：

window.onload = function () {
document.getElementById("btnAjax").onclick = doAjax;
}
function doAjax() {
var xhr = new XMLHttpRequest();
xhr.open("get", "http://www.ruanmou.net/C01Target.ashx", true);
xhr.setRequestHeader("If-Modified-Since", "0");
xhr.onreadystatechange = function () {

if (xhr.readyState == 4 && xhr.status == 200) {
var res = xhr.responseText;
alert(res);
}
};
xhr.send(null);
}

<input type="button" value="使用异步请求跨域请求是错的" id="btnAjax" />

站点B代码：

C01Target.ashx中：

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write(“hello world”);
}

二、使用script标签实现跨域请求

站点A代码：

<script type="text/javascript" src="http://www.ruanmou.net/C01Target.ashx?callback=showData"></script>

function showData(data) {
for (var key in data) {
alert(data[key]);
}
}

站点B代码：

C01Target.ashx中：

public void ProcessRequest(HttpContext context)
{
string funName = context.Request.Params["callback"];
context.Response.ContentType = "text/plain";
string strDate = funName+"({\"name\":\"Xuj\",\"age\":\"18\"})";//返回数据为json格式
context.Response.Write(strDate);
}

三、jquery使用jsonp实现跨域请求

站点A代码：

window.onload = function () {
document.getElementById("btnAjax").onclick = doAjax;
}
function doJq() {
$.ajax("http://www.ruanmou.net/C01Target.ashx"), {
type: "get",//内部就是创建一个script标签
jsonp:"callback",//传的参数名，和服务器端一致
dataType: "jsonp",//指定回调的函数名
jsonCallback: "showData",
success: function () {
alert("11111");
}
});
}

function showData(data) {
for (var key in data) {
alert(data[key]);
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航