ajax跨域调用问题处理

发布时间：2020-12-16 02:03:45 所属栏目：百科来源：网络整理

导读：Ajax的跨域问题，归根结底其实是javascript的同源策略（这里不作探讨，不清楚可以百度下）导致的，以前不用Ajax，用XMLHttprequest对象跨域请求也是有问题的。解决跨域调用问题有以下几种方法： 1.使用中间层绕过跨域问题（代理模式）举个例子大家就清楚了

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跨域测试" onclick="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文件，允许跨域访问

response.setHeader("Access-Control-Allow-Origin","*")

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!