《Java Web开发从入门到实战（IntelliJ IDEA版·微课视频版）》 课件 第10章 Ajax、JSON以及jQuery技术

第10章Ajax、JSON以及jQuery技术学习目的与要求本章重点介绍Ajax、JSON以及jQuery。通过本章的学习，理解Ajax技术原理，掌握Ajax、JSON以及jQuery等技术应用。《JavaWeb开发从入门到实战（微课视频版）（IntelliJIDEA版）》陈恒

主编，清华大学出版社，2024

目录《JavaWeb开发从入门到实战（微课视频版）（IntelliJIDEA版）》陈恒

主编，清华大学出版社，2024

10.1Ajax技术10.2JSON技术10.3jQuery技术10.1Ajax技术在2005年，Google通过其Google

Suggest

使Ajax技术变得流行起来。Google

Suggest使用Ajax技术创造出动态性极强的Web界面：在Google的搜索框输入关键字时，JavaScript会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。后来Google又推出了Google

Maps这种典型的富客户端应用。Google

Maps的地图支持鼠标的拖动、放大和缩小，地图随着鼠标的拖动进行新数据的加载，但页面本身无须重新加载。这种整页无刷新下的动态交互性效果，使Web应用达到了近似桌面应用的效果，Ajax技术随之迅速发展。《JavaWeb开发从入门到实战（微课视频版）（IntelliJIDEA版）》陈恒

主编，清华大学出版社，2024

10.1.1Ajax简介Ajax（AsynchronousJavascriptAndXML，异步JavaScript

和XML）是一种创建交互式网页应用的网页开发技术，使得“不刷新页面向服务器发起请求”成为可能。Ajax应用与传统Web应用相比较，客户端浏览器通过JavaScript事件触发对Ajax引擎的调用，Ajax引擎在Ajax应用中担负着一个中间层的任务，负责收集数据并通过Ajax的XMLHttpRequest对象向服务器发送HTTP请求，服务器处理完成后返回XML、JSON以及文本等类型的响应结果，Ajax引擎根据响应结果类型进行解析后再配合HTML和CSS渲染，将结果显示到客户端页面。《JavaWeb开发从入门到实战（微课视频版）（IntelliJIDEA版）》陈恒

主编，清华大学出版社，2024

10.1.2XMLHttpRequest对象XMLHttpRequest对象是Ajax的核心，Ajax引擎使用XMLHttpRequest和服务器进行异步通信，是Ajax技术得以实现的一个重要的JavaScript对象。所有现代浏览器（IE7+、Firefox、Chrome、Safari

以及Opera）均支持XMLHttpRequest

对象（new

XMLHttpRequest()），老版本的Internet

Explorer（IE5

和IE6）使用ActiveXObject对象（new

ActiveXObject("Microsoft.XMLHTTP")）。【例10-1】创建JSP页面example10_1.jsp，在该页面的JavaScript代码中创建XMLHttpRequest对象。《JavaWeb开发从入门到实战（微课视频版）（IntelliJIDEA版）》陈恒

主编，清华大学出版社，2024

10.1.3Ajax向服务器发送请求创建XMLHttpRequest对象后，Ajax就可以使用XMLHttpRequest对象的open()和send()方法将请求发送到服务器，请求可分为GET方式请求和POST方式请求。1．GET请求GET方式请求，示例代码如下：xmlhttp.open("GET","AjaxTestServlet",true);xmlhttp.send();其中，open(method,url,async)方法的参数method规定请求的类型，url指定请求的URL地址，async指定是否异步处理请求，true表示请求本质上异步的，默认值是true；send(content)方法将请求发送到服务器，如果请求声明为异步，该方法就立即返回，否则将会等待直到接收到响应为止，可选参数content可以是DOM对象的实例、输入流或者字符串，传入参数的内容作为请求体的一部分发送，content参数仅用于POST请求。《JavaWeb开发从入门到实战（微课视频版）（IntelliJIDEA版）》陈恒

主编，清华大学出版社，2024

10.1.3Ajax向服务器发送请求2．POST请求POST方式请求，示例代码如下：xmlhttp.open("POST","AjaxTestServlet",true);xmlhttp.send();如果需要像HTML表单那样提交POST数据，首先使用setRequestHeader()来添加HTTP头，然后在send()方法中规定希望发送的数据，示例代码如下：xmlhttp.open("POST","AjaxTestServlet",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("uname=chenheng&upwd=123456");其中，setRequestHeader(header,value)方法的header参数规定头的名称，value规定头的值。《JavaWeb开发从入门到实战（微课视频版）（IntelliJIDEA版）》陈恒

主编，清华大学出版社，2024

10.1.4Ajax获得服务器的响应Ajax向服务器发送请求后，如需获得服务器的响应，可以使用XMLHttpRequest对象的responseText或responseXML属性。示例代码如下：document.getElementById("myResponse").innerHTML=xmlhttp.responseText;responseText属性包含客户端接收到服务器的HTTP响应的文本内容。当readyState属性值为0（表示请求未初始化）、1（服务器连接已建立）或2（请求已接收）时，responseText包含一个空字符串；当readyState属性值为3（请求处理中）时，responseText包含还未完成的响应信息；当readyState属性值为4（请求已完成，且响应已就绪）时，responseText包含完整的响应信息。《JavaWeb开发从入门到实战（微课视频版）（IntelliJIDEA版）》陈恒

主编，清华大学出版社，2024

10.1.4Ajax获得服务器的响应Ajax获得服务器的响应时，除了用到responseText、responseXML和readyState属性外，还经常用到onreadystatechange和status属性。onreadystatechange属性指定每次状态改变所触发事件的事件处理函数。也就是说，每当readyState属性改变时，就会调用onreadystatechange属性指定的函数。status属性描述了HTTP状态码。需要注意的是只有readyState的值为3或4时，才能使用status属性。常用的状态码有200（请求成功）、202（请求被接收但处理未完成）、400（错误请求）、404（请求资源未找到）和500（内部服务器错误）。在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。当readyState等于4且状态为200时，表示响应已就绪，代码如下：xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4&&xmlhttp.status==200){document.getElementById("myResponse").innerHTML=xmlhttp.responseText;}}《JavaWeb开发从入门到实战（微课视频版）（IntelliJIDEA版）》陈恒

主编，清华大学出版社，2024

10.1.5Ajax示例一个Ajax应用的实现一般需要以下几个步骤：1．在页面中定义Ajax请求的触发事件；2．创建Ajax对象varxmlhttp=newXMLHttpRequest()；3．确定请求地址和请求参数；4．调用XMLHttpRequest对象的open()方法建立对服务器的调用xmlhttp.open("GET","AjaxTestServlet",true)；5．通过XMLHttpRequest对象的onreadystatechange属性指定响应事件的处理函数；6．在函数中根据响应状态进行数据获取和数据处理工作；7．调用XMLHttpRequest对象的send()方法发送请求xmlhttp.send(null);【例10-2】创建JSP页面example10_2.jsp，在该页面中演示一个在用户输入完学号时，触发Ajax异步请求，从服务器获取学号所对应的学生信息，并对页面中相应的学生信息进行更新填充。《JavaWeb开发从入门到实战（微课视频版）（IntelliJIDEA版）》陈恒

主编，清华大学出版社，2024

目录《JavaWeb开发从入门到实战（微课视频版）（IntelliJIDEA版）》陈恒

主编，清华大学出版社，2024

10.1Ajax技术10.2JSON技术10.3jQuery技术10.2JSON技术JSON（JavaScriptObjectNotation，JS对象标记）是一种轻量级的数据交换格式。《JavaWeb开发从入门到实战（微课视频版）（IntelliJIDEA版）》陈恒

主编，清华大学出版社，2024

10.2.1JSON的数据结构与XML一样，JSON也是基于纯文本的数据格式。它有两种数据结构。1．对象结构对象结构以“{”开始，以“}”结束。中间部分由0个或多个以英文“,”分隔的key/value对构成，key和value之间以英文“:”分隔。对象结构的语法结构如下：{

key1:value1, key2:value2, …}其中，key必须为String类型，value可以是String、Number、Object、Array等数据类型。例如，一个person对象包含姓名、密码、年龄等信息，使用JSON的表示形式如下：{

"pname":"陈恒", "password":"123456", "page":40}《JavaWeb开发从入门到实战（微课视频版）（IntelliJIDEA版）》陈恒

主编，清华大学出版社，2024

10.2.1JSON的数据结构2．数组结构数组结构以“[”开始，以“]”结束。中间部分由0个或多个以英文“,”分隔的值的列表组成。数组结构的语法结构如下：[

value1, value2, …]上述两种（对象、数组）数据结构也可以分别组合构成更为复杂的数据结构。例如：一个student对象包含sno、sname、hobby和college对象，其JSON的表示形式如下：{

"sno":"2023022299999",

"sname":"张三", "hobby":["篮球","足球"], "college":{ "cname":"清华大学", "city":"北京" }}《JavaWeb开发从入门到实战（微课视频版）（IntelliJIDEA版）》陈恒

主编，清华大学出版社，2024

10.2.2JSON在JavaScript中的使用JSON是JavaScript的原生格式，在JavaScript中处理JSON数据不需要任何API或工具包。【例10-3】创建JSP页面example10_3.jsp，在该页面的JavaScript中处理JSON数据。在JavaScript中可以使用eval()函数将JSON文本转换为JavaScript对象。例如，对Ajax请求响应结果（假设响应数据格式为JSON）的转换。varjsonText="{\"sname\":\"陈恒\",\"sage\":\"88\"}";//两边加圆括号将参数值无条件地视为表达式进行解析varjsObj=eval("("+jsonText+")");在JavaScript中可以使用JSON.stringify()方法将JavaScript对象转换为字符串。varobj={"sname":"陈恒","sno":20230101,"sage":88};varmyJSON=JSON.stringify(obj);《JavaWeb开发从入门到实战（微课视频版）（IntelliJIDEA版）》陈恒

主编，清华大学出版社，2024

10.2.3JSON在Ajax中的使用从10.2.2节可以看出拼写一个JSON文本变量非常繁琐且易出错。若服务器需要响应一个结构复杂、数据量大的数据对象，那么转换过程将更加费时费力。因此，在实际开发中，Java对象和JSON数据之间的互相转换通常使用第三方插件来协助完成，例如：JSON-Lib、Jackson、Gson和FastJson等。本节以Jackson为例，讲解JSON在Ajax中的使用。Jackson开源包及其描述如下所示。

jackson-annotations.jar：JSON转换注解包。

jackson-core.jar：JSON转换核心包。

jackson-databind.jar：JSON转换的数据绑定包。以上3个Jackson开源包，本书采用的版本是2.14.1，读者可通过地址“/artifact/com.fasterxml.jackson.core”下载得到。《JavaWeb开发从入门到实战（微课视频版）（IntelliJIDEA版）》陈恒

主编，清华大学出版社，2024

10.2.3JSON在Ajax中的使用在使用Jackson插件进行Java对象和JSON数据之间的互相转换时，需要将以上3个Jackson开源包复制到Web应用的/WEB-INF/lib目录下，本章将以上3个Jackson开源包复制到Web应用ch10的/WEB-INF/lib目录下。下面使用Jackson插件将例10-2的代码进行改进。《JavaWeb开发从入门到实战（微课视频版）（IntelliJIDEA版）》陈恒

主编，清华大学出版社，2024

目录《JavaWeb开发从入门到实战（微课视频版）（IntelliJIDEA版）》陈恒

主编，清华大学出版社，2024

10.1Ajax技术10.2JSON技术10.3jQuery技术10.3.1jQuery简介jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write

Less，Do

More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE

6.0+、FF

1.5+、Safari

2.0+、Opera9.0+等。《JavaWeb开发从入门到实战（微课视频版）（IntelliJIDEA版）》陈恒

主编，清华大学出版社，2024

10.3.2jQuery安装首先从jQuery官方网站/download/下载jQuery插件：jquery-3.6.0.min.js，将其复制到Web项目开发目录的webapp/js目录下。然后在JSP页面中，通过<scripttype="text/javascript"src="js/jquery-3.6.0.min.js"></script>代码将jquery-3.6.0.min.js引入当前页面中。《JavaWeb开发从入门到实战（微课视频版）（IntelliJIDEA版）》陈恒

主编，清华大学出版社，2024

10.3.3jQuery语法jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作，语法如下：$(selector).action()其中，美元符号$定义jQuery；选择符（selector）“查询”"和“查找”HTML元素；jQuery的action()执行对元素的操作。示例如下：$("#test").hide()隐藏所有id="test"的元素；$("#test").text("Helloworld!")设置id="test"元素的文本内容为“Helloworld!”；$("#test").html("<b>Helloworld!</b>")设置id="test"元素的内容（包括HTML标记）；$("#test").val("chenheng")设置id="test"的表单字段的值；$("#test").text()返回id="test"元素的文本内容；$("#test").html()返回id="test"元素的内容（包括HTML标记）；$("#test").val()获得id="test"的表单字段的值。《JavaWeb开发从入门到实战（微课视频版）（IntelliJIDEA版）》陈恒

主编，清华大学出版社，2024

10.3.4jQuery对Ajax的实现jQuery提供多个与Ajax有关的方法，下面结合实例介绍两个常用的方法：ajax()方法和load()方法。1．ajax()方法$.ajax()方法只有一个参数：参数key/value对象，包含各配置及回调函数信息。示例如例10-4所示。【例10-4】编写JSP页面example10_4.jsp，在