(转)jquery ajax使用及跨域访问解决办法

原文地址：***/UIweb/jquery_ajax_kuayujiejue.html

最近开发中，设计到智能手机项目，给领导做几个demo。主要是用jquery和jqeury mobile。

越来越发现jq jqm是太强大了。由衷的佩服开发和维护团队。哈哈

 

在开发中，设计多个平台，其中我负责的管理中心，需要提供接口给网站B进行验证和返回一堆html代码。

为了尽量减少网站B的开发工作量，我想到了类似百度广告联盟、搜狗联盟的引用js代码的方式。

说干就干。

 

先学习一下搜狗联盟的做法：

进入搜狗联盟的获取代码：（为啥我能进去那？因为我有备案的网站了。www.360yi.net)

<script type="text/javascript">
var sogou_ad_id=209344;
var sogou_ad_height=90;
var sogou_ad_width=728;
</script>
<script language='JavaScript' type='text/javascript' src='http://images.sohu.com/cs/jsfile/js/c.js'></script>

 

我们可以看到，明显2块代码：

1.是全局变量，是确认网站的广告编号、配置宽高。

2.广告逻辑代码

 

按照这个思路，我需要提供一个外链的js文件，而对于需要配置的参数，可以通过定义全局变量来实现（后来我自己做了参数分析，就不用全局变量了）。

 

小小的js文件背后，隐藏着很深的逻辑。

思路:

1.接收到调用方的参数数据，调用我的js函数处理（(document).ready加载后默认处理）；

2.(document).ready函数调用后台逻辑代码。我后台是aspx的，所以做了一个Apsx页面处理这个请求。

这里有个问题，让我走了弯路。

js是不能跨域访问的，历史原因就悠久。

 

 

什么是跨域

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。

 

实现：

如果碰到什么问题，我们都会google一下（这里说一下，搜索技术问题，google最强的了，baidu就是浮云了）。然后找代码，下代码，

博主不提供下载还得骂娘。唉，天下没有免费的午餐，已经共享知识了，不要强求了。

 

jquery实现ajax访问很多方式，同时也支持post和get，但是只有get方式才能实现跨域访问。

 

Post方式代码：

 

       $.ajax({

          //要用post方式     com_id=135

           type: "Post",

          //方法所在页面和方法名    

           url: "http://localhost:3101/Image.aspx?id=" +s_id,

           contentType: "application/json; charset=utf-8" ,

           dataType: "json",

           data: "{s_id:'"+s_id+"'}" ,       //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到    

           success: function (data) {

              //返回的数据用data.d获取内容    

              var adas = data.d;

               $( "#divShowtwo").html(adas );

           },

           error: function (err) {

               alert(err.toString);

           }

       });

 实现get方式 $.ajax函数也可以，jquery封装的 $.getJSON函数更简单一些。

  var AjaxUrl = "http://localhost:3101/Image.aspx?id=" +s_id+"&jsoncallback=?";

           $.getJSON(AjaxUrl, function (Json) {

               $( "#divShowtwo").html(Json.html);

             });

jQuery.getJSON( url, [data], [callback] ) 跨域加载JSON数据。

• url: 发送请求的地址

• data : (可选) 待发送key/value参数

• callback: (可选) 载入成功时的回调函数

支持的时间和$.ajax是一样的。

注意：jsoncallback=?为必须参数，其它参数可以正常URL传参方式使用。例如 ?ID=23&Name=test&

 

后台代码：

Image.aspx页面要实现resposne一段json。

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

         Response.ContentEncoding = Encoding.UTF8;

         Response.ContentType = "application/json";  

        HttpContext.Current.Response.ContentType = "text/json" ;

      string rehtml = "" ;

      try

       {

          StringBuilder sb = new StringBuilder();

          if (id.Length > 0)

           {                

                  string imgurl = GetPicURL(model.QRcodeURL);

                   sb.Append( "<p>www.360yi.net</p>" );

                  rehtml = Cleaner(sb.ToString());

           }

       }

      catch (Exception ex)

       {

           rehtml = "";

       }

       Response.Write(jsoncallback + "({\"html\":\"" + rehtml + "\"})");

       Response.End();

 

注意：

服务端接口页面

1、string jsoncallback = Request.QueryString["jsoncallback"]; 这个为必须获取的参数

2、输出是必须jsoncallback +输出JSON串

 

Json传递html的处理:

json对<> / \ 等关键字是需要转义的。这里大家都看到一个函数Cleaner（）。就是实现json html转义的。

 

    /// <summary>

  /// json html字符串转义

  /// </summary>

  /// <param name="_s"></param>

  /// <returns></returns>

  public static string Cleaner( string _s)

   {

      if (_s == null ) return "";

       System.Text. StringBuilder sb = new System.Text.StringBuilder(_s);

       sb.Replace( @"\", @"\\" );

       sb.Replace( @"'", @"\'" );

       sb.Replace( @"""", @"\""" );

       sb.Replace( Environment.NewLine, @"\n" );   //替换连在一起的\r\n

       sb.Replace( "\n", @"\n" );               //单个替换

       sb.Replace( "\r", @"\n" );

      return sb.ToString();

   }

 

另外，C# json解析类，大家可以看看：

JSON解析类(C#)