使用jQuery处理AJAX请求的基础学习教程


Posted in Javascript onMay 10, 2016

$.ajax快捷方法

$.get(url,[data],[callback],[type])
$.post(url,[data],[callback],[type])

两种方法请求方式不同,其他方式相同.
参数:url[请求地址],data[请求的数据内容(obj对象)],callback[回调函数(只能处理请求成功事件)],
type[请求返回数据的编码格式(默认ContentType指定格式)]

$.get('/test?x=1');
$.get('/test',{z:2});
$.post('/test',{y:2});
$.get('/user',function(data,callbacktype,jqXHR){
  data//返回数据
  callbacktype//返回数据的状态信息(字符串)
  jqXHR//jQuery封装的XHR对象
});
$(selector).load(url,[data],[callback])

将页面片段载入到selector的容器里面

$("#content").load('/user');
$.getJSON(url,[data],[callback])

如果是JSON数据回调会成功,否则失败

$.getJSON('/test',{type:1},function(){
  console.log(argument)
});
$.getScript(url,[claaback])

动态加载脚本文件

$.gerScript('/js/test.js',function(){
  alert(test(1,2));
});

$.ajax详细使用方法

$.ajax(url,[settings]);

$.ajax({
  url:'/test',
  success:function(){
    alert('ok');
  }
});

处理响应结果的回调函数:
success[成功],error[请求失败],
statusCode[指明返回的状态码的回调函数],
complete[请求返回前的回调函数(处理返回不同状态码的请求)]

$.ajax('/test',{
  success:function(data){
    console.log(arguments);
  },
  error:function(jqXHR,textStatus,err){
    //jqXHR:jQuery增强的XHR
    //textStatus:请求完成状态
    //err:底层通过throw抛出的异常对象,类型与值与错误类型有关
    console.log(arguments);
  },
  complete:function(jqXHR,textStatus){
    //jqXHR:jQuery增强的XHR
    //textStatus:请求完成状态success | error
    console.log(arguments);
  },
  statusCode:function(){
    '403':function(jqXHR,textStatus,err){
      //jqXHR:jQuery增强的XHR
      //textStatus:请求完成状态
      //err:底层通过throw抛出的异常对象,类型与值与错误类型有关
      console.log(arguments);
      console.log(400);
    },
    '400':function(){
      console.log(400);
    }
  }   
});

请求的数据:data,processData,contentType,traditional

$.ajax('/test',{
  //请求的数据内容
  data:{
    a:1,
    b:2
  },
  //请求的方式
  type:'POST',
  //是否对请求的数据进行转码(用于传输数据为html节点内容)
  processData:true,
  //当前的数据是否使用传统方式进行url编码
  traditional:true,
  //请求数据编码格式
  contentType:'application/json'
});

响应数据:dataType,dataFilter

$.ajax('/test',{
  success:function(data){
    console.log(typeof data)
  },
  //定义的返回数据的类型
  dataType:'json | html | text | jsonp | script',
  //返回底层的原始数据进行预处理
  dataFilter:function(data,type){
    //data:原始数据
    //type:指定的数据类型
  }  
});

前置处理:beforeSend

$.ajax('/test',{
  beforeSend:function(jqXHR,settings){
    console.log(arguments);
    jqXHR.setRequestHeader('test','haha');
    jqXHR.testData = {a:1,b:2};
  },
  complete:function(jqXHR){
    console.log(jqXHR.testData)
  }
});

请求类型:GET(默认) | POST | PUT | DELETE
同步异步:async(默认true)
是否缓存:cache(默认true)
其他参数:
1.global[是否触发全局事件]
2.ifModifed[仅在服务器数据改变时候加载数据]
3.username,password[http需要验证时候]
4.timeout[设置请求超时时间,若请求超时触发error]
5.context[回调中this指向的对象]
其他相关的API

$.ajaxSetup(option)

设置全局默认参数

//默认为get请求
$.ajax('/test');

//修改全局请求方式为post
$.ajaxSetup({
  type:'post',
  headers:{
    test:new Date().getTime
  },
  cache:false
});

//请求方式改变为post
$.ajax('/test');
$.ajaxPrefilter([dataTypes],handler(option,originalOptions,jqXHR))

请求发起前的预处理,提供了一种AOP(面向切面)编程模式,常见用途:
1.根据option设定执行特定处理逻辑
2.修改option值改变请求默认行为
3.通过return修改默认dataType

例:通过return修改默认dataType

$.ajaxPrefilter('text html json',function(options,originalOptions,jqXHR){
  //options请求参数,含默认值
  //originalOptions请求时传入的参数,不含默认值
  //jqXHR:jQuery增强的XHR
  console.log(arguments);
  if(options.url == '/test'){
    return 'text';
  }
});

$.ajax('/test',{
  type:'post',
  dataType:'text',
  //自定义属性
  test:'haha'
});

例:多次请求仅最后一次有效,避免多次请求导致的数据混乱

var requests = {};
$.ajaxPrefilter(function(options,originalOptions,jqXHR){
  if(requests[options.url]){
    requests[options.url].abort();
  }
  requests[options.url] = jqXHR;
});

$.ajax('/test/');
$.ajax('/test/');

例:统一修改请求路径

$.ajaxPrefilter(function(options){
  if(options.url.substr(0,5) == '/usr'){
    options.url = options.url.replace('/usr/','/user/');
    options.header = {
      a:1
    }
  }
});

$.ajax('/usr/');

全局事件

jQuery-1.9以后,全局事件必须绑定在document上

$(document).ajaxSuccess(globalEventHander);
$(document).ajaxError(globalEventHander);
$(document).ajaxComplete(globalEventHander);
$(document).ajaxStart(globalEventHander);
$(document).ajaxStop(globalEventHander);
$(document).ajaxSend(globalEventHander);
function globalEventHander(event){
  console.log(arguments);
  console.log(event.type);
}
$.ajax('/test?err=y');//请求成功
$.ajax('/test?err=n');//请求失败
//请求顺序:
//ajaxStart >> ajaxSend >> ajaxSend >> ajaxSuccess >> ajaxComplete >> ajaxError >> ajaxComplete >> ajaxStop

序列化

1.param[序列化一个 key/value 对象]
2.serialize[通过序列化表单值,创建 URL 编码文本字符串]
3.serializeArray[通过序列化表单值来创建对象数组(名称和值)]

例:param()

var params = { a:1, b:2 };
var str = $.param(params);
console.log(str);
//a=1&b=2"

例:serialize()

<form>
  <div><input type="text" name="a" value="1"/></div>
  <div><input type="text" name="b" value="2"/></div>
  <div><input type="hidden" name="c" value="3"/></div>
</form>
<script type="text/javascript">
  $('form').submit(function() {
   console.log($(this).serialize());
   //a=1&b=2&c=3
   return false;
  });
</script>

例:serializeArray()

<form>
  First:<input type="text" name="First" value="1" /><br />
  Last :<input type="text" name="Last" value="2" /><br />
</form>
<script type="text/javascript">
  $('form').click(function(){
    x=$("form").serializeArray();
    console.log(x);
    //{[name:First,value:1],[name:Last,value:2]}
  });
</script>

ajax链式编程方法
在开发的过程,经常会遇到一些耗时间的操作,比如ajax读取服务器数据(异步操作),遍历一个很大的数组(同步操作)。不管是异步操作,还是同步操作,总之就是不能立即得到结果,JS是单线程语音,不能立即得到结果,便会一直等待(阻塞)。

一般的做法就是用回调函数(callback),即事先定义好一个函数,JS引擎不等待这些耗时的操作,而是继续执行下面的代码,等这些耗时操作结束后,回来执行事先定义好的那个函数。如下面的ajax代码:

$.ajax({
  url: "test.html",
  success: function(){
    console.log("success");
  },
  error: function(){
    console.log("error");
  }
});

但这样写不够强大灵活,也很??隆N?耍?Query1.5版本引入Deferred功能,为处理事件回调提供了更加强大而灵活的编程模式。

$.ajax("test.html")
.done(
  function(){
    console.log("success");
  }
)
.fail(
  function(){
    console.log("error");
  }
);

不就是链式调用嘛,有何优点?

优点一:可以清晰指定多个回调函数

function fnA(){...}
function fnB(){...}
$.ajax("test.html").done(fnA).done(fnB);

试想一下,如果用以前的编程模式,只能这么写:

function fnA(){...}
function fnB(){...}
$.ajax({
  url: "test.html",
  success: function(){
    fnA();
    fnB();
  }
});

优点二:为多个操作指定回调函数

$.when($.ajax("test1.html"), $.ajax("test2.html"))
.done(function(){console.log("success");})
.fail(function(){console.log("error");});

用传统的编程模式,只能重复写success,error等回调了。

Javascript 相关文章推荐
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
Extjs学习笔记之七 布局
Jan 08 Javascript
js 编程笔记 无名函数
Jun 28 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
js转html实体的方法
Sep 27 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
微信小程序实现发红包功能
Jul 11 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
javascript关于继承解析
May 10 #Javascript
JavaScript继承学习笔记【新手必看】
May 10 #Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 #Javascript
深入剖析JavaScript:Object类型
May 10 #Javascript
JavaScript的React Web库的理念剖析及基础上手指南
May 10 #Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 #Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 #Javascript
You might like
php5.2.0内存管理改进
2007/01/22 PHP
PHP 中的批处理的实现
2007/06/14 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
Python迭代器和生成器介绍
2015/03/06 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
Django自定义用户认证示例详解
2018/03/14 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
怎样在程序里获得一个空指针
2015/01/24 面试题
必须要使用游标的SQL语句有那些
2012/05/07 面试题
如何开发一个JQuery插件
2016/07/28 面试题
最新奶茶店创业计划书
2014/01/25 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
会议接待欢迎标语
2014/10/08 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书