Ajax的跨域问题，归根结底其实是javascript的同源策略（这里不作探讨，不清楚可以百度下）导致的，以前不用Ajax，用XMLHttprequest对象跨域请求也是有问题的。
解决跨域调用问题有以下几种方法：
1.使用中间层绕过跨域问题（代理模式）
举个例子大家就清楚了:a站点要通过http请求获得b站点的数据，那么在a站点提供一个Proxy接口GetRequestByUrl，然后在GetRequestByUrl里请求b站点的地址，相当于ajax脚本里直接调用http://b.com/api改为调用/GetRequestByUrl,然后再服务器端发起对http://b.com/api的请求；
（这个的思路主要是通过代理绕过javascript同源策略）
2.使用＜script＞标签
这个方法是利用＜script＞标签中的src来query一个aspx获得response，因为＜script＞标签的src属性不存在跨域的问题。
举个例子来让大家看得更清楚一点吧：
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ajax跨域问题</title>
<script type="text/javascript" src=""id="getAspx">
</script>
<script type="text/javascript">
function getData(url) {
var obj =document.getElementById("getAspx");
obj.src =url;
(obj.readStatus == 200)
{
alert(responseVal);//如果成功，会弹出Dylan
}
}
function query() {
getData(getDemo.aspx);
}
</script>
</head>
<body>
<input type="button" value="Ajax跨域测试" οnclick="query();"/>
</body>
</html>
getDemo.aspx后台代码：
代码如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace LearnJS
{
public partial class getDemo : System.Web.UI.Page
{
protected void Page_Load(objectsender, EventArgs e)
{
Response.Write("var responseVal='Dylan'");
}
}
}
这个方法又叫做ajaj或者ajax without xmlHttprequest，把x换成了j，是因为使用了＜script＞标签而没有用到xml和xmlHttprequest的缘故。这种方法似乎有点“另类”。
3.通过Jsonp实现
JSONP(JSONwith Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
实现原理：由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。（是对第二种方法的改进）
使用：客户端代码如下
$.ajax({
type: "get",
url: "http://localhost:9524/Home/ProcessCallback", // 这个就是不同于当前域的一个URL地址，这里单纯演示，所以同域
dataType: "jsonp",
jsonp: "jsonpcallback", // 指定回调函数，这里名字可以为其他任意你喜欢的，比如callback，不过必须与下一行的GET参数一致
data:"name=jxq&email=feichexia@yahoo.com.cn&jsonpcallback=?", //jsonpcallback与上面的jsonp值一致
success: function (json) {
alert(json.Name);
alert(json.Email);
}
});
服务端代码如下：
public string ProcessCallback(string name, string email)
{
if (Request.QueryString != null)
{
string jsonpCallback = Request.QueryString["jsonpcallback"];
var user = new User
{
Name = name,
Email = email
};
return jsonpCallback + "(" + new JavaScriptSerializer().Serialize(user) + ")";
}
return "error";
}
4.增加header文件，允许跨域访问
扫一扫
1298
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
