原创：清华计算机学堂
基于jQuery的Ajax应用
01、jQuery简介
jQuery是一个免费、开源、兼容多浏览器的JavaScript库，其核心理念是：write less，do more(写得更少，做得更多)。jQuery于2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的JavaScript库，在世界前10000个访问最多的网站中，超过55%的在使用jQuery。
jQuery的语法设计可以使开发者的很多操作更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件，其模块化的使用方式使开发者可以很轻松地开发出功能强大的静态或动态网页。
这里仅对jQuery的核心功能做一个简单的介绍。
(1) DOM的遍历和操作
下述示例从页面中选择一个class名称为“continue”的元素，并将其提示信息设为“Next Step...”。
【示例】
(2) 事件处理
下述示例从页面中选择一个id值为“banner-message”的隐藏对象，在id值为“button-container”的按钮被单击时，使其变为可见的。
【示例】
(3) 对Ajax的实现
下述示例向服务器端发送Ajax异步请求，请求地址为“/api/getWeather”；请求参数为“zipcode：97201”；在响应成功时，用响应数据更新id值为“weather-temp”的元素的内容。
【示例】
02、jQuery对Ajax的实现
jQuery提供多个与Ajax有关的方法，通过jQuery Ajax方法，能够使用HTTP GET或HTTP POST请求从远程服务器上请求文本、HTML、XML或JSON数据，同时能够把这些外部数据载入网页的被选元素中。
下面分别对jQuery提供的Ajax实现方法进行介绍。
(1) ajax()方法
ajax()方法是jQuery底层Ajax实现(简单易用的高层实现可参见$.get()、$.post()等方法)。$.ajax()方法返回其创建的XMLHttpRequest对象，大多数情况下无须直接操作该对象，但特殊情况下可用于手动终止请求。
$.ajax()只有一个参数：options，包含各配置及回调函数信息，其语法格式如下。
【语法】
其中：
options：表示Ajax的请求设置，所有选项都是可选的。
方法返回XMLHttpRequest对象。
ajax()方法具体的参数及含义如表10-4所示。
■表10-4ajax()方法参数及含义
【示例】
【示例】
第二个示例中发送"name=John"和"location=Boston"两个数据给服务端的"example.jsp"，请求成功后会提示用户。async默认的设置值为true，这种情况为异步方式，表示Ajax发送请求后，在等待Server端返回的这个过程中，前台会继续执行Ajax块后面的脚本，直到Server端返回正确的结果才会去执行success。这时执行的是两个线程：Ajax块发出请求后的一个线程和Ajax块后面的脚本所执行的另一个线程。
(2) load()方法
load()方法是jQuery中最简单和最常用的Ajax方法。load()方法从服务器加载数据，并把返回的数据放入被选元素中。
【语法】
其中：
url：必选参数，指定需要加载的URL。
data：可选参数，规定与请求一同发送的查询字符串键/值对集合。
callback：可选参数，请求成功完成时的回调函数。
【示例】
(3) get()和post()方法
jQuery的get()和post()方法用于通过HTTP GET或POST请求从服务器请求数据。GET基本上用于从服务器获得(取回)数据，也可能返回缓存数据；POST也可用于从服务器获取数据，不过POST方法不会缓存数据，且常用于连同请求一起发送数据。
get()和post()方法中的回调函数仅在请求成功时可调用。如果需要在出错时执行函数，需要使用$.ajax()。
【语法】get()方法
其中：
url：必选参数，规定希望请求的URL。
data：可选参数，规定连同请求发送的数据。
callback：可选参数，请求成功完成时的回调函数。
【语法】post()方法
其中：
url：必选参数，规定希望请求的URL。
data：可选参数，规定连同请求发送的数据。
callback：可选参数，请求成功完成时的回调函数。
【示例】get()方法示例
【示例】post()方法示例
(4) getJSON()方法
getJSON()方法用于通过HTTP GET请求载入JSON数据，并尝试将其转为对应的JavaScript对象。
【语法】
【示例】
03、基于jQuery的Ajax应用
jQuery在Web应用中的使用非常方便，可以分为如下两个步骤。
(1) 下载jQuery插件的JavaScrip库，导入Web项目。
(2) 在网页中引入jQuery的JavaScript库。
以上述根据区号进行省市查询为例，jQuery对其实现方式如下。
首先从jQuery官方网站下载最新版本jQuery插件：jquery-3.6.1.min.js，将其复制到项目开发目录的WebContent/js目录下，如图10-8所示。
然后在网页中通过“”代码将jquery-3.6.1.min.js引入当前页面中。功能实现代码如下所示。
【案例10-5】jqueryAjaxDemo.jsp
在上述实例中，分别使用getJSON()和get()方法进行了Ajax的请求和响应结果的处理。通过对比可以看出，当响应结果为JSON格式数据时，使用getJSON()方法可以省略JSON文本向JavaScript对象的转换过程，使开发更加便捷。
运行服务器，在浏览器中访问http://localhost:8080/ch10/jqueryAjaxDemo.jsp，效果如图10-9所示。
