《JavaScript与jQuery网页前端开发与设计-第2版》课件 CH12 jQuery AJAX

JavaScript与jQuery

网页前端开发与设计-第2版学校名称：XXXX主讲教师：XXXX第12章jQueryAJAX技术 本章学习目标了解什么是AJAX以及AJAX技术的组成部分；了解什么是jQueryAJAX；掌握jQueryload()、get()、post()以及ajax()等常用方法的使用；掌握jQueryAJAX事件的用法。目录12.1jQueryAJAX简介12.2准备工作

12.3jQueryAJAX常用方法 12.4jQueryAJAX事件12.5阶段案例：简易单词查询12.1jQueryAJAX简介

12.1.1什么是AJAX12.1.2AJAX的实现原理

12.1.3jQueryAJAX 12.1.1什么是AJAXAJAX来源于英文词组AsynchronousJavaScriptandXML（异步JavaScript和XML）的首字母缩写，是一种可以与服务器异步交互数据的网页开发技术。该名称是在2005年2月首次出现，由AdaptivePath公司的JesseGarrett在Ajax:AnewapproachtoWebApplication一文中提到。使用AJAX技术可以在不重新加载整个页面的前提下直接更新当前页面中的指定内容，例如GoogleSuggest和GoogleMaps就是两种使用了AJAX技术的Web应用。12.1.1什么是AJAX事实上，AJAX是由多种当前主流的技术组合而成的，包含如下内容：使用XTHML和CSS进行标准化表达；使用DOM(DocumentObjectModel)实现动态展示和交互；使用XMLHttpRequest实现异步数据获取；使用JavaScript绑定所有技术综合应用。12.1.2AJAX的实现原理AJAX可以让浏览器和服务器端进行异步交互，其实现原理可以分成5个步骤，如下图所示。12.1.2AJAX的实现原理当网页页面需要显示从服务器端查询到的数据信息时，先使用JavaScript调用XMLHTTPRequest对象，该对象允许JavaScript向服务器端发出HTTP请求并且不阻塞用户。服务器收到请求后在自身后台处理请求并将响应结果返回给浏览器，其中有用的数据信息可以封装成文本、HTML、XML或JSON等形式发出，再由浏览器端解析数据包后获取里面的详细内容。最后，继续使用JavaScript操作HTMLDOM对象来直接更新页面中的内容，无需刷新网页。12.1.3jQueryAJAX在不使用jQueryAJAX技术时，JavaScript创建XMLHTTPRequest对象时还得考虑不同浏览器的兼容性问题，节选部分参考代码如下：//非IE浏览器创建XmlHttpRequest对象if(window.XmlHttpRequest){xmlhttpReq=newXmlHttpRequest();}//IE浏览器创建XmlHttpRequest对象if(window.ActiveXObject){try{xmlhttpReq=newActiveXObject("Microsoft.XMLHTTP");}catch(e){try{xmlhttpReq=newActiveXObject("msxml2.XMLHTTP");}catch(ex){}}}如果使用了jQueryAJAX技术，上述代码的复杂内容只需要一个$.ajax()就可以完成。12.1.3jQueryAJAXjQuery提供了关于AJAX的一系列方法，使得开发者可以更方便地从服务器端请求文本、HTML、XML或JSON形式的数据。jQueryAJAX技术中封装的函数可以化简原本复杂繁琐的AJAX相关代码，使得程序员可以更多关注产品的实现。12.1.3jQueryAJAX注：由于Chrome内核浏览器的安全机制不允许使用AJAX请求本地文件，因此本章节均使用了在本地电脑中临时搭建服务器的方式（搭建方式见12.2）作为例题运行效果的截图以供参考，后面不再逐一解释。读者在实际运用中如果采用了第三方服务器环境则无需考虑浏览器的限制问题。12.2准备工作12.2.1临时服务器的搭建12.2.2文件访问测试12.2.1临时服务器的搭建若开发者条件受限，可以将PC端临时部署为模拟服务器进行开发和测试。开发者可以根据自己的实际情况选择Apache、Ngnix、Tomcat等任意一款服务器软件进行安装部署，以及选用PHP、Node.js、J2EE等任意一种语言进行后端开发。12.2.1临时服务器的搭建初学者可以直接使用第三方免费套件帮助我们快速搭建模拟服务器环境，这里以phpStudyV8.1套装软件（包含了Apache/Nginx、PHP和MySQL）为例，部署步骤如下：（1）下载安装包（官方网址），在PC端中双击安装。（2）完成后启动Apache/Nginx服务器，如图所示。（3）在WWW目录下创建自定义目录，例如ajaxDemo，未来可以在该目录下放置图片素材或PHP文件。至此临时部署完毕，用户可以随时更改服务器上的目录地址和PHP文件代码。12.2.2文件访问测试临时服务器的WWW目录就是根目录，它的网络地址是“http://localhost/”或“/”。开发者可以在根目录下自行创建目录和文件，例如在ajaxDemo中创建了hello.txt文件，那么该文件的URL地址就是“http://localhost/miniDemo/hello.txt”。在文本文件中随意写一句话，例如写上“Hello”，然后用浏览器访问该文件的地址，效果如下图所示。注意：如果要显示中文需要把文本文件保存为UTF-8编码格式，否则可能会显示乱码。12.2.2文件访问测试以PHP类型的文件为例，就可以用来编写代码制作请求接口了。PHP文件的返回语句是echo，例如：这样发送ajax请求后将会收到引号里面的文字内容。开发者也可以直接用浏览器访问该地址，能获得同样的文字内容（如下图所示），因此可以在开发之前直接使用浏览器测试PHP文件是否正确。<?phpecho'你好！';?>12.3jQueryAJAX常用方法12.3.1jQueryAJAXload()方法 12.3.2jQueryAJAXget()方法 12.3.3jQueryAJAXpost()方法 12.3.4jQueryAJAXajax()方法 12.3.5jQueryAJAX更多方法介绍12.3.1jQueryAJAXload()方法 jQueryAJAXload()方法可以向服务器端发送数据获取请求，并将已获取到的数据加载到指定的HTML元素中。其语法格式如下：$(selector).load(URL[,data][,callback]);12.3.1jQueryAJAXload()方法 其中URL为必填参数，data和callback为可选参数。具体解释如下：

URL参数用于规定需要获取数据的URL地址，可以是文本、XML或者JSON数据；

data参数用于规定与请求一起发送给服务器的字符串，该字符串以键/值对集合的形式组成；

callback参数用于规定load()方法完成后需要执行的函数。1. 常规使用例如，将文件test.txt的内容加载到id="demo"的段落元素<p>中。jQuery将使用.innerHTML属性将指定元素中的全部内容更新为test.txt中的文本内容。如果只需要加载的文件中的某个HTML元素，则可以在URL参数中追加jQuery选择器来筛选需要加载的元素。$("#demo").load("test.txt");12.3.1jQueryAJAXload()方法12.3.1jQueryAJAXload()方法1. 常规使用例如，将文件test.txt中class="style01"的<div>元素加载到id="demo"的段落元素<p>中。需要注意的是，以上两种情况的选择器都必须是在网页文档中实际存在的HTML元素，否则AJAX请求将不会被发出。$("#demo").load("test.txt

div.style01");12.3.1jQueryAJAXload()方法1. 常规使用【例12-1】jQueryAJAXload()方法的简单应用12.3.1jQueryAJAXload()方法2. 回调函数的使用jQueryAJAXload()方法中的可选参数callback规定了数据加载完成后需要执行的回调函数。该函数包含了三个参数，其语法格式如下：$(selector).load(URL[,data],function(response,status,xhr){//回调函数的内部代码略});12.3.1jQueryAJAXload()方法2. 回调函数的使用其中三个参数具体解释如下：response参数为调用成功时的结果内容；status参数为调用的状态，例如"success"或"error"等；xhr参数表示XMLHttpRequest对象。12.3.1jQueryAJAXload()方法2. 回调函数的使用【例12-2】jQueryAJAXload()方法中回调函数的使用12.3.2jQueryAJAXget()方法jQueryAJAXget()方法通过HTTPGET请求从服务器端获取数据，其语法格式如下：$.get(URL[,data][,success][,dataType]);12.3.2jQueryAJAXget()方法其中URL为必填参数，data、success和dataType均为可选参数。具体解释如下：URL参数用于规定请求的URL地址；data参数用于规定与请求一起发送给服务器的字符串，该字符串以键/值对集合的形式组成；success参数用于规定请求成功后需要执行的函数，如果没有该参数则返回的数据将被忽略；dataType参数用于规定从服务器端获取的数据类型，例如xml、json、html等。12.3.2jQueryAJAXget()方法如果没有数据需要发送给服务器，也无需处理获取的数据，可以只使用参数URL。例如：上述代码表示向demo.php请求数据，但是获取到的数据将被忽略不做任何处理。$.get("demo.php");12.3.2jQueryAJAXget()方法如果需要处理获取到的数据，则需要追加参数success。例如：

上述代码表示向demo.php请求数据，并使用alert()方法将获取到的数据显示在警告消息框中。其中function(data)中的参数data就是获取到的数据返回值，在实际开发的过程中可以对其进行更为具体的处理。$.get("demo.php",function(data){alert("获取的数据是："+data);});12.3.2jQueryAJAXget()方法如果有数据需要一并提交给服务器，则需要再追加参数data。例如：上述代码表示向demo.php请求数据，并将name和age值发送给服务器等待处理，最后使用alert()方法将获取到的数据显示在警告消息框中。其中{name:"Tom",age:"23"}中的元素个数、名称和值均可以自定义，元素之间用逗号隔开即可。$.get("demo.php",{name:"Tom",age:"23"},function(data){alert("获取的数据是："+data);});12.3.2jQueryAJAXget()方法【例12-3】jQueryAJAXget()方法的使用12.3.2jQueryAJAXget()方法jQueryAJAXpost()方法通过HTTPPOST请求从服务器端获取数据，其语法格式如下：$.post(URL[,data][,success][,dataType]);12.3.3jQueryAJAXpost()方法其中URL为必填参数，data、success和dataType均为可选参数。具体解释如下：URL参数用于规定请求的URL地址；data参数用于规定与请求一起发送给服务器的字符串，该字符串以键/值对集合的形式组成；success参数用于规定请求成功后需要执行的函数名称，如果没有该参数则返回的数据将被忽略；dataType参数用于规定从服务器端获取的数据类型，例如xml、json、html等。12.3.3jQueryAJAXpost()方法post()与get()方法的区别在于请求方式不同，而代码格式基本一致，因此这里不再进行更多的举例，读者可以参照前一节get()方法的示例来对比学习。12.3.3jQueryAJAXpost()方法在实际开发中，如果只是获取数据或查询结果建议使用get()方法；如果需要更新资源信息建议使用post()方法。还可以基于以下两点考虑选用get()还是post()方法：HTTPGET请求只能向服务器发送1024字节的数据；HTTPPOST请求可以向服务器发送大量数据（理论上无限制，实际根据浏览器的类型上限稍有不同）。HTTPGET请求提交的数据将明文显示在URL上；通过HTTPPOST提交的数据会被放在HTTP包的包体中，更为安全。12.3.3jQueryAJAXpost()方法【例12-4】jQueryAJAXpost()方法的使用12.3.4jQueryAJAXajax()方法jQueryAJAXajax()是最完整的AJAX请求方法，包含了一系列参数的配置，可供开发者自定义更为灵活的个性化要求。事实上，之前所学习的load()、get()和post()方法均为ajax()方法的简化版（省略了一些固定不变的参数配置），当简化版无法解决某些设置要求的时候可以选择使用ajax()方法进一步配置。12.3.4jQueryAJAXajax()方法其语法格式如下：该方法内部由一个或多个名称/值组成，这些参数的数量、顺序以及参数值均可以由开发者根据实际开发需求自定义。$.ajax({ name1:value1, name2:value2,

…… nameN:valueN});12.3.4jQueryAJAXajax()方法jQueryajax()可以使用的参数名称如表12-1所示。jQueryajax()方法内部还可以添加一个或多个函数，可使用的函数名称如表12-2所示。12.3.4jQueryAJAXajax()方法常见用法示例如下：$.ajax({ url:"demo.php",//请求的URL地址 method:"POST",//请求的方式 data:{username:"admin",password:"123"},//需要发送给服务器端的数据 dataType:"json",//从服务器端获取数据的类型 success:function(){ alert("请求成功！"); }, error:function(){ alert("请求失败！"); }});上述代码就是一个自定义的ajax()方法，开发者可以在此模板的基础上修改参数值或追加其他参数内容。12.3.4jQueryAJAXajax()方法【例12-5】jQueryAJAXajax()方法的使用12.3.5jQueryAJAX更多方法介绍除了上述常用方法外，关于jQueryAJAX更多方法如表12-3所示。方法名称解释ajaxComplete()当AJAX请求完成时触发ajaxComplete事件，并执行该函数。ajaxError()当AJAX请求完成并发生错误时触发ajaxError事件，并执行该函数。ajaxSend()当AJAX请求发送之前触发ajaxSend事件，并执行该函数。jQuery.ajaxSetup()设置未来AJAX请求的默认值，也可以写作$.ajaxSetup()。ajaxStart()当第一个AJAX请求开始时触发ajaxStart事件，并执行该函数。ajaxStop()当所有AJAX请求均完成时触发ajaxStop事件，并执行该函数。ajaxSuccess()当AJAX请求成功时触发ajaxSuccess事件，并执行该函数。jQuery.getJSON()通过HTTPGET请求从服务器获取JSON类型的数据返回值，也可以写作$.getJSON()。jQuery.getScript()通过HTTPGET请求从服务器获取JavaScript文件，并执行该文件。也可以写作$.getScript()。jQuery.param()将数组或对象的序列化，也可以写作$.param()。serialize()将表单中的数据序列化为字符串。serializeArray()将表单中的数据序列化为JSON类型数据。12.3.5jQueryAJAX更多方法介绍param()方法的作用示例如下：//临时创建一个对象x：varx=newObject();="Mary";x.age="20";//开始对x进行序列化varresult=$.param(x);//返回值为name=Mary&age=2012.3.5jQueryAJAX更多方法介绍serialize()和serializeArray()方法均是对表单元素进行序列化，前者返回字符串、后者返回JSON类型的数据。12.3.5jQueryAJAX更多方法介绍例如，一个包含了2个文本输入框的简易表单如下：<form><inputtype="text"name="productName"value="iPhone6s"/><br/><inputtype="text"name="productPrice"value="6800"/></form>12.3.5jQueryAJAX更多方法介绍使用serialize()将其中的数据值序列化：使用serializeArray()将其中的数据值序列化：varresult=$("form").serialize();//返回值为productName=iPhone6s&productPrice=6800varx=$("form").serializeArray();//此时x为数组对象result=JSON.stringify(x);//将x转换为JSON字符串，其返回值如下一行所示//[{"name":"productName","value":"iPhone6s"},{"name":"productPrice","value":"6800"}]需要注意的是，serialize()和serializeArray()方法均需要表单中的控件具有name属性方可正常使用。12.4jQueryAJAX事件AJAX请求发送时会依次触发多个事件，这些事件按照作用范围可以分为局部事件与全局事件两种类型。12.4jQueryAJAX事件AJAX事件按照被触发的顺序如表所示。12.4jQueryAJAX事件局部事件可以通过前面12.3.4节介绍的ajax()方法来触发并自定义函数内容，例如：$.ajax({ beforeSend:function(){ alert("AJAX请求即将处理！"); }, success:function(){ alert("AJAX请求成功！"); }});12.4jQueryAJAX事件全局事件可以通过bind()和unbind()方法进行事件绑定与解除。例如，为按钮元素<button>绑定AJAX全局事件：上述代码表示当AJAX请求发送之前将按钮元素的文字内容更新为“加载中……”。$("button").bind("ajaxSend",function(){$(this).text("加载中……");});12.4jQueryAJAX事件也可以直接为指定的元素调用全局事件对应的函数方法来触发，例如：上述代码表示当AJAX请求已经完成时更新按钮元素的文字内容为“已提交”。$("button").ajaxComplete(){$(this).text("已提交");});12.5阶段案例：简易单词查询12.5.1案例需求12.5.2准备工作12.5.3界面设计12.5.4逻辑实现12.5.5案例思考12.5.1案例需求使用jQueryAJAX技术制作一款简易单词查询应用，用户输入英文单词提交后可查到单词的中英文释义，如果后台数据中没有此单词信息则提示用户未查到。12.5.2准备工作1. 服务器准备本次案例我们使用PC端安装第三方免费的phpStudyv8.1套件来模拟服务器效果，该套件的下载安装以及启动步骤见第12章“12.2.1临时服务器的搭建”。然后在服务器端的根目录WWW下新建一个自定义目录（例如dict）作为本次项目的存放路径，这样后续的文件在浏览器中的访问地址就是：这样服务器的部署工作就完成了。http://localhost/dict/文件名或者/dict/文件名12.5.2准备工作2. 词库文件制作综合考虑每个单词需要的通用字段总结如下：word：英文单词，例如“apple”；meaning_CN：单词的中文释义，例如“n.苹果”；meaning_EN：单词的英文释义，例如“n.aroundfruitwithfirm,whitefleshandagreen,red,oryellowskin.”。12.5.2准备工作2. 词库文件制作本次案例将使用较为简单的JSON格式文件进行单词数据的存储，开发者若学过数据库技术也可以自行改造使用数据库对词库数据进行存储。JSON格式是一种“名称：值”对形式的数据格式，例如：上述代码表示存储了学号（stuID）为123，姓名（name）为zhangsan的数据信息。也可以用来存储多条记录，例如：{“stuID”:”123”,“name”:”zhangsan”}[{“stuID”:”123”,“name”:”zhangsan”},{“stuID”:”456”,“name”:”lisi”},{“stuID”:”789”,“name”:”wangwu”}]这里最外层追加了中括号表示数组，每个数组元素就是原先用大括号括住的每条记录，且数组元素之间使用逗号断开。12.5.2准备工作2. 词库文件制作节选部分单词的JSON格式效果如下：1. [2. {3. "word":"apple",4. "meaning_CN":"n.苹果",5. "meaning_EN":"n.aroundfruitwithfirm,whitefleshandagreen,red,oryellowskin."6. },7. …8. ]注：上述示例单词可供参考，其他数据文件见本书配套代码包。12.5.2准备工作2. 词库文件制作最后，将制作好的数据存到文本文档中并另存为UTF-8格式的JSON文件，名称可以自定义，例如就叫做data.json。此时词库素材就制作完成了，请在服务器端的WWW/dict目录下新建目录api（仅为示例，也可以自定义其他目录）并将词库文件存放进去等待使用。12.5.2准备工作3. 接口制作本示例选用了php技术来制作接口文件，并自定义文件名为search.php，同样需要UTF-8编码格式。接口文件search.php的内容如下：1. <?php2. //读取小程序端请求的单词3. $word=$_GET['word'];4. 5. //读取json文件6. $json_data=file_get_contents('data.json');7. //把json字符串强制转为PHP数组8. $dict_data=json_decode($json_data,true);9.

//查询结果

$result['status_code']=0;//0表示未查到，1表示查到了

$result['meaning_CN']='';$result['meaning_EN']='';

//遍历查单词

foreach($dict_dataas$obj){ //如果查到了

if($obj['word']==$word){ //更新查询结果

$result['status_code']=1; $result['meaning_CN']=$obj['meaning_CN']; $result['meaning_EN']=$obj['meaning_EN']; //停止遍历

break; }}//返回解释(转成json格式传输)echojson_encode($result);?>上述内容表示根据请求参数word的取值查找data.json词库文件，并把相同单词word的单词释义返回给客户端。12.5.2准备工作3. 接口制作此时接口文件就制作完成了，请把search.php放在服务器端的WWW/dict/api目录下等待使用。开发者也可以先使用浏览器自测接口是否有效，在浏览器地址栏输入：浏览器运行结果如下：http://localhost/dict/api/search.php?word=apple或者/dict/api/search.php?word=apple如果可以看到其中的“status_code”取值为1，就说明查到了对应的题目数据。12.5.3界面设计本案例主要分成表单和查询结果两个区域，其中表单内部包含单行文本输入框、提交按钮和重置按钮。结构如图所示。12.5.3界面设计创建一个HTML文件，文件名可自定义，例如Dictionary.html。在HTML5中使用<divclass="container">元素声明查单词整体区域，在其中嵌套表单<formid="form01">和段落元素<pid="result">分别表示表单和查询结果区域，相关代码如下：1. <body>2. <!--标题-->3. <h3>简易单词查询程序</h3>4. <!--水平线-->5. <hr>6. <!--查单词区域-->7. <divclass="container">8. <!--1表单-->9. <formid="form01"></form>10. <!--2查询结果-->11. <pid="result"></p>12. </div>13. </body>12.5.3界面设计继续补充表单中的内容，代码片段如下：其中单行文本输入框<input>的placeholder属性是用于在未输入内容时显示的提示。1. <!--1表单-->2. <formid="form01">3. <!--1-1单行文本输入框-->4. <inputid="word"type="text"placeholder="请输入您要查询的单词"/>5. <!--1-2提交按钮-->6. <inputtype="submit"value="提交"/>7. <!--1-3重置按钮-->8. <inputtype="reset"value="重置"/>9. </form>12.5.3界面设计本示例使用CSS外部样式表规定页面样式。在css文件夹中创建dict.css文件，并在HTML5文件的<head>首尾标签中声明对CSS文件的引用。相关HTML5代码片段如下：在CSS外部样式表中设置公共样式，相关CSS代码如下：1. <head>2. <metacharset="utf-8">3. <title>简易单词查询程序</title>4. <linkrel="stylesheet"href="css/dict.css">5. </head>1. /*公共样式*/2. *{3. box-sizing:border-box;/*盒子尺寸包含了边框和内边距*/4. }5. body{6. text-align:center;/*文本居中*/7. }12.5.3界面设计为表单区域和查询结果段落区域设置样式，相关CSS代码如下：1. /*表单*/2. form{3. width:100%;/*宽度100%自适应父容器*/4. height:90px;/*高度90px*/5. }6. /*单行文本输入框*/7. input[type=text]{8. width:100%;/*宽度100%自适应父容器*/9. height:30px;/*高度30px*/10. margin:10px0;/*外边距上下10px左右0px*/11. font-size:16px;/*字体大小16px*/12. }13. /*查询结果文本*/14. #result{15. width:100%;/*宽度100%自适应父容器*/16. height:auto;/*高度自适应内容*/17. text-align:left;/*文本左对齐*/18. }12.5.3界面设计此时CSS样式设置就全部完成了，由于谷歌内核的浏览器禁止跨域访问，请将本次项目案例涉及到的html、css目录及内部文件、js目录及内部文件全部放置到服务器WWW/dict目录下，然后在浏览器中访问：此时页面就可以正确显示出来了，如图所示。http://localhost/dict/Dictionary.html或/dict/Dictionary.html12.5.4逻辑实现本示例使用外部JS文件实现jQuery相关代码。在js文件夹中创建dict.js文件，并在Dictionary.html文件的<head>首尾标签中声明对JS文件的引用。相关HTML5代码片段如下：1. <head>2. <metacharset="utf-8">3. <title>简易单词查询程序</title>4. <linkrel="stylesheet"href="css/dict.css">5. <scriptsrc="js/jquery-1.12.3.min.js"></script>6. <scriptsrc="js/dict.js"></scr