一、异步对象,不能实现跨域请求
在站点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", "");
xhr.onreadystatechange = function () { if (xhr.readyState == && xhr.status == ) {
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("");
}
});
}
function showData(data) {
for (var key in data) {
alert(data[key]);
}
}