jQuery系列 第八章 jQuery框架Ajax模块
第八章 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>
- Posted by 博客园·文顶顶 ~ 文顶顶的个人博客_花田半亩
- 联系作者 简书·文顶顶 新浪微博·文顶顶
- 原创文章,版权声明:自由转载-非商用-非衍生-保持署名 | 文顶顶
jQuery系列 第八章 jQuery框架Ajax模块相关推荐
- jQuery源码 Ajax模块分析
写在前面: 先讲讲ajax中的相关函数,然后结合函数功能来具体分析源代码. 相关函数: >>ajax全局事件处理程序 .ajaxStart(handler) 注册一个ajaxStart事件 ...
- JQuery系列(4) - AJAX方法
jQuery对象上面还定义了Ajax方法($.ajax()),用来处理Ajax操作.调用该方法后,浏览器就会向服务器发出一个HTTP请求. $.ajax方法 $.ajax()的用法主要有两种. $.a ...
- jQuery系列(十四):jQuery中的ajax
1.什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下,AJAX通过后台加载数据,并在 ...
- jQuery系列 第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
- jQuery系列 第六章 jQuery框架事件处理
第六章 jQuery框架事件处理 JavaScript以事件驱动来实现页面的交互,其核心是以消息为基础,以事件来驱动.虽然利用传统的JavaScript事件处理方式也能够完成页面交互,但jQuery框 ...
- Vue.js ( 比JQuery更加精简的前端框架)
Vue.js简介 什么是 Vue 什么是 Vue? 考虑这个需求: 我们要把一个 json对象的数据,显示到一个元素上去. 如果不使用 Vue, 那么就会用到 JS 或者 JQuery,通过操作 H ...
- mvc 一般注释_使用带有注释和JQuery的Spring MVC 3的Ajax
mvc 一般注释 与Ajax一起工作对我来说一直很有趣! 是不是 ? 我将使您轻松将Ajax与Spring MVC 3和JQuery结合使用. 这篇文章将向您说明如何在工业编码的现实生活中使用Ajax ...
- 使用带有注释和JQuery的Spring MVC 3的Ajax
与Ajax一起工作对我来说一直很有趣! 是不是 ? 我将使您轻松将Ajax与Spring MVC 3和JQuery结合使用. 这篇文章将向您说明如何在工业编码的现实生活中使用Ajax. 和往常一样,我 ...
- jQuery系列之目录汇总
一:jQuery基础系列: jQuery温习篇---强大的JQuery选择器 jQuery之工具函数 jQuery之筛选函数 jQuery1.4.2新特性(翻译) jQuery Ajax 回顾 jQu ...
最新文章
- Python基于statsmodels包构建多元线性回归模型:模型构建、模型解析、模型推理预测
- 你必须会的--Dijkstra算法--单源最短路径问题
- getChars的用法
- Core Location :⽤用于地理定位
- 癌中之王:基质微环境塑造胰腺癌瘤内结构|Cell
- python post 远程主机强迫关闭了一个现有的连接_Python最强动态可视化库!
- 需要使用Git branch switch 的情况Git stash的使用时机
- labelimg如何调整框的颜色_新手如何快速做字幕?
- Linux sites
- excel缩字间距_excel字体间距紧缩
- C语言实现调用python绘图
- 嫌自己不够佛系?智能佛珠了解一下
- 40岁开始学习Android开发的我成了一名技术主管
- 解决“远程会话已断开连接,因为访问被拒绝导致许可证存储的创建失败,请使用提升的权限运行远程桌面客户端”问题...
- 【深度学习Deep Learning】资料大全
- KITTI数据集-百度云盘
- Cesium 源码分析 Material
- 《大话西游》你真的看懂了吗,kotlin命令行编译
- 2016年8月6日 星期六 --出埃及记 Exodus 16:6
- 如何部署一台云服务器并且和域名绑定
热门文章
- Exchange server 2010系列教程之五 浅谈Outlook 2010新功能
- 好用的DNS服务器及各自特点
- 疯狂鼹鼠 java,神话延续! 光滑镜面时尚MOTO轻薄W220详尽评测
- 寿命计算器测试软件,你还能活多久?这个“寿命计算器”可以给出答案
- AirFlow调度执行Talend ETL任务
- matlab循环卷积函数,一维卷积与循环卷积的使用(离散数据+具体例子)
- OFDM--IDFT实现
- 企业微信发送应用消息php,企业微信如何发送应用消息?及时发布重要通知
- 永磁同步电机转子磁链_无轴承永磁同步电机研究现状和未来发展趋势
- 2023东北农业大学计算机考研信息汇总