第6章 jQuery的Ajax操作ppt课件.ppt

《第6章 jQuery的Ajax操作ppt课件.ppt》由会员分享，可在线阅读，更多相关《第6章 jQuery的Ajax操作ppt课件.ppt（130页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、在此输入您的封面副标题第6章 jQuery的Ajax操作第6章 jQuery的Ajax操作Ajax相关概念Ajax事件及相关设置常用Ajax方法图书管理系统 学习目标熟悉掌握掌握熟悉jQuery中常用Ajax方法12掌握jQuery中Ajax的全局事件掌握jQuery中序列化元素的方式3 目录jQuery的Ajax操作6.26.26.16.1Ajax简介Ajax底层操作6.36.3点击查看本小节知识架构点击查看本小节知识架构点击查看本小节知识架构 目录【案例】图书管理系统6.56.56.46.4序列化表单点击查看本小节知识架构点击查看本小节知识架构 知识架构6.1 Ajax简介简介1什么是Aj

2、ax2搭建WampServer服务器3在HBuilder中配置WampServer服务器 知识架构6.2 自定义动画方法自定义动画方法1加载HTML内容2发送GET和POST请求3数据格式处理4获取JSON数据5获取JavaScript代码并执行 知识架构6.3 Ajax底层操作底层操作1$.ajax()的基本使用2Ajax相关事件3Ajax全局配置 知识架构6.4 序列化表单序列化表单1表单序列化为字符串2表单序列化为对象 知识架构6.5 图书管理系统图书管理系统1功能介绍2系统设计3用户界面4查询图书5新增和修改图书6删除图书 6.1 Ajax简介什么是AjaxAjax：全称是Asynch

3、ronous Javascript And XML，即异步的 JavaScript 和XML。 用途用途：在JavaScript、DOM、服务器配合下，浏览器向服务器发出异步请求。特点特点：p 异步回调函数； p Ajax不是一门新的编程语言，而是一种Web应用程序技术 6.1 Ajax简介什么是Ajax传统网页和Ajax技术与服务器通信形式：传统方式传统方式Ajax方式方式 6.1 Ajax简介什么是Ajax相较于传统网页，使用相较于传统网页，使用Ajax技术具有以下几点优势：技术具有以下几点优势：pAjax请求相对请求数据量少pAjax请求请求分散，不会集中爆发p请求数据时页面不刷新，用户

4、体验良好 6.1 Ajax简介搭建WampServer服务器下载下载WampServer下载地址下载地址：WampServer官方网站（http:/）安装安装：按照软件安装提示完成安装工作 6.1 Ajax简介搭建WampServer服务器访问站点目录访问站点目录：通过地址“http:/localhost”访问服务器的默认站点设置站点目录设置站点目录：通过修改文件httpd-vhosts.conf设置默认站点更改站点目录：将下述配置中的“c:/wamp/www”都替换为站点文件目录 DocumentRoot c:/wamp/www 6.1 Ajax简介在HBuilder中配置WampServe

5、r服务器打开HBuilder开发工具，在“外置Web服务器”选项下单击“新建”按钮，即可创建新的Web服务器 6.1 Ajax简介在HBuilder中配置WampServer服务器设置新的设置新的Web服务器：服务器：在HBuilder窗口中，打开“设置Web服务器” 单击“新建”按钮，即可创建新的Web服务器 6.2 jQuery的Ajax操作加载HTML内容load方法的基本使用：方法的基本使用：用途用途：请求HTML内容，并将获得的数据替换到指定元素的内容中语法语法：load(url, data, callback);参数参数： url - 必需，规定加载资源的路径；data - 可选，

6、发送至服务器的数据；callback - 可选，请求完成时执行的函数。 $( #box ).load( target.html);将路径对应的文件内容插入到$(#box)中 6.2 jQuery的Ajax操作加载HTML内容load方法的方法的url中对文档内容做筛选：中对文档内容做筛选：如果路径后有选择器，会将文档中的内容按照选择器描述的规则选择出相应的内容插入到执行元素中。 $(#box).load( target.html); $(#box).load( target.html h3); 6.2 jQuery的Ajax操作加载HTML内容load方法向服务器发送数据：方法向服务器发送数据

7、：如果传入数据作为第二个参数，会将该数据发送至服务器中。服务器端通过获取浏览器发来的数据，经过逻辑判断后返回相应内容。如下图：第一个参数为请求路径，第二个参数是发送至服务器数据。 $(#box).load( register.php , username: 小明, password: 18 ) ;路径数据 6.2 jQuery的Ajax操作加载HTML内容服务器端通过获取浏览器发来的数据，经过逻辑判断后返回相应内容，如下图：服务器端通过$_ REQUEST获取浏览器发来的数据，并将数据加工成文档内容返回至服务器。 注册成功 用户名： 密码： 6.2 jQuery的Ajax操作加载HTML内容l

8、oad方法的回调函数：方法的回调函数：用途用途：在请求成功后执行的函数参数参数：responseData - 请求得到的数据；status - 请求状态；xhr - 请求对应的XMLHttpRequest对象; $(#box).load(target.html, function(responseData, status, xhr) console.log(responseData);/ 输出请求得到的数据 console.log(status);/ 输出请求状态 console.log(xhr);/ 输出XMLHttpRequest对象) 6.2 jQuery的Ajax操作发送GET和POS

9、T请求$.get()方法的基本使用：方法的基本使用：用途用途：按照GET方式与服务器通信语法语法：$.get(url, data, function(data, status, xhr), dataType);参数参数： p url - 必需，规定加载资源的路径；p data - 可选，发送至服务器的数据；p function(data, status, xhr) - 可选，请求完成时执行的函数；p dataType - 可选，预期的服务器响应的数据类型 6.2 jQuery的Ajax操作发送GET和POST请求function(data, status, xhr)：请求成功时执行的函数p d

10、ata表示从服务器返回的数据；p status表示请求的状态值；p xhr表示当前请求相关的XMLHttpRequest对象； 6.2 jQuery的Ajax操作 $.get(target.html, function(data) $(#box).html(data); /通过data参数得到取得的数据 , html);发送GET和POST请求使用使用$.get()方法请求数据：方法请求数据：传入路径作为第一个参数，即向服务器请求数据，并在回调函数中获取数据。 6.2 jQuery的Ajax操作 var userData = username: 小明, password: 123456; $.

11、get(register.php, userData, function(data) $(#box).html(data); , html);发送GET和POST请求使用使用$.get()方法发送数据：方法发送数据：需要使用第二参数来传递数据。 6.2 jQuery的Ajax操作发送GET和POST请求$.post()方法的基本使用：方法的基本使用：用途用途：按照POST方式与服务器通信语法语法：$. post(url, data, function(data, status, xhr), dataType);参数参数：p url - 必需，规定加载资源的路径；p data - 可选，发送至服

12、务器的数据；p function(data, status, xhr) - 可选，请求完成时执行的函数；p dataType - 可选，预期的服务器响应的数据类型； 6.2 jQuery的Ajax操作发送GET和POST请求function(data, status, xhr)：请求成功时执行的函数参数：参数：p data表示从服务器返回的数据p status表示请求的状态值p xhr表示当前请求相关的XMLHttpRequest对象 6.2 jQuery的Ajax操作发送GET和POST请求$.get()方法和方法和$.post()方法使用方式完全相同，不同的地方有：方法使用方式完全相同，不

13、同的地方有：p 请求方式不同，$.get()方法为GET方式，$.post()方法为POST方式p 传入路径作为第一个参数，即向服务器请求数据，并在回调函数中获取数据。 6.2 jQuery的Ajax操作 var userData = username: 小明, password: 123456; $.get(register.php, userData, function(data) $(#box).html(data); , html);发送GET和POST请求使用使用$.get()方法发送数据：方法发送数据：需要使用第二参数来传递数据 6.2 jQuery的Ajax操作加载数据 $(#b

14、tn).click(function() $.get(target.html, function(data) $(#box).html(data); , html); );发送GET和POST请求使用使用$.get()方法请求数据方法请求数据： 6.2 jQuery的Ajax操作发送GET和POST请求$.get()方法和方法和$.post()方法的区别：方法的区别：p 发送数据的方式不同：发送数据的方式不同：GET方式作为URL参数发送至服务器，POST方式作为请求实体发送至服务器将。p 发送数据的内容大小不同：发送数据的内容大小不同： GET方式在2KB到8KB之间，POST方式理论上内容

15、大小没有限制。p 数据的安全性：数据的安全性：GET方式将数据作为查询字符串加在了请求地址后面，较容易被他人读取。POST方式将数据作为请求实体发送，所以更为安全。 数据格式处理数据格式概述：数据格式概述：服务器返回的数据，会遵循一种规范的数据格式，如XML、JSON和TEXT等。通过数据格式来保存数据，可以确保JavaScript程序能够正确解析、识别这些数据。jQuery中针对不同的数据格式会采取不同的处理方式，接下来将介绍目前最常见的XML、JSON和TEXT这3种数据格式的处理方式。6.2 jQuery的Ajax操作 数据格式处理XML数据格式：数据格式：XML采用双标签嵌套来记录信息

16、，文件格式类似于HTML文档。 JavaScript高级程序设计 78.20 扎卡斯 .6.2 jQuery的Ajax操作 数据格式处理使用使用$.get()方法获取方法获取XML数据格式：数据格式：控制台中输出了从服务器获取的数据，获取到的数据是文档对象。 $.get(target.xml, function(data) console.log(data);, xml); 6.2 jQuery的Ajax操作 6.2 jQuery的Ajax操作数据格式处理 $.get(target.xml, function(data, status, xhr) var html = ; $(data).fi

17、nd(book).each(function(index, ele) html += ; $(ele).children().each(function(index, ele) html += + $(ele).text() + ; ); html += ; ); $(#dataTable).append(html); /将拼合的数据插入到指定元素中 , xml); 解析XML数据 6.2 jQuery的Ajax操作数据格式处理在实际开发中，在实际开发中， XML数据格式的优点在于：数据格式的优点在于：p 可以轻松的跨平台应用，便于信息的检索，p 同时具有很强的可扩展性。p 但相比JSON格式

18、，在提取信息时较为不便。 6.2 jQuery的Ajax操作数据格式处理JSON数据格式：数据格式：一种key/value（键值对）数据格式，类似于JavaScript的对象格式。它的优势在于，能被处理成对象，方便获取信息字段。 name: JavaScript高级程序设计, author: 扎卡斯,price: 78.20, name: HTML5移动Web开发, author: 黑马程序员,price: 39.50, name: MongoDB设计模式, author: 科普兰,price: 28.40target.json 注意注意需要注意的是，JSON数据格式要求键名必须使用双引号包裹

19、。6.2 jQuery的Ajax操作数据格式处理 6.2 jQuery的Ajax操作数据格式处理获取获取JSON数据格式：数据格式：控制台中输出了从服务器获取的数据，获取到的数据是元素为对象的数组。 $.get(target.json, function(data) console.log(data);, json); 6.2 jQuery的Ajax操作数据格式处理 $.get(target.json, function(data) var html = ; for (var i = 0; i data.length; +i) html += ; for (var key in datai)

20、html += + dataikey + ; html += ; $(#dataTable).append(html);, json);JSON数据以对象的形式获取相应信息 6.2 jQuery的Ajax操作数据格式处理TEXT数据格式：数据格式：TEXT数据格式就是最基本的字符串。在在jQuery中中得到这部分字符串之后，可以通过一定的处理方式，将信息处理成需要的形式。 6.2 jQuery的Ajax操作数据格式处理获取获取TEXT数据格式：数据格式：控制台中输出了从服务器获取的数据，获取到的数据是字符串。 $.get(target.txt, function(data) console.l

21、og(data);, text); 6.2 jQuery的Ajax操作数据格式处理处理处理TEXT数据格式：数据格式：使用JSON.parse()方法可以把具有对象格式的字符串转化为成为对象。 $.get(target.txt, function(data) console.log(JSON.parse(data);, text); 6.2 jQuery的Ajax操作获取JSON数据$.getJSON()方法的使用：方法的使用：用途用途：获取JSON数据语法语法： $.getJSON(url, data, callback);参数参数： p url - 必需，规定加载资源的路径；p data

22、- 可选，发送至服务器的数据；p callback - 可选，请求完成时执行的函数； 6.2 jQuery的Ajax操作 $.getJSON(target.json, function(data, statu, xhr) var html = ; for (var book in data) html += ; for (var key in databook) html += + databookkey + ; html += ; $(#dataTable).append(html););使用$.getJSON()方法时不用传入数据类型参数获取JSON数据 6.2 jQuery的Ajax操作

23、跨域请求相关概念：跨域请求相关概念：跨域跨域：在网络中，协议、域名、端口号有任何一个不同都属于都属于不同的域。而跨域就是指一个域的页面请求另外一个域的资源。同源策略同源策略：出于安全考虑，浏览器限制了跨域行为，只允许页面访问本域的资源 获取JSON数据 6.2 jQuery的Ajax操作p模拟实现模拟实现JSONP跨域请求：跨域请求：p通过变量$callback接收来自URL参数中的callback回调函数名；p对变量进行了字符串拼接，拼接结果为“回调函数名(123)；”p“123”是返回给浏览器的数据，实际开发时根据需求换成其他数据；p“回调函数名(123);”是函数调用的形式，如果页面中已

24、经存在“回调函数名”的函数，则会通过参数传递而得到数据“123”； $callback = $_GETcallback;echo $callback(123);获取JSON数据 6.2 jQuery的Ajax操作通过浏览器访问http:/localhost/chapter06/jsonp.php?callback=testtest(123)：是函数执行的写法规则，如果页面上已经存在test函数，并将此字符串作为代码来执行，则页面上的test函数会接收到服务器传来的数据123 获取JSON数据 6.2 jQuery的Ajax操作使用使用$.getJSON进行跨域请求：进行跨域请求：在请求地址后添

25、加“callback=?”即可实现跨域 var url = http:/localhost/chapter06/jsonp.php?callback=?;$.getJSON(url, function(data) console.log(data););使用$.getJSON跨域请求jsonp.php获取JSON数据 6.2 jQuery的Ajax操作jQuery对跨域的处理：对跨域的处理：Network面板，可以看到$.getJSON()发送的URL参数。$.getJSON()发送了两个URL参数，分别是“callback”和“_”，第1个参数是自动生成的回调函数名，第2个参数用于解决Aja

26、x缓存问题。 获取JSON数据 6.2 jQuery的Ajax操作不作跨域设置时跨域请求出错误：不作跨域设置时跨域请求出错误：将URL参数callback删除后，通过浏览器访问测试，会看到跨域请求失败的错误提示。 获取JSON数据 6.2 jQuery的Ajax操作获取JavaScript代码并执行 $.getScript()方法的使用：方法的使用：用途用途：获取JavaScript代码并执行语法语法： $.getScript(url, data, callback);参数参数： p url - 必需，规定加载资源的路径；p data - 可选，发送至服务器的数据；p callback - 可

27、选，请求完成时执行的函数； 6.2 jQuery的Ajax操作 案例演示：案例演示：使用$.getScript()方法获取createEle.js文件，利用其创建元素。createEle.js function createEle(tagName, styleOptions) var newEle = document.createElement(tagName); for (var key in styleOptions) newEle.stylekey = styleOptionskey; return newEle;获取JavaScript代码并执行 6.2 jQuery的Ajax操作

28、获取createEle.js文件，创建蓝色div $.getScript(lib/createEle.js,function() var styleObj = width: 100px, height: 100px, background: blue ; var divBox = createEle(div, styleObj); $(body).append(divBox););获取JavaScript代码并执行 6.3 Ajax的底层操作$.ajax()的基本使用 $.ajax()相关概念：相关概念：用途用途：jQuery中所有Ajax方法都是基于该方法实现，是jQuery中最底层Ajax

29、方法，可用于实现任何形式的Ajax请求。语法语法： $.ajax(options) 或$.ajax(url, options)；参数参数： p url - 必需，规定加载资源的路径；p options - 对象，该对象将Ajax请求需要的设置包含在属性中； 6.3 Ajax的底层操作$.ajax()的基本使用 jQuery.each( get, post , function( i, method ) jQuery method = function( url, data, callback, type ) if ( jQuery.isFunction( data ) ) type = typ

30、e | callback;callback = data;data = undefined; return jQuery.ajax ( url: url,type: method,dataType: type, data: data,success: callback ); ;);封装$.get()、$.post()方法使用$.ajax()方法实现功能使用$.ajax()方法封装$.get()、$.post()方法 6.3 Ajax的底层操作$.ajax()的基本使用$.ajax()方法部分参数：方法部分参数：参数参数描述描述url请求地址，默认是当前页面data发送至服务器的数据xhr用于创

31、建XMLHttpRequest对象的函数callback请求完成时执行的函数dataType预期的服务器响应的数据类型 实现实现Ajax的基本操作：的基本操作：分别通过$.get()方法、 $.ajax()方法请求HTML文件 / 利用$.get()方法实现$.get(target.html,function(data) $(#box).html(data); , html); / 利用$.ajax()方法实现$.ajax( url: target.html, success: function(data) $(#box).html(data); , dataType: html);$.aja

32、x()的基本使用6.3 Ajax的底层操作 实现跨域请求：实现跨域请求：分别通过$. getJSON()方法、 $.ajax()方法实现跨域请求 /使用$.getJSON()方法实现跨域请求$.getJSON(http:/localhost/chapter06/jsonp.php?callback=?, function(data) console.log(data); );$.ajax()的基本使用6.3 Ajax的底层操作 实现跨域请求：实现跨域请求：分别通过$. getJSON()方法、 $.ajax()方法实现跨域请求 /使用$.ajax()方法实现跨域请求$.ajax( url: h

33、ttp:/localhost/chapter06/jsonp.php, dataType: jsonp, jsonp: callback, success: function(data) console.log(data); );表示发出JSONP请求时指定参数名称，形如“callback=?”6.3 Ajax的底层操作$.ajax()的基本使用 全局事件：全局事件：概述概述：全局事件会被页面上任意一个Ajax请求触发，当Ajax请求达到了某个请求过程时，就会触发相应的全局事件。语法语法：$(document).事件名(fn);参数参数：fn是事件触发时执行的回调函数，在使用时，不同事件的回调

34、函数会接收到不同的参数。Ajax相关事件6.3 Ajax的底层操作 全局事件参数：全局事件参数： event表示当前事件对象，xhr表示与请求对应的XMLHttpRequest对象，options表示触发该事件的请求的各项配置，ex表示请求发生错误时的错误描述信息。Ajax相关事件6.3 Ajax的底层操作事件方法事件方法描述描述ajaxStart(fn()请求开始时ajaxStop(fn()请求结束时ajaxSuccess(fn(event,xhr,options)请求成功时ajaxError(fn(event,xhr,options,ex)请求发生错误时ajaxSend(fn(event,

35、xhr,options)请求发送前 注意注意Ajax的全局事件在jQuery1.8版本之前可绑定在普通DOM对象上，而在jQuery1.8版本之后只能绑定在文档对象document上。Ajax相关事件6.3 Ajax的底层操作 Ajax相关事件6.3 Ajax的底层操作 用户名： 密码： 提交数据 状态： 返回数据：form获取用户数据，table显示请求状态、返回数据 全局事件：通过一个案例演示全局事件的使用Ajax相关事件6.3 Ajax的底层操作 $(#btn).click(function() var userData = username: $(#username).val(), p

36、assword: $(#password).val() ; $.post(register.php, userData, function(data) $(#data).html(data); ););单击按钮时获取用户输入数据，发出请求 全局事件：全局事件：jQuery分别绑定了ajaxStart和ajaxStop事件，请求开始和结束时分别给id为status的元素设置不同的内容，表示事件被触发。Ajax相关事件6.3 Ajax的底层操作 $(document).ajaxStart(function() $(#status).html(数据提交中););$(document).ajaxSto

37、p(function() / 弹出警告框时会暂停脚本，此时可观察状态文本 alert(测试); $(#status).html(数据已提交);); 全局事件：全局事件：在Ajax请求开始时，触发ajaxStart事件，将id为status的元素的内容设置为“数据提交中”。在请求结束后，又将该元素的内容设置为“数据已提交”，并在id为data的元素中填入获得的数据。Ajax相关事件6.3 Ajax的底层操作 全局事件：全局事件：加载过快无法观察到状态文本变化，设置弹出框来中断程序运行，则可观察到状态文本为“数据提交中”，关闭警告框，状态文本变为“数据已提交”。Ajax相关事件6.3 Ajax的底

38、层操作 局部事件：局部事件：概述概述：Ajax的局部事件只与某一个具体请求相关，在指定请求的对应时间节点才能被触发。语法语法：通过$.ajax()方法中参数对象来设置Ajax相关事件6.3 Ajax的底层操作 局部事件：局部事件：参数：xhr表示该请求对应的Ajax对象；result表示从服务器返回的数据；status表示错误信息；error表示请求错误描述。Ajax相关事件6.3 Ajax的底层操作事件方法事件方法描述描述beforeSend(xhr)发送请求前执行的函数success(result,status,xhr)请求成功时执行的函数error(xhr,status,error)请求

39、失败时执行的函数complete(xhr,status)请求完成时运行的函数（请求成功或失败时都会调用，顺序在success和error 函数之后）beforeSend(xhr)发送请求前执行的函数 局部事件：局部事件：演示局部事件的设置方式，同时对比其和全局事件的区别demo6-10.html 文档结构：id名为“btn1”和“btn2”的按钮Ajax相关事件6.3 Ajax的底层操作 发送请求1发送请求2 局部事件：局部事件：演示局部事件的设置方式，同时对比其和全局事件的区别Ajax相关事件6.3 Ajax的底层操作 $(#btn1).click(function() $.ajax(typ

40、e: get, url: register.php, complete: function() console.log(请求1-局部事件-complete); ););$(#btn2).click(function() $.ajax(type: get, url: register.php, complete: function() console.log(请求2-局部事件-complete); ););分别绑定Ajax局部事件 局部事件：局部事件：演示局部事件的设置方式，同时对比其和全局事件的区别demo6-10.html 页面行为：绑定Ajax全局事件Ajax相关事件6.3 Ajax的底层

41、操作 $(document).ajaxComplete(function() console.log(全局事件-complete);); 局部事件：局部事件：演示局部事件的设置方式，同时对比其和全局事件的区别单击两个按钮后观察发现：单击两个按钮后观察发现：p 请求执行时，只会触发自身的局部事件p 任意请求执行时，都会触发全局事件Ajax相关事件6.3 Ajax的底层操作 多多学学一一招招Ajax错误处理jQuery提供的Ajax方法，允许在发送请求后再对结果进行处理。例如，在调用$.post()方法后，链式调用done()、fail()和always()方法。$.post(register.p

42、hp, function() console.log(success);).done(function() console.log(done);).fail(function() console.log(fail);).always(function() console.log(always); );6.3 Ajax的底层操作 多多学学一一招招Ajax错误处理在请求成功时：在请求成功时：$.post()方法的回调函数的执行时机，早于done()方法的回调函数。由于请求过程中没有发生错误，因此fail()方法的回调函数没有执行。6.3 Ajax的底层操作 多多学学一一招招Ajax错误处理在请求失

43、败时：在请求失败时：$.post()方法、done()方法的回调函数没有执行，fail()方法的回调函数执行了。因此，在开发中可以将错误处理的操作放在fail()方法的回调函数中。6.3 Ajax的底层操作 Ajax全局配置6.3 Ajax的底层操作全局配置：全局配置：概述概述：对所有的Ajax请求的相关参数进行统一的设置语法语法：$.ajaxSetup()、$.ajaxPrefilter()目的目的：减少代码冗余 Ajax全局配置6.3 Ajax的底层操作$.ajaxSetup() ：概述概述：为Ajax请求设置默认参数值，该方法设置的参数值适用于所有的Ajax请求。语法语法：$.ajaxS

44、etup(options) 参数参数： options参数的使用方法与$.ajax()完全相同 Ajax全局配置6.3 Ajax的底层操作通过一个案例演示通过一个案例演示$.ajaxSetup()的使用的使用：demo6-11.html 文档内容：id名为“btn1”和“btn2”的按钮 发送请求1发送请求2 通过一个案例演示通过一个案例演示$.ajaxSetup()的使用的使用：demo6-11.html 页面行为：使用进行Ajax全局设置6.3 Ajax的底层操作 $.ajaxSetup( type: post, url: register.php, data: username: btn

45、1, password: 1);Ajax全局配置 通过一个案例演示通过一个案例演示$.ajaxSetup()的使用的使用：demo6-11.html 页面行为：页面行为：分别为id为btn1和btn2的两个按钮绑定单击事件，在事件触发时发出Ajax请求。6.3 Ajax的底层操作 $(#btn1).click(function() $.ajax(););$(#btn2).click(function() $.ajax(data: username: btn2, password: 2););Ajax全局配置 单击单击id名为名为“btn1”的元素得到结果为：的元素得到结果为：请求地址为“reg

46、ister.php”，请求类型为“post”，发送的数据为“username: btn1, password: 1”，数据和$.ajaxSetup()方法设置的参数默认值相同。6.3 Ajax的底层操作Ajax全局配置 单击单击id名为名为“btn2”的元素得到结果为：的元素得到结果为：除了发送的数据不同，请求地址和请求方式都与$.ajaxSetup()设置的默认参数值相同。由此可见，在发出请求时方法设置的参数会覆盖方法设置的参数会覆盖$.ajaxSetup()方法设置的参数方法设置的参数默认值默认值。6.3 Ajax的底层操作Ajax全局配置 Ajax全局配置6.3 Ajax的底层操作$.a

47、jaxPrefilter()：概述概述：预先处理Ajax参数，回调函数会在Ajax请求发出的之前，重新处理Ajax参数。语法语法： $.ajaxPrefilter(dataType, handler(options, originalOptions, xhr) 参数参数： options参数的使用方法与$.ajax()完全相同 Ajax全局配置6.3 Ajax的底层操作$.ajaxPrefilter()参数：参数：参数参数描述描述dataType需要处理何种请求数据类型的Ajaxhandler对Ajax参数选项预处理的函数参数参数描述描述options当前Ajax请求的所有参数选项origin

48、alOptions给$.ajax()方法的未经修改的参数选项xhr当前请求的XMLHttpRequest对象回调函回调函数数handler参数：参数： Ajax全局配置6.3 Ajax的底层操作通过一个案例演示通过一个案例演示$.ajaxPrefilter()的使用的使用：demo6-12.html 文档内容：id名为“btn1”和“btn2”的按钮 发送请求1发送请求2 6.3 Ajax的底层操作 $.ajaxPrefilter(html, function(option) option.url += ?username=xiaoming&password=123456;);Ajax全局配置

49、通过一个案例演示通过一个案例演示$.ajaxPrefilter()的使用的使用：demo6-12.html 文档内容：使用$.ajaxPrefilter()方法处理请求数据类型为“html”的Ajax请求，在请求地址的后面追加了查询字符串“?username=xiaoming&password=123456”。 6.3 Ajax的底层操作 $(#btn1).click(function() $.ajax(url: register.php, dataType: html););(#btn2).click(function() $.ajax(url: target.json, dataType:

50、 json););Ajax全局配置通过一个案例演示通过一个案例演示$.ajaxPrefilter()的使用的使用：demo6-12.html 文档内容：分别为id为“btn1”和“btn2”的按钮绑定单击事件，并在事件方法中发送Ajax请求，分别请求不同类型的文件 单击单击“发送请求发送请求1”按钮，发送的请求如下图：按钮，发送的请求如下图：从图中可以看出，经过$.ajaxPrefilter()处理后，在请求地址后面追加了相应的字符串。6.3 Ajax的底层操作Ajax全局配置 单击单击“发送请求发送请求2”按钮，发送的请求如下图：按钮，发送的请求如下图：请求地址并没有发生改变。原因在于当前请