zoukankan      html  css  js  c++  java
  • jQuery跨域

    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);
        }
    }

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

  • 相关阅读:
    204. Count Primes (Integer)
    203. Remove Linked List Elements (List)
    202. Happy Number (INT)
    201. Bitwise AND of Numbers Range (Bit)
    200. Number of Islands (Graph)
    199. Binary Tree Right Side View (Tree, Stack)
    198. House Robber(Array; DP)
    191. Number of 1 Bits (Int; Bit)
    190. Reverse Bits (Int; Bit)
    189. Rotate Array(Array)
  • 原文地址:https://www.cnblogs.com/guohu/p/4471473.html
Copyright © 2011-2022 走看看