Web开发中，Ajax技术可以实现页面的局部更新，数据异步交互的方式给用户带来了更好的使用体验。使用JavaScript可以实现Ajax操作，但使用JavaScript实现Ajax操作不仅代码复杂，还需要考虑浏览器的兼容问题，给开发人员带来了不便。jQuery对JavaScript进行了二次封装同时也对Ajax的操作重新进行了整理与封装，简化了Ajax的使用。本章将针对jQuery中Ajax的使用进行详细讲解。

12.1 Ajax概述

Ajax全称是Asynchronous Javascript and XML，即异步的JavaScript和 XML。

传统请求：

Ajax异步请求方式

Ajax异步请求方式不向服务器发出请求，会得到数据后再更新页面（通过DOM操作修改页面内容），整个过程不会发生页面跳转或刷新操作。

二则比较：

比较方式	遵循的协议	请求发出方式	数据展示方式
传统方式	HTTP	页面链接跳转发出	重新载入新页面
Ajax异步方式	HTTP	由XMLHttpRequest实例发出请求	JavaScript和DOM技术把数据更新到本页面

12.2jQuery框架

引入jQuery

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


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

jQuery提供的方法大致可分为两类，一类是用于发送请求的$.get()方法和$.post()方法；另一类是用于获取不同格式数据的$.load()方法、$.getJSON()方法和$.getScript()方法。

12.2.3 jQuery中的load()方法

load(url,data,callback)

url	必需，指定加载资源的路径
data	可选，发送至服务器的数据
callback	可选，请求完成时执行的函数

请求HTML文件

firstweb\WebContent\chapter12 目录下创建load.jsp，target.jsp，同时把 jquery-3.6.0.js 放入目录中：

target.jsp：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>target</title>
</head>
<body>
<h3>静夜思</h3>
<h6>唐 李白</h6>
<pre>
  床前明月光，
  疑是地上霜。
  举头望明月，
  低头思故乡。
</pre>
</body>
</html>

load.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>load</title>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/chapter12/jquery-3.6.0.js"></script>
    <!-- ${pageContext.request.contextPath}是JSP取得绝对路径的方法，等价于 <%=request.getContextPath()%> 。
也就是取出部署的应用程序名或者是当前的项目名称 -->
</head>
<body>
<button id="btn">加载数据</button>
<div id="box"></div>
<script type="text/javascript">
    $('#btn').click(function() {
        $('#box').load('http://localhost:8080/firstweb/chapter12/target.jsp');
    });
</script>
</body>
</html>

向服务器发送数据

创建load2.jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>load2</title>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/chapter12/jquery-3.6.0.js"></script>
</head>
<body>
<button id="btn">加载数据</button>
<div id="box"></div>
<script>
    $('#btn').click(function() {
/*        $('#box').load('http://localhost:8080/chapter12/Load2Servlet',
            {username: 'itcast', password: 123});*/
        $('#box').load('http://localhost:8080/firstweb/load2Servlet',
            {username:'itcast',password:123},            //注意源代码中的中英文符号
            function(responseData, status, xhr){
            console.log(responseData);	// 输出请求的数据
            console.log(status);		// 输出请求状态
            console.log(xhr);			// 输出XMLHttpRequest对象
        })
    });
</script>
</body>
</html>

创建名称为load2Servlet的Servlet类，用于接收load2.jsp的请求

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//response.getWriter().append("Served at: ").append(request.getContextPath());
		 response.setContentType("text/html;charset=utf-8");
	     //获取load2.jsp页面的username与password值
	     String username=request.getParameter("username");
	     String password=request.getParameter("password");
	     response.getWriter().println("注册成功！<br/>用户名："+username+"<br/>密码："+password);
	        
	}

回调函数

load()方法的第3个参数是回调函数，该函数在请求数据加载完成后执行。回调函数用于获取本次请求的相关信息，它有3个默认参数，分别表示响应数据、请求状态和XMLHttpRequest对象。其中，请求状态共有5种，分别为success（成功）、notmodified（未修改）、error（错误）、timeout（超时）和parsererror（解析错误）。

在浏览器访问http://localhost:8080/firstweb/chapter12/load2.jsp，并单击“加载数据”按钮，再打开浏览器开发者工具（一般在浏览器中按“F12”键可以直接打开），浏览器控制台打印信息如下。

jQuery中的GET请求和POST请求

$.get()方法：

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

由上述语法可知，get()方法是jQuery的静态方法，由“$”对象直接调用。$.get()方法的参数含义如下表所示。

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

创建名称为get.jsp的JSP页面，在get.jsp中调用$.get()方法请求target.jsp页面，并将返回的数据显示到页面指定位置。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>get</title>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/chapter12/jquery-3.6.0.js"></script>
</head>
<body>
<button id="btn">加载数据</button>
<div id="box"></div>
<script>
    $('#btn').click(function() {
        $.get('http://localhost:8080/firstweb/chapter12/target.jsp', function(data) {
            $('#box').html(data);
        }, 'html');
    });
</script>
</body>
</html>

添加get2.jsp文件，用于向服务器发送数据。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>get2</title>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/chapter12/jquery-3.6.0.js"></script>
</head>
<body>
<button id="btn">加载数据</button>
<div id="box"></div>
<script>
    $('#btn').click(function() {
        var userData = {username:'itcast',password:123};
/*        $.get('http://localhost:8080/firstweb/load2Servlet',userData,
            function(data) {
                $('#box').html(data);
            }, 'html'); */
            
        $.post('http://localhost:8080/firstweb/load2Servlet',userData,
            function(data) {
                $('#box').html(data);
            }, 'html'); 
    });
</script>
</body>
</html>

12.3JSON数据格式

在Ajax请求中，最常用的数据格式为JSON。JSON是一种存储key/value（键值对）数据的格式，类似于JavaScript的对象格式。它的优势在于数据能被处理成对象，方便获取信息字段。JSON的数据格式如下所示。

[{
	"name": "Java基础",
	"author": "XX程序员",
	"price": "¥78.20"
}, {
	"name": "Java进阶",
	"author": "XX程序员",
	"price": "¥39.50"
}]

JSON数组数据都存储在一对[]中，在[]中，每一组数据用一对{}括起来，多个组之间用“,”分隔。需要注意的是，如果value是String类型的话必须用双引号引起来，如果是value是number、object、boolean和数组的话可以不使用双引号。

第12章 Ajax