ajax请求跨域问题

ajax跨域，这个是面试的时候常被问到，也是在做项目的时候会遇到的问题，在之前的项目中就有遇到过，这里根据经验写了三种分享下

1.使用中间层过渡的方式

简单来说就是"后台代理"，把跨域请求交给后台去执行，然后在前端用ajax访问后台获取数据便可，这种比较简单，就不多说了。

2.使用script标签

对于 script 来讲，没有所谓的跨域限制，所以一般可以用来实现跨域请求，请求方式（这里用jquery，也可以直接用<script>标签）

 $(function () {

            $.getScript("http://localhost:14412/ajaxTest.aspx", function () {

                alert(responseVal);

            })

        })

后台对应代码

public partial class ajaxTest : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        Response.Write("var responseVal='Dylan'");

    }

}

3.使用"jsonp"来实现
jsonp方式其实就是在url后面多加一个callback=?的参数，这里给大家看下前端的调用方式：

使用$.getJSON来实现

    $(function () {

            $.getJSON("http://localhost:14412/ajaxTest.aspx?callback=?", function (data) {

                alert(data.name);

            });

        })

要注意的是在url的后面必须添加一个callback参数，这样getJSON方法才会知道是用JSONP方式去访问服务，callback后面的那个问号是内部自动生成的一个回调函数名

使用$.ajax来实现

    <script type="text/javascript">

       $.ajax({

            url:"http://localhost:14412/ajaxTest.aspx?callback=?",

            dataType:"jsonp",

            jsonpCallback:"my_callback",

            success:function(data){

                alert(data.name + " is a a" + data.sex);

            }

       });

    </script>

这里jsonpCallback就是可以指定我们自己的回调方法名my_callback，远程服务接受callback参数的值就不再是自动生成的回调名，而是my_callback。dataType是指定按照JSOPN方式访问远程服务。

后台对应代码：

public partial class ajaxTest : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        //获取回调函数名

        string callback = Request.QueryString["callback"];

        //json数据

        string json = "{\"name\":\"chopper\",\"sex\":\"man\"}";

        Response.ContentType = "application/json";

        //输出：回调函数名(json数据)

        Response.Write(callback + "(" + json + ")");

    }

}

好了，大概就这三种了。希望朋友们批评指正，也希望有其他更好的一起分享下。

巴特西

ajax请求跨域问题

最新文章

热门文章