ajax跨域调用问题处理

前端之家收集整理的这篇文章主要介绍了ajax跨域调用问题处理前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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标签而没有用到xmlxmlHttprequest的缘故。这种方法似乎有点另类

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","*")
原文链接:https://www.f2er.com/ajax/163585.html

猜你在找的Ajax相关文章