jQuery跨域 - itprobie-菜鸟程序员

公告

JSON数据是一种能很方便通过JavaScript解析的结构化数据。如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代默认的callback，可以通过设置$.ajax()的jsonp参数。

其实jquery跨域的原理是通过外链 <script> 来实现的,然后在通过回调函数加上回调函数的参数来实现真正的跨域

Jquery 在每次跨域发送请求时都会有callback这个参数，其实这个参数的值就是回调函数名称，所以，服务器端在发送json数据时，应该把这个参数放到前面，这个参数的值往往是随机生成的，如：jsonp1294734708682，同时也可以通过 $.ajax 方法设置 callback 方法的名称。明白了原理后，服务器端应该这样发送数据：

string message = "jsonp1294734708682({\"userid\":0,\"username\":\"null\"})";

下面我们来介绍下jquery的自己个参数

/**
*@dataType (String) 
*"xml": 返回 XML 文档，可用 jQuery 处理。
*"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
*"script": 返回纯文本 JavaScript 代码。"json": 返回 JSON 数据 。
*"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
*"text": 返回纯文本字符串
*/

/**
*@jsonp (String)在一个jsonp请求中重写回调函数的名字。
*这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，
*比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
*/


/**
*@jsonpCallback (String)
*为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。
*这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。
*你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。
*/

1>以下是通过ajax和getJSON实现跨域的例子。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //未指定jsonp和jsonpCallback
            $("#ajax1").click(function () {
                $.ajax({
                    url: 'http://localhost/CrossDomain/UserHandler.ashx',
                    dataType: "jsonp",
                    data: "jsonp=ajax1",
                    success: function (data) {
                        $.each(data.success, function (i, data) {
                            $("body").append("<p>" + data.title + "</p>");
                        });
                    }
                });
            });

            //指定jsonp和jsonpCallback
            $("#ajax2").click(function () {
                $.ajax({
                    url: 'http://localhost/CrossDomain/UserHandler.ashx',
                    dataType: "jsonp",
                    data: "jsonp=ajax2",
                    jsonp: "successCallback",
                    jsonpCallback: 'jsonpCallback'
                });
            });

            //指定jsonp和jsonpCallback
            $("#ajax3").click(function () {
                $.ajax({
                    url: 'http://localhost/CrossDomain/UserHandler.ashx',
                    dataType: "jsonp",
                    data: "jsonp=ajax3",
                    jsonp: "successCallback",
                    success: function (data) {
                        $.each(data.success, function (i, data) {
                            $("body").append("<p>" + data.title + "</p>");
                        });
                    }
                });

            });

            //getJSON，jsoncallback=?从服务器回发后其中的“?"会被替换成生产的回调方法的名称，此方法名由jQuery动态生成,jsoncallback=?可以
            //自定义成callback=?,对应的后台要通过context.Request.QueryString["callback"]获取回掉函数名称
            $("#getJSON").click(function () {
                $.getJSON("http://localhost/CrossDomain/UserHandler.ashx?jsoncallback=?", { jsonp: "ajax4" }, function (data) {
                    $.each(data.success, function (i, data) {
                        $("body").append("<p>" + data.title + "</p>");
                    });
                });
            });
        });

        function jsonpCallback(data) {
            $.each(data.success, function (i, item) {
                $("body").append('<p>' + item.title + '</p>');
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" value="ajax跨域1" id="ajax1" />
        <input type="button" value="ajax跨域2" id="ajax2" />
        <input type="button" value="ajax跨域3" id="ajax3" />
        <input type="button" value="getJSON跨域" id="getJSON" />
    </div>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
///Class1 的摘要说明
/// </summary>
public class UserHandler:IHttpHandler
{
    public UserHandler()
    {
        //
        //TODO: 在此处添加构造函数逻辑
        //
    }

    public bool IsReusable
    {
        get { return false; }
    }

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/html; charset=utf-8";
        string t = context.Request.QueryString["jsonp"];
        switch (t)
        {
            case "ajax1":
                Ajax1(context);
                break;
            case "ajax2":
                Ajax2(context);
                break;
            case "ajax3":
                Ajax3(context);
                break;
            case "ajax4":
                Ajax4(context);
                break;
            default:
                break;
        }


    }

    private void ResponseWrite(HttpContext context,string callback)
    {
        context.Response.Write(callback + "({ \"success\": [{ \"id\": \"1\", \"title\": \"title 1\" }, { \"id\": \"2\", \"title\": \"title 2\" }]})");
    }

    private void Ajax4(HttpContext context)
    {
        String callback = context.Request.QueryString["jsoncallback"].ToString();
        ResponseWrite(context, callback);
    }

    private void Ajax3(HttpContext context)
    {
        String callback =context.Request.QueryString["successCallback"].ToString();
        ResponseWrite(context, callback);
    }

    private void Ajax2(HttpContext context)
    {
        String callback = context.Request.QueryString["successCallback"].ToString();
        ResponseWrite(context, callback);
    }

    private void Ajax1(HttpContext context)
    {
        String callback = context.Request.QueryString["callback"].ToString();
        ResponseWrite(context, callback);
    }
}

程序员的基础教程：菜鸟程序员

posted on 2015-05-02 00:59 itprobie-菜鸟程序员阅读(320) 评论(0) 编辑收藏举报

刷新页面返回顶部