jQuery Ajax()方法使用指南


Posted in Javascript onNovember 19, 2014

 jQuery提供了简单而强大的选择器功能,同时对Ajax操作也给出了很好的支持。在Ajax方面,jQuery除了提供底层的jQuery.ajax()方法外,也提供了下面的简单方法:

(1)       jQuery.get(url, [data], [callback], [type])

(2)       jQuery.getJSON(url, [data], [callback])

(3)       jQuery.getScript(url, [callback])

(4)       jQuery.post(url, [data], [callback], [type])

由于jQuery.ajax()功能比较强大,可配置的参数比较多,现在主要对这个方法的注意事项进行总结。

1.       jQuery.ajax()默认是以异步的方式请求的,如果需要同步,使用参数async为false。因为有些应用必须同步请求数据的。例如,某些Flash与JS交互应用中,请求一个JS函数需要马上得到返回数据。此时,必须采用同步的Ajax调用方式。

2.       Ajax如果是Get请求,返回的数据一般会被浏览器缓存,如果不想被缓存,可以设置cache参数为false;或者发送请求是带上时间戳,这样浏览器会认为是新的请求,而重新从服务器加载数据。当然,如果是POST发送的请求则不会被缓存。

3.       dataType:预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:

(1)"xml": 返回 XML 文档,可用 jQuery 处理。

(2)"html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。

(3)"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意:'''在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)

(4)"json": 返回 JSON 数据 。

(5)"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

(6)"text": 返回纯文本字符串

         其中,"script"、"json"设置可以解决Ajax的跨域问题。

4.       如果服务器返回的一个字符串或数值,则使用普通的ajax调用即可。

如果服务器返回的是一个JSON对象,那么最好采用jQuery.getJSON的方式,或者设置dataType=json。因为浏览器解析JSON对象需要时间,直接返回JSON对象,节省解析时间,可以避免在服务器明明有返回数据,但是浏览器得不到的错误。

5. Ajax调用是需要时间的,所以一般将Ajax调用后的处理代码全部放在回调方法中。不能采用这样的处理方式:

function getMyPrizeList(){

    if(isNotEmpty(uid)){

        var obj=new Object();

        try{

          jQuery.ajax({type:"GET",url:"someurl",async:false,cache:false,dataType:"script",scriptCharset:"gbk",success:function(json){

                     obj=json;

                  }

              });

           }catch(e){}

           obj=eval("("+obj+")");

           //alert(obj);

           var str="";

           for(var i in obj)

           {

               str+='<tr>'+'<th>'+prizearray[obj[i].prizeno]+'</th>'

               str+='<td>'+'CD-KEY:'+obj[i].cdkey+'</td>'

               str+='<td>'+'期限:'+obj[i].expiratedate+'前'+'</td></tr>';

           }

           jQuery("#prizelist").append(str);

        }

}

而必须这样处理:即将处理代码放到success函数里面!

function getMyPrizeList(){

    if(isNotEmpty(uid)){

        var obj=new Array();

        try{

                  jQuery.ajax({type:"GET",url:"someurl",

                               cache:false,

                               dataType:"script",

                               scriptCharset:"gbk",

                               success:function(json){

                                 try{

                                      obj=result;  

                                }catch(e){}

                                jQuery("#prizelist").html("");

                                var str="";

                                for(var i=0;i<obj.length;i++ ){

                                    str+='<tr><th>'+prizearray[obj[i].prizeno]+'</th>';

                                    str+='<td>CD-KEY:'+obj[i].cdkey+'</td>';

                                    str+='<td>期限:'+obj[i].expiratedate+'前</td></tr>';

                                }

                                jQuery("#prizelist").append(str);                   

                               }

                   });

           }catch(e){}

        }

}

6. jQuery.getJSON实例:

//内部函数,实现债务人详细信息的载入、设置值

    function innerShowDetail() {

       // 获得JSON格式的数据

       $.getJSON('load.do',{id : userId}, function(json) {

           // 根据key设置value

           for (key in json) {

              if(key == 'id'){

                  $('#detailDiv #' + key).val(json[key]);

              } else {

                  if(json[key] == ''){

                     // 没有值设置为空

                     $('#detailDiv #' + key).html(' ');

                  } else if(key == 'sex'){

                     $('#detailDiv #' + key).html(json[key] == '0' ? '女' : '男');

                  } else if(key == 'group'){

                     if(json[key] != null) {

                         $('#detailDiv #' + key).html(json[key]['groupName']);

                     }

                  } else {

                     $('#detailDiv #' + key).html(json[key]);

                  }

              }

           }

           //设置对话框标题和内容

           $('#detailDiv').removeAttr('class');

           dialog.setTitle('查看人员[' + json['userName'] + ']详细资料');

           dialog.setContent($('#detailDiv').html());

       });

    }
Javascript 相关文章推荐
jQuery Study Notes学习笔记 (二)
Aug 04 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
实现无刷新联动例子汇总
May 20 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
vue实现分页的三种效果
Jun 23 Javascript
javascript匿名函数实例分析
Nov 18 #Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 #Javascript
删除Javascript Object中间的key
Nov 18 #Javascript
如何在MVC应用程序中使用Jquery
Nov 17 #Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 #Javascript
JavaScript数组常用操作技巧汇总
Nov 17 #Javascript
jquery 实现返回顶部功能
Nov 17 #Javascript
You might like
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
带左右箭头图片轮播的JS代码
2013/12/18 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
使用python实现扫描端口示例
2014/03/29 Python
Python正规则表达式学习指南
2016/08/02 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
Python中一般处理中文的几种方法
2019/03/06 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
css 元素选择器的简单实例
2016/05/23 HTML / CSS
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
买房子个人收入证明
2014/01/16 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
法人代表证明书
2014/09/18 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
简历自荐信范文
2015/03/09 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
感恩的心主题班会
2015/08/12 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL