夏日博客

A-A+

总结jquery中的六种Ajax数据交互应用

2016年01月08日 前端设计 暂无评论 阅读 6 views 次

以下是本人总结的六种jquery与后台做数据交互的方法，最底层的还是ajax，不过本人比较喜欢轻量的json数据格式传输交互。

jquery中的几种ajax请求，包括最底层的方法$.ajax()，第二层的load()、$.post()、$.ajax()，第三层的$.getJSON()、$.getScript(),代码如下:

  1. <script type="text/javascript">  
  2. //jquery中的几种ajax请求  
  3. function ajaxRequest(){  
  4.   
  5.     /* 
  6.        $.ajax();最底层的方法 
  7.        load()、$.post()、$.ajax();第二层 
  8.        $.getJSON(); $.getScript();//第三层 
  9.      /* 
  10. /*******************************load方法********************************/  
  11.         //url地址/data发送数据json格式键值对/回调函数 load通常用  
  12.         //来获取web上静态数据文件，并不能体现ajax的全部价值  
  13.        load(url,[data(key/value)],[callback]);        
  14.        //1.load能将远程html代码添加到dom中      
  15.        $("#text").load("test.html");  
  16.        //2.load 筛选载入html文档  
  17.        $("#text").load("test.html .para");  
  18.        //3.传递方式get  
  19.        $("#text").load("test.php",function(){  
  20.         //...  
  21.        });  
  22.        //传递方式post  
  23.        $("#text").load("test.php",{name:"rain",age:"22"},function(){  
  24.        //...  
  25.        });  
  26.        //4.回调函数  
  27.        $("#text").load("test.html",function(responseText,textStatus,XMLHttpRequest){  
  28.        //responsetText 请求返回内容  
  29.        //textStatus 请求状态，success、error、notmodified、timeout 4种  
  30.        //XMLHttpRequest对象  
  31.        });  
  32.          
  33. /********************************************get方法************************************************/  
  34.         //$.get();方法使用GET异步请求  
  35.         /*url地址/data发送数据json格式键值对/calback回调函数/type返回类型() 
  36.           回调函数有两个 function(data,textStatus)data返回来的可以是xml、json文件、html片段 
  37.          textStatus请求状态：success、error、notmodified、timeout 4种 
  38.          textStatus返回success才会被调用 这一点跟load不同 
  39.         */  
  40.         $.get(url,[.data],[.calback],[.type]);  
  41.         $.get("test.action",{name:"zhangsan",age:"10"},function(data,textStatus){  
  42.               
  43.         /*...最后一个参数表示返回的是json格式 
  44.             json、格式非常严格{"name":"张三","age","20"} 必须是这种格式而不是 
  45.             {name:"zhangsan",age:"10"}任何一个{}不匹配获取缺少逗号，都会导致页面上的脚本终止运行 
  46.                                        甚至带来其他更严重的负面影响当然在不就的将来javascript 
  47.             xml跟json一样容易解析，并且解析的xml将会成为主流的数据交换格式，不过在它之前json 
  48.                                        依然有很强的生命力 
  49.         */  
  50.         },"json");  
  51. /********************************************post方法************************************************/     
  52.         /* 
  53.          
  54.         $.post()请求 他与get之间的区别 
  55.         1、GET会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容 
  56.         发送给WEB服务器。当然，在Ajax请求中，这种区别对用户是可见的。 
  57.          
  58.         2、GET方式对传输的数据大小限制（通常不能大于2KB），而使用POST方式传递 
  59.         数据量要比GET方式大的多（理论上不受限制） 
  60.  
  61.         3、GET方式请求的数据会被浏览器缓存起来，因此其他人可以从浏览器的历史记录 
  62.         中读取到这些数据，例如账号、密码等，在某种情况下，GET方式会带来严重的安全 
  63.         性问题，而POST方式相对来说可以避免这些问题 
  64.  
  65.         4、GET方式和POST方式传递的数据在服务器上获取也是不相同。在PHP中，GET方式 
  66.         的数据可以用$_GET[]获取，而POST方式可以用$_POST[]获取，两种方式都可以用 
  67.         $_REQUEST[]来获取。 
  68.          
  69.         $.post(url,[.data],[.calback],[.type]); 
  70.         */  
  71.   
  72.         $.post("test.action",{name:"zhangsan",age:"10"},function(data,textStatus){  
  73.         //...........另外load方法有参数传递时，会使用post请求发送请求  
  74.         },"json");  
  75.   
  76. /********************************************ajax方法************************************************/    
  77.         /* 
  78.          使用load $.get() $.post() 方法完成一些常规的Ajax程序，要编写一些复杂的Ajax程序， 
  79.         那么就的用到$.ajax();不仅能同时实现与load、get、post方法实现同样的的功能，而且 
  80.         还可以设定beforeSend（提交前回调函数）、error（请求失败处理）、success（请求成功 
  81.         后处理）以及complete（请求完成后处理）回调函数，通过这些回调函数，可以给用户更多 
  82.         的Ajax提示信息。另外，还有一些参数，可以设置Ajax请求的超时时间或者页面的最后更改状态 
  83.         等。 
  84.          
  85.         ajax中的参数详解 
  86.         url:（默认为当前网页地址）发送请求的地址 
  87.         type:请求的方式 post、get默认为get，注意http请求的方法，例如PUT和DELETE也可以使用， 
  88.         但仅有部分浏览器支持 
  89.         timeout:设置请求超时间（毫秒），此设置将覆盖$.ajaxSetup()方法的全局变量 
  90.         data：发送到服务器的数据可以在URL后面也可以使用json格式key/value对 
  91.         dataType:返回数据类型 xml、html、script、json、jsonp、text 
  92.         beforeSend：发送请求修改XMLHttpRequest对象的函数，例如添加自定义HTTP头、 
  93.         在beforeSend中如果返回false中取消本次ajax请求、XmLHttpRequest对象唯一的参数、 
  94.         function(XMLHttpRequest){ 
  95.         this;//调用贝齿Ajax请求传递的options参数 
  96.         } 
  97.         complete:请求完成红调用的回调函数（请求成功失败均调用） 
  98.         success:请求成功调用的回调回调函数，有两个参数。1.由服务器返回，并更具dataType参数进行 
  99.         处理后的数据。2.描述状态的字符串 
  100.         function(data,textStatus){ 
  101.         //data可能是xmlDac、jsonObj、html、text等等 
  102.         this;//调用本次ajax请求传递的options参数 
  103.         } 
  104.          
  105.         error：请求失败时调用的函数，该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误 
  106.         对象（可选）。Ajax时间函数如下： 
  107.         function(XMLHttpRequest,textStatus,errorThrown){ 
  108.         //通常情况下textStatus河errorThown只有其中一个包含信息， 
  109.         this;调用本次Ajax请求是传递的options参数 
  110.          
  111.         } 
  112.         global：默认为true，表示是否触发全局Ajax事件。设置为false将不会触发全局Ajax事件，AjaxStart或者 
  113.         AjaxStop可用控制各种Ajax事件 
  114.         */  
  115.         $.ajax({  
  116.             type:"POST",//请求方式  
  117.             url:"test.html",//url访问地址  
  118.             data:{name:"战三",age:"11"}//传递参数  
  119.             dataType:"json",//返回值类型  
  120.             success:function(data){//成功数据处理  
  121.             //data...数据处理  
  122.               
  123.             },  
  124.             error:function(msg){//失败处理  
  125.                 alert(msg);  
  126.             }  
  127.               
  128.         });  
  129. /********************************************ajax方法************************************************/            
  130.         /* 
  131.         只用用post，get 传递参数 如果一个表单中的数据多了 就有点麻烦了  
  132.         序列化元素serialize();他将dom对象序列化成一个字符串 
  133.         $("#form1").serizlize(); 
  134.         $.post("this.html",$("#form1").serizlize(),function(data){ 
  135.         //处理... 
  136.         }) 
  137.      
  138.         serizlizeArray方法返回不是一个字符串，而是将dom元素序列化后返回一个就送格式的数据， 
  139.         $.param()方法：他是serizlize（）方法的核心，用来对一个数组或对象按照kay/value进行序列化 
  140.         var obj={a:1,b:2,c:3}; 
  141.         var k=$.param(obj); 
  142.         alert(k);//输出a=1&b=2&c3 
  143.         */  
  144. /********************************************getScript方法************************************************/   
  145.   
  146.         /* 
  147.         有时候 在页面上初次加载时没有必要将所有的js文件都加出来 可以动态的创建加载js文件 
  148.         可以使用$.getScript(); 
  149.         */  
  150.         $("#send").click(function(){  
  151.             $.getScript("js.js");  
  152.         });  
  153. /********************************************getJSON方法************************************************/   
  154.   
  155.         /* 
  156.             $.getJSON()用于加载JSON文件 跟getScript()用法一样 
  157.         */  
  158.         $("#send").click(function(){  
  159.             $.getJSON("js.json");  
  160.         });              
  161.         $("#send").click(function(){  
  162.             $.getJSON("js.json",function(data){  
  163.                 //data数据处理  
  164.             });  
  165.         });      
  166.   
  167.     }  
  168. }  
  169. </script>  
标签：

给我留言