使用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 相关文章推荐
用JS剩余字数计算的代码
Jul 03 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
js获取图片宽高的方法
Nov 25 Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
vue 组件高级用法实例详解
Apr 11 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
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
第六节--访问属性和方法
2006/11/16 PHP
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
PHP 一个随机字符串生成代码
2010/05/26 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
python 提取文件的小程序
2009/07/29 Python
python基于右递归解决八皇后问题的方法
2015/05/25 Python
python中enumerate函数遍历元素用法分析
2016/03/11 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
介绍一下Ruby的特点
2013/01/20 面试题
医院工作检讨书范文
2014/02/10 职场文书
关爱留守儿童标语
2014/06/18 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
退税申请报告怎么写
2015/05/18 职场文书
golang 实用库gotable的具体使用
2021/07/01 Golang
Docker安装MySql8并远程访问的实现
2022/07/07 Servers