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

稍作修改,增加更多的注意点



最近开发中,设计到智能手机项目,给领导做几个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);
 
    
           }
 
    
       });
 
    
 $.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 = "";
 
     
       }
 
     
       htm = htm&(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();
 
    
   }