使用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下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
Javascript学习笔记2 函数
Jan 11 Javascript
用dtree实现树形菜单 dtree使用说明
Oct 17 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
Angular实现form自动布局
Jan 28 Javascript
javascript正则表达式之分组概念与用法实例
Jun 16 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
Vue header组件开发详解
Jan 26 Javascript
vue弹窗组件的实现示例代码
Sep 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/10/09 PHP
PHP 之Section与Cookie使用总结
2012/09/14 PHP
php创建sprite
2014/02/11 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
python批量修改图片大小的方法
2018/07/24 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
路政管理专业推荐信
2013/11/11 职场文书
有个性的自我评价范文
2013/11/15 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
大学生求职计划书
2014/04/30 职场文书
供应链金融服务方案
2014/05/25 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
Win11 引入 Windows 365 云操作系统,适应疫情期间混合办公模式:启动时直接登录、模
2022/04/06 数码科技