开发者社区> 文顶顶.> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery系列 第八章 jQuery框架Ajax模块

简介: 第八章 jQuery框架Ajax模块 8.1 jQuery框架中的Ajax简介 Ajax技术的核心是XMLHTTPRequest对象,该对象是Ajax实现的关键,发送异步请求、接收服务器端的响应以及执行回调等操作都是通过XMLHTTPRequest对象来完成的。
+关注继续查看

第八章 jQuery框架Ajax模块

8.1 jQuery框架中的Ajax简介

Ajax技术的核心是XMLHTTPRequest对象,该对象是Ajax实现的关键,发送异步请求、接收服务器端的响应以及执行回调等操作都是通过XMLHTTPRequest对象来完成的。

jQuery框架对Ajax操作进行了封装,在jQuery框架的Ajax模块中提供了很多方法用于网络编程。我们主要从Ajax网络请求、Ajax事件以及序列化等方面讲解。

8.2 jQuery框架中的Ajax网络请求

jQuery框架中为我们提供的发送网络请求方法主要有:

  • load方法
  • ajax方法
  • get方法
  • post方法
  • getScript方法
  • getJSON方法

① load方法

语法 jQ.load(url,[data],[callback])
参数

  • url 资源的请求路径
  • data 发送请求时提交的参数,支持查询字符串和JSON对象格式
  • callback 加载完成的回调函数,3形参为:响应体 + 状态 + 请求对象

说明该方法请求远程的资源,并插入到选中的jQ实例对象中。

注意

  • 默认发送GET请求,如果传递参数(JSON对象)则发送POST请求。
  • 支持对返回的数据进行筛选

代码示例

1 //01 直接加载文件中的数据
2 //默认发送的是GET请求
3 //$("#demo").load("php/test.html");
4 //02 加载文件中的数据,获取其中的某一部分(进行筛选)
5 //$("#demo").load("php/test.html span");
6 //参数在请求体中进行传递
7 $("#demo").load("php/test.html span",{"namme":"zs"});

② ajax方法

语法 $.ajax(url,[settings]) | $.ajax(settings)

常用参数说明

  • url 资源的请求路径
  • data 发送请求时提交的参数,支持查询字符串和JSON对象格式
  • async 是否异步发送网络请求
  • cache 是否进行缓存处理
  • context 指定回调函数中的this指针
  • dataType 预期服务器返回的数据类型
  • timeout 请求的超时时间
  • beforeSend 请求发送前执行的回调函数
  • complete 请求完成后执行的回调函数
  • error 请求失败执行的回调函数
  • success 请求成功执行的回调函数

说明该方法是jQuery框架中最底层的Ajax实现,用于发送网络请求。
注意

  • 最简单的情况下,$.ajax()可以不带任何参数直接使用。
  • 所有的选项都可以通过$.ajaxSetup()函数来进行全局设置。

代码示例

 1 $.ajax({
 2             "url":"php/03-ajax.php",  //设置请求路径
 3             "type":"get", //设置请求方法,不区分大小写
 4             "success":function (res,status,xhr) {  
 5                 //请求成功的回调
 6                 $("#demo").html(res); //获取响应状态码
 7                 console.log(status);  //获取请求的状态
 8                 console.log(xhr);     //获取请求对象本身
 9                 console.log(this);    //获取上下文
10             },
11             "error":function (res) {
12                 //请求失败的回调函数
13                 console.log("失败");
14                 console.log(res);
15             },  
16             //"data":"name=ls"    //参数:查询字符串形式
17             "data":{"name":"ls"}, //参数:JSON对象形式
18             "timeout":10,        //设置请求超时的时间 
19             statusText:timeout
20             "context":obj,    //设置回调函数中this的指向
21             "complete":function (res) {
22                 console.log("请求完成");
23                 console.log(res);
24             }
25         });

 

③ get和post方法

语法
[1]$.get(url,[data],[callback],[type])
[2]$.post(url,[data],[callback],[type])

参数

  • url 资源的请求路径
  • data 发送请求时提交的参数
  • callback 请求成功的回调函数
  • type 服务器端返回内容的格式:包括xml、html、json、script等

GET和POST对比

  • GET请求参数跟在URL后,POST请求参数作为请求体发送。
  • GET请求对参数大小有限制,而POST请求理论上不受限制。
  • GET请求的数据会被浏览器缓存,存在严重的安全性问题。
  • 服务器端读取数据的方式不同。在PHP中,区分为\$_GET和\$_POST。

代码示例

 1  //发送请求获取服务器返回的文本,把div的内容替换掉
 2  //第一个参数:url请求路径(必传)
 3  //第二个参数:参数 支持两种形式[查询字符串][JSON对象]
 4  //第三个参数:success(response,status,xhr)
 5  //         请求成功的回调
 6  //         response:服务器返回的响应体
 7  //         status:状态说明[success-error]
 8  //         xhr:请求对象
 9  //第四个参数:预期返回的数据类型:json|script|jsonP等
10  $.get("php/03-get.php",{"param1":"value1"},
11      function (response,status,xhr) {
12      console.log(response);
13      console.log(status);
14      console.log(xhr);
15  })
16 //注意点:GET请求请求路径一样会缓存,POST请求不会缓存
17  $.post("php/04-post.php",{"param1":"value1"},
18      function (response,status,xhr) {
19      console.log(response);
20      console.log(status);
21      console.log(xhr);
22  }) 

④ getScript和getJson方法

jQuery框架提供了getScript和getJson方法来直接加载js文件和JSON数据

语法

[1] $.getScript(url,[callBack])
[2] $.getJson(url,[callBack])

说明

  • getScript方法用于加载js文件,并自动执行。
  • getJson方法用于加载JSON数据。

代码示例

1 $.getScript("test.js", function(){
2      //加载完成后执行的回调函数
3       alert("加载并执行JS文件");
4 });

8.3 jQuery框架中的Ajax事件方法

jQuery框架中除了提供上述方法来发送网络请求外,还提供了一些事件方法来对调用Ajax方法过程中的HTTP请求进行精细控制。通过jQuery提供的一些自定义全局函数,能够为各种与Ajax相关的事件注册回调函数。jQuery的Ajax全局事件方法如下:

[1] ajaxStart(callBack) =>检测到网络请求开始发送会触发,1次
[2] ajaxStop(callBack) =>检测到网络请求结束会触发,1次
[3] ajaxSend(callBack) =>检测到网络请求开始发送会触发,N次
[4] ajaxComplete(callBack)=>检测到网络请求结束会触发,N次
[5] ajaxError(callBack) => 网络请求失败会触发
[6] ajaxSuccess(callBack) => 网络请求成功会触发

 1 $(document).ajaxStart(function () {
 2      console.log("第一个已经开始+++++");
 3      $("#demoID").show(1000);
 4 })
 5 $(document).ajaxStop(function () {
 6      console.log("最后一个已经结束+++++");
 7      $("#demoID").hide(1000);
 8 })
 9 $(document).ajaxSend(function () {
10      console.log("开始发送网络请求___");
11 })
12 $(document).ajaxComplete(function () {
13     console.log("发送网络请求完成___");
14 })
15 $.ajax({ //发送网络请求--A
16     "url":"php/06-other.php",
17     "type":"GET",
18     "success":function (res,status,xhr) {
19           console.log("网络请求成功--1");
20       }
21 })
22 $.ajax({  //发送网络请求--B
23     "url":"php/06-other.php",
24     "type":"GET",
25     "success":function (res,status,xhr) {
26           console.log("网络请求成功--2");
27       }
28 })
29 $(document).ajaxError(function () {
30     console.log("请求失败");
31 })
32 $(document).ajaxSuccess(function () {
33     console.log("请求成功");
34 })

8.4 jQuery框架中的序列化方法

在开发的时候,经常需要把表单中的数据作为网络请求的参数,如果一个一个的获取再拼接成查询字符串那么相当的麻烦,jQuery框架中为我们提供了两个对应的方法,可以方便解决该需求。

serialize方法能够将DOM元素内容序列化为查询字符串。
serializeArray方法可以将DOM元素序列化后返回JSON格式的数据。

代码示例

 1 <body>
 2 <form>
 3     <input type="text" name="username" id="demo1">
 4     <input type="text" name="password" id="demo2">
 5 </form>
 6 <button>按钮</button>
 7 <script>
 8     $("button").click(function () {
 9         $.ajax({
10             "url":"php/07-get.php",
11             //"data":"username="+$("#demo1").val()+"&password=" +$("#demo2").val(),
12             "data":$("form").serialize(),
13             "success":function (res) {
14                 console.log(res);
15             }
16         })
17         //把表单中的key-value按照固定的格式拼接为查询字符串:username=lisi&password=abcd
18         console.log($("form").serialize());
19         console.log($("form").serializeArray());
20         //[{"username":"zhangsan"},{"password":"123"}];
21     })
22 </script>
23 </body>

 

 


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【JQuery框架】五大选择器“全家桶”详解!!!
【JQuery框架】五大选择器“全家桶”详解!!!
71 0
jQuery系列 第四章 jQuery框架的选择器
第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎。它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名、属性名、状态等进行快速准确的选 择,而且不必担心浏览器的兼容性,写法更加简洁。
861 0
Dynatable – 基于 HTML5 & jQuery 的交互表格插件
  Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5 和 JSON 实现。Dynatable 的目的是提供一种简单的、可扩展的 API,能够轻松的浏览和操作大规模的数据集。
1228 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1064 0
40个非常实用的 jQuery 插件和免费教程【下篇】
  jQuery 是最流行的 JavaScript 库,拥有丰富的插件,能够帮助开发者简单快速的实现各种功能。本文收集了40个非常实用的 jQuery 插件及其制作教程,这些插件能够为你将来的项目增添各种很炫功能和效果,同时通过详细的制作教程帮助你更加深入的掌握 jQuery 库的使用。
764 0
40个新鲜出炉的 jQuery 插件和免费教程【上篇】
  作为最流行的 JavaScript 库,jQuery 拥有丰富的插件,能够帮助开发者简单快速的实现各种功能。但对于 Web 开发人员来说,他们需要掌握编写插件的方法,这样在工作中才能游刃有余。今天这篇文章收集了40个非常棒的 jQuery 插件及其制作教程,这些插件能够为你将来的项目增添各种很炫功能和效果,同时通过详细的制作教程帮助你更加深入的掌握 jQuery 库的使用。
954 0
推荐20款非常优秀的 jQuery 工具提示插件
  工具提示(Tooltip)在网站中的一个小功能,但却有很重要的作用,常用于显示一些温馨的提示信息。如果网站中的工具提示功能做得非常有创意的话能够加深用户对网站印象。因此,今天这篇文章向大家推荐的20款优秀的 jQuery Tooltip 插件就是用于帮助你制作漂亮的工具提示效果。
770 0
jquery插件整理篇(七)表格插件
(1)Flexigrid Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
899 0
推荐18款非常棒的 jQuery 表格插件
  我们一般都是用HTML表格来显示结构化数据,如今有很多的 jQuery 表格插件可以帮助我们更好的组织和控制表格数据,增强表格的功能和操作。今天要与大家分享的是18个非常优秀的 jQuery 表格插件,有用到朋友可以参考一下。
1347 0
+关注
文顶顶.
JavaScript专家、技术讲师 关注前端开发和移动端开发
196
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载