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

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

越来越发现jq jqm是太强大了。由衷的佩服开发和维护团队。哈哈
 
在开发中,设计多个平台,其中我负责的管理中心,需要提供接口给网站B进行验证和返回一堆html代码。
为了尽量减少网站B的开发工作量,我想到了类似百度广告联盟、搜狗联盟的引用js代码的方式。
说干就干。
 
先学习一下搜狗联盟的做法:
<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解析类,大家可以看看:

(转)jquery ajax使用及跨域访问解决办法的更多相关文章

  1. Ajax跨域访问解决办法

    方法1. jsonp实现ajax跨域访问示例 jsp代码: <body> <input type="button" onclick="testJsonp ...

  2. ASP.net Web API允许跨域访问解决办法

    来源 http://blog.csdn.net/wxg_kingwolfmsncn/article/details/48545099 遇到此跨域访问问题,解决办法如下:   方法一:   1. 在we ...

  3. AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法?

      AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法? 分类: web前端面试题2013-07-20 22:40 630人阅读 评论(0) 收藏 举报 目录(? ...

  4. jQuery发送ajax请求实现跨域访问

    Java代码的话,在返回响应之前调用如下代码中的allowCrossDomainAccess()方法: /** * 允许跨域访问 */ public void allowCrossDomainAcce ...

  5. jQuery ajax的jsonp跨域请求

    一直在听“跨域跨域”,但是什么是跨域呢?今天做了一些了解.(利用jQuery的jsonp) jQuery使用JSONP跨域 JSONP跨域是利用script脚本允许引用不同域下的js实现的,将回调方法 ...

  6. AJax与Jsonp跨域访问

    一.JavaScript的AJax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML) 设计AJax使用的一种重要技术 ...

  7. java 设置允许ajax XMLHttpRequest 请求跨域访问

    怎样才能算跨域?协议,域名,端口都必须相同,才算在同一个域. 方案1: 使用XMLHttpRequest...  异步请求不能跨域访问,除非要访问的网页响应头信息设置为允许跨域访问. 将网页设置为允许 ...

  8. 基于.Net Framework 4.0 Web API开发(5):ASP.NET Web APIs AJAX 跨域请求解决办法(CORS实现)

    概述:  ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特 ...

  9. [Unity WWW] 跨域访问解决方法

    什么是跨域访问 域(Domain)是Windows网络中独立运行的单位,域之间相互访问则需要建立信任关系(即Trust Relation).信任关系是连接在域与域之间的桥梁.当一个域与其他域建立了信任 ...

随机推荐

  1. java spring 使用注解来实现缓存

    这里举例使用spring3.1.4 + ehcache 注解的方式使用cache 是在spring3.1加入的 使用方法: 1.ehcache依赖+spring依赖 <!-- ehcache依赖 ...

  2. JS 文本输入框放大镜效果

    JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...

  3. c#线程问题(1)

    delegate : public delegate void ParameterizedThreadStart(Object obj) public delegate void ThreadStar ...

  4. Python学习 之 内建函数

    1.常用函数:abs().max().min().len().divmod().pow().round() 例1:abs返回数字绝对值 abs(10) #结果10 abs(-10) #结果10 例2: ...

  5. Android(java)学习笔记198:Android下的逐帧动画(Drawable Animation)

    1.帧动画: 帧动画顾名思义,一帧一帧播放的动画就是帧动画. 帧动画和我们小时候看的动画片的原理是一样的,在相同区域快速切换图片给人们呈现一种视觉的假象感觉像是在播放动画,其实不过是N张图片在一帧一帧 ...

  6. ArcGIS Server 10.2 实战(五)spatial etl tool 格式转换服务

    上不同的地图服务平台对地图文件格式的要求多种多样,arcgis使用的文件很难应用于其他平台上,因此需要有格式转换的服务来克服这种使用不同平台带来的麻烦,下面以TIFF格式转GEOTIFF格式为例. 首 ...

  7. [改善Java代码]子列表只是原列表的一个视图

    List接口提供了subList方法,其作用是返回一个列表的子列表.这与String类的subString有点类似.但是他们的功能是否相同?看代码: import java.util.ArrayLis ...

  8. Linux中ifcfg-eth0配置参数解释

    Linux中设置IP地址经常使用到ifcfg-eth0这个文件.  vi /etc/sysconfig/network-scripts/ifcfg-eth0 附录文件中的内容: DEVICE=eth0 ...

  9. Oracle查找被长时间锁定的对象并kill

    1.用如下语句查找被锁住的表名.OSclient.Session信息 SELECT B.SID         ,B.SERIAL#         ,D.SPID        OS系统进行号    ...

  10. 4k 对齐,你准备好了吗?

    什么是 4k 对齐? 其实与 “ 4K对齐 ” 相关联的是一个叫做 “ 高级格式化 ” 的分区技术.“ 高级格式化 ” 是国际硬盘设备与材料协会为新型数据结构格式所采用的名称.这是主要鉴于目前的硬盘容 ...