利用JSONP--解决ajax跨域问题

来源：互联网发布：单晶叶片知乎编辑：程序博客网时间：2024/05/17 08:39

浏览器有一个很重要安全性限制，即为同源策略：不同域的客户端脚本在无明确授权的情况下不能读些对方资源。
这就是引起为何取不到数据的原因了，那如何才能解决跨域的问题呢？这就要用到JSONP。

先了解下什么是JSONP了。JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。--来源百度
　　JSONP就像是JSON+Padding一样(Padding这里我们理解为填充)，下图比较明白的他们的工作方式。

明白了工作原理，服务器端的脚本就好写了：

  using System;using System.Web;using System.Data;using System.Text;using JSON_helper;public class getJOSN : IHttpHandler {        public void ProcessRequest (HttpContext context) {               string callback = context.Request.QueryString["callback"];         string tablename = context.Request.QueryString["tablename"];         if (tablename == "" || tablename == null)             tablename = "tablename";                            DataTable dt = new DataTable();        dt.Columns.Add("name", typeof(string));        dt.Columns.Add("year", typeof(string));        dt.Columns.Add("avg", typeof(string));        DataRow tr = dt.NewRow();        tr["name"] = "张三";        tr["year"] = "2005-02-02";        tr["avg"] = "男";        dt.Rows.Add(tr);        //ds.Tables.Add(dt);        DataRow tr2 = dt.NewRow();        tr2["name"] = "李四";        tr2["year"] = "2007-02-02";        tr2["avg"] = "女";        dt.Rows.Add(tr2);        context.Response.Clear();        context.Response.ContentEncoding = Encoding.UTF8;        context.Response.ContentType = "application/json";        string json_string = JSON_helper.JsonConverter.ToJsonCount(dt, tablename);        if (callback == "" || callback == null)            context.Response.Write(json_string);//格式： callback(json);         else            context.Response.Write(callback + "(" + json_string + ")");//格式： callback(json);        context.Response.Flush();        context.Response.End();    }     public bool IsReusable {        get {            return false;        }    }}

这个代码可以返回json和 jsonp请求，判断有callback时，返回callback+( + json数据+ )，否则只返回json数据
html页，
1.跨域请求

<script type="text/javascript">        $(function () {            $.getJSON("http://awingnet.com/myup/net_json/getJOSN.ashx?tablename=tiems&callback=?", function (data) {                $.each(data.tiems, function (i, item) {                    var content = item.name + "," + item.year + "</br>";                    $("#content").append(content);                    alert(item.name);                })            });        });</script>

2.本地请求

<script type="text/javascript">        $(function () {            $.getJSON("getJOSN.ashx?tablename=tiems", function (data) {                $.each(data.tiems, function (i, item) {                    var content = item.name + "," + item.year  + "</br>";                    $("#content").append(content);                    alert(item.name);                })            });        });</script>

原码下载

0 0