12.2 jQuery框架

要实现Ajax异步请求，需要使用JavaScript和DOM技术，但使用JavaScript实现Ajax异步请求较为复杂，而且需要考虑到跨域等问题。因此，在Web项目开发过程中，人们提供了许多框架，对Ajax进行了一系列封装和简化，使得操作更加方便快捷。其中，最常用的框架为jQuery，本节将详细讲解jQuery的基本用法。

12.2.1 初识jQuery

jQuery是一款跨浏览器的开源JavaScript库，它的核心理念是“write less, do more”（写得更少，做得更多）。jQuery对JavaScript代码进行了效率的封装，使得DOM操作、事件处理和Ajax等功能的实现代码更加简洁，有效提高了开发效率。

下面介绍jQuery的使用方法，包括下载和引入jQuery文件。

1. 下载jQuery

登录jQuery的官方网站，jQuery官网首页如图12-3所示：

单击页面上的“Download the uncompressed, development jQuery 3.6.0”超链接，下载jQuery 3.6.0版本。下载时，可以选择应该版本的压缩版或未压缩版。压缩版文件体积更小，加载速度更快，而未压缩版便于学习和阅读。

2. 引入jQuery

在项目中引入jQuery时，只需把下载好的jQuery文件保存到项目的web目录中，然后在HTML或JSP文件中使用<script>标签引入即可：

<!-- 引入本地下载的jQuery -->
<script src="jquery-3.6.0.js"></script>

此外，许多网站还提供了静态资源公共库，可以通过CDN地址引入jQuery：

<!-- 引入CDN加速的jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

12.2.2 jQuery的常用操作

在开发过程中，使用jQuery可以轻松对页面元素进行选择和操作，常见的操作包括元素的选择、属性设置、事件绑定等。

1. 选择器的使用

选择器是jQuery的核心特性之一，使用符号$来选择页面元素：

<div id="myId"></div>
<script>
  // 获取id为myId的元素
  $('#myId');
</script>

2. 元素的操作

使用jQuery，可以对页面元素进行许多操作，包括设置内容和属性等：

<div id="myId">content</div>
<script>
  // 获取元素的内容
  var html = $('#myId').html();
  alert(html); // 输出结果：content

  // 设置元素的内容
  $('#myId').html('Hello'); // 编辑后，元素内容变成 Hello
</script>

3. 事件的绑定

在jQuery中，事件可以直接绑定到元素上：

<button>say hello</button>
<script>
  // 为button元素绑定单击事件
  $('button').click(function() {
    alert('Hello');
  });
</script>

4. 链式调用

jQuery支持链式调用，应用这个特性，可以用最少的代码完成相同的功能：

<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<script>
  // 链式调用将ul中索引为2的li元素设置为Hello
  $('ul').find('li').eq(2).html('Hello');
</script>

12.2.3 jQuery中的load() 方法

由于使用XMLHttpRequest对象来发送Ajax请求较为繁琐，因此jQuery将这些操作进行了封装和简化，提供了一系列方法来向服务器请求数据，其中最基本的方法之一就是load()方法。

load()方法可以用于请求HTML内容，并使用获得的数据替换指定元素的内容。其基本语法格式如下：

$(selector).load(url, data, callback);

在上述语法格式中，load()方法的参数说明如下：

url（必需）：指定要加载资源的路径。
data（可选）：发送到服务器的数据。
callback（可选）：请求完成时执行的函数。

1. 请求HTML文件

load()方法最基本的用法是请求远程HTML文档内容（例如JSP、HTML等），并将获取到的内容插入到本页面的指定位置。

例如，下面的代码通过按钮点击事件，加载并显示服务器上的一个HTML文件内容：

<button id="btn">加载数据</button>
<div id="box"></div>
<script>
  $('#btn').click(function() {
    $('#box').load('http://localhost:8080/chapter12/target.jsp');
  });
</script>

当用户点击“加载数据”按钮时，#box元素的内容将被target.jsp的内容替换。

2. 向服务器发送数据

load()方法的第二个参数可以用于发送数据到服务器，例如下面的代码向服务器发送用户名和密码：

<button id="btn">加载数据</button>
<div id="box"></div>
<script>
  $('#btn').click(function() {
    $('#box').load('http://localhost:8080/chapter12/Load2Servlet', {
      username: 'itcast',
      password: '123'
    });
  });
</script>

在服务器端，可以通过接收这些数据并进行相应处理。

3. 回调函数

load()方法的第三个参数是回调函数，该函数会在请求完成时执行，用于处理请求返回的数据或者显示请求状态。

$('#box').load('target.html', function(responseData, status, xhr) {
  console.log(responseData); // 输出请求的数据
  console.log(status);       // 输出请求状态
  console.log(xhr);          // 输出XMLHttpRequest对象
});

回调函数有三个参数，分别是：

responseData：服务器返回的数据。
status：请求状态，例如success、error等。
xhr：表示XMLHttpRequest对象，可以用于获取请求的更多信息。

12.2.4 发送GET和POST请求

jQuery提供了$.get()方法和$.post()方法，分别用于发送GET请求和POST请求。

1. `$.get()` 方法

$.get()方法用于向服务器发送GET请求，其语法格式如下：

$.get(url, data, function(data, status, xhr), dataType);

url：必须，规定加载资源的路径。
data：可选，发送到服务器的数据。
function(data, status, xhr)：可选，请求成功时执行的函数，各参数含义如下：
- data：从服务器返回的数据。
- status：请求的状态值。
- xhr：表示当前请求相关的XMLHttpRequest对象。
dataType：可选，预期的服务器响应的数据类型（如xml、html、json等）。

2. `$.post()` 方法

$.post()方法用于向服务器发送POST请求，其使用方式与$.get()方法类似。

$.post('http://localhost:8080/chapter12/Load2Servlet', {
  username: 'itcast',
  password: '123'
}, function(data) {
  $('#box').html(data);
}, 'html');

与GET请求不同，POST请求通常用于向服务器提交数据，例如表单提交。$.post()方法的参数与$.get()方法类似，只是发送方式不同。

通过这些方法，jQuery可以大大简化Ajax操作，使得开发者能够更高效地进行数据请求和交互。