Ajax
在Web开发中，Ajax技术可以实现页面的局部更新，数据异步交互的方式给用户带来了更好的使用体验。使用JavaScript可以实现Ajax操作，但使用JavaScript实现Ajax操作不仅代码复杂，还需要考虑浏览器的兼容问题，给开发人员带来了不便。jQuery对JavaScript进行了二次封装同时也对Ajax的操作重新进行了整理与封装，简化了Ajax的使用。
01. Ajax概述
Ajax全称是Asynchronous Javascript and XML，即异步的JavaScript和 XML。Ajax是一种Web应用技术，该技术是在JavaScript、DOM、服务器配合下，实现浏览器向服务器发送异步请求。
传统请求方式每次发出请求都会请求一个新的页面，即使刷新页面也要重新请求加载本页面。
Ajax异步请求方式不向服务器发出请求，会得到数据后再更新页面（通过DOM操作修改页面内容），整个过程不会发生页面跳转或刷新操作。
传统请求方式和Ajax异步请求方式区别
比较方式 | 遵循的协议 | 请求发出方式 | 数据展示方式 |
传统方式 | HTTP | 页面链接跳转发出 | 重新载入新页面 |
Ajax异步方式 | HTTP | 由XMLHttpRequest实例发出请求 | JavaScript和DOM技术把数据更新到本页面 |
关于汇总数据特别说明：
操作型数据库中自然也有汇总需求，但汇总数据本身不存储而只存储其生成公式。这是因为操作型数据是动态变化的，因此汇总数据会在每次查询时动态生成。
而对于分析型数据库来说，因为汇总数据比较稳定不会发生改变，而且其计算量也比较大(因为时间跨度大)，因此它的汇总数据可考虑事先计算好，以避免重复计算。
02. jQuery框架
要实现Ajax异步刷新就需要使用到JavaScript和DOM技术，但使用JavaScript实现Ajax异步刷新比较复杂，而且需要考虑到跨域等问题，因此，人们在Web项目开发过程中提供了很多框架，对Ajax做了一系列封装简化，使操作更方便快捷。其中，最常用的框架为jQuery
jQuery是一款跨浏览器的开源JavaScript库，它的核心理念是write less，do more（写的更少，做的更多）。通过对JavaScript代码的封装，jQuery使得DOM、事件处理、Ajax等功能的实现代码更加简洁，有效提高了程序开发效率。下面介绍jQuery的具体使用方法，包括下载和引入jQuery文件。
01. 引入jQuery
在项目中引入jQuery时，只需要把下载好的jQuery文件保存到项目的web目录中，在项目的HTML或jsp文件中使用
<!-- 引入本地下载的jQuery -->
<script src="jquery-1.6.1.js"></script>02. jQuery的常用操作
jQuery的常用操作包括选择器的使用、元素对象的操作、事件的绑定、链式编程等。
选择器的使用
jQuery选择器用于获取网页元素对象。jQuery选择器以“$”符号开头，示例代码如下。
<div id="myId"></div>
<script>
$('#myId'); // 获取id值为myId的元素对象
</script>
元素对象的操作
jQuery中对获取的元素对象可以进行一系列的操作，如元素的取值、赋值、属性的设置等，示例代码如下。
<div id="myId">content</div>
<script>
// ① 获取元素的内容
var html = $('#myId').html();
alert(html); // 输出结果：content
// ② 设置元素的内容
$('#myId').html('Hello'); // 执行后，网页中元素的内容变为Hello
</script>
事件的绑定
在jQuery中，事件一般直接绑定在元素上。例如，为指定元素对象绑定单击事件，示例代码如下。
<button>say hello</button>
<script>
//为button元素绑定单击（click）事件，参数是事件的处理程序
$('button').click(function() {
alert('Hello');
});
</script>
链式编程
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>
03. jQuery中的load()方法
由于使用XMLHttpRequest对象发送Ajax请求操作较为繁琐，因此jQuery对这些操作做了一系列的封装简化，提供了一系列向服务器请求数据的方法。jQuery提供的方法大致可分为两类，一类是用于发送请求的.post()方法；另一类是用于获取不同格式数据的
.getJSON()方法和$.getScript()方法。
在jQuery的Ajax请求方法中，load()方法是最基本、最常用的方法之一，该方法可以请求HTML内容，并使用获得的数据替换指定元素的内容。load()方法基本语法格式如下所示: load(url,data,callback)
参数 | 描述 |
url | 必需，指定加载资源的路径 |
data | 可选，发送至服务器的数据 |
callback | 可选，请求完成时执行的函数 |
load()方法的用法很多，下面介绍几种常见用法。
请求HTML文件
load()方法最基本的用法是远程请求某个页面文件内容（如JSP、HTML），并将获取到的内容插入到本页面某部分。<body>
<button id="btn">加载数据</button>
<div id="box"></div>
<script type="text/javascript">
$('#btn').click(function() {
$('#box').load('http://localhost:8080/chapter12/target.jsp');
});
</script>
</body><body>
<h3>静夜思</h3>
<h6>唐 李白</h6>
<pre>
床前明月光，
疑似地上霜。
举头望明月，
低头思故乡。
</pre>
</body>
<%--
Created by IntelliJ IDEA.
User: maomao
Date: 2022/4/1
Time: 15:08
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="https://code.jquery.com/jquery-1.6.1.js"></script>
<html>
<head>
<title>Title</title>
</head>
<body>
<button id="btn">加载数据</button>
<div id="box"></div>
<script>
$('#btn').click(function() {
$('#box').load('http://localhost:8080/ServletDemo01_war_exploded/Load2Servlet',
{username: 'itcast', password: 123});
});
</script>
</body>
</html>package com.miao;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet(name = "Load2Servlet", value = "/Load2Servlet")
public class Load2Servlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
//获取load2.jsp页面的username与password值
String username=req.getParameter("username");
String password=req.getParameter("password");
resp.getWriter().println("注册成功！<br/>用户名： "+username+"<br/>密码："+password);
}
}回调函数
load()方法的第3个参数是回调函数，该函数在请求数据加载完成后执行。回调函数用于获取本次请求的相关信息，它有3个默认参数，分别表示响应数据、请求状态和XMLHttpRequest对象。
其中，请求状态共有5种，分别为success（成功）、notmodified（未修改）、error（错误）、timeout（超时）和parsererror（解析错误）。<%--
Created by IntelliJ IDEA.
User: maomao
Date: 2022/4/1
Time: 15:08
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="https://code.jquery.com/jquery-1.6.1.js"></script>
<html>
<head>
<title>Title</title>
</head>
<body>
<button id="btn">加载数据</button>
<div id="box"></div>
<script>
$('#box').load('http://localhost:8080/ServletDemo01_war_exploded/Load2Servlet',
{username: 'itcast', password: 123},
function(responseData, status, xhr){
console.log(responseData); // 输出请求的数据
console.log(status); // 输出请求状态
console.log(xhr); // 输出XMLHttpRequest对象
})
</script>
</body>
</html>
04. 发送GET和POST请求
浏览器向服务器发送的请求包括GET请求和POST请求，为此，jQuery提供了.post()方法，分别用于发送GET请求和POST请求。
$.get()方法
jQuery中的$.get()方法，用于向服务器发送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）<%--
Created by IntelliJ IDEA.
User: maomao
Date: 2022/4/1
Time: 15:21
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="https://code.jquery.com/jquery-1.6.1.js"></script>
<html>
<head>
<title>Title</title>
</head>
<body>
<button id="btn">加载数据</button>
<div id="box"></div>
<script>
$('#btn').click(function() {
$.get('http://localhost:8080/ServletDemo01_war_exploded/jsp/target.jsp', function(data) {
$('#box').html(data);
}, 'html');
});
</script>
</body>
</html>
<%--
Created by IntelliJ IDEA.
User: maomao
Date: 2022/4/1
Time: 15:21
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="https://code.jquery.com/jquery-1.6.1.js"></script>
<html>
<head>
<title>Title</title>
</head>
<body>
<button id="btn">加载数据</button>
<div id="box"></div>
<script>
$('#btn').click(function() {
var userData = {username: 'itcast', password: 123};
$.get('http://localhost:8080/ServletDemo01_war_exploded/Load2Servlet',userData,
function(data) {$('#box').html(data);}, 'html');
});
</script>
</body>
</html>$.post()方法
在jQuery中，发送GET请求调用
.post()方法，两个方法使用方式完全相同，替换两者的方法名就可以在GET请求和POST请求方式之间切换。
<%-- Created by IntelliJ IDEA. User: maomao Date: 2022/4/1 Time: 15:21 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <script src="https://code.jquery.com/jquery-1.6.1.js"></script> <html> <head> <title>Title</title> </head> <body> <button id="btn">加载数据</button> <div id="box"></div> <script> $('#btn').click(function() { var userData = {username: 'itcast', password: 123}; $.post('http://localhost:8080/ServletDemo01_war_exploded/Load2Servlet',userData, function(data) { $('#box').html(data); }, 'html'); }); </script> </body> </html> <%-- Created by IntelliJ IDEA. User: maomao Date: 2022/4/1 Time: 15:21 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <script src="https://code.jquery.com/jquery-1.6.1.js"></script> <html> <head> <title>Title</title> </head> <body> <button id="btn">加载数据</button> <div id="box"></div> <script> $('#btn').click(function() { var userData = {username: 'itcast', password: 123}; $.post('http://localhost:8080/ServletDemo01_war_exploded/Load2Servlet',userData, function(data) { $('#box').html(data); }, 'html'); }); </script> </body> </html>
03. JSON数据格式
JSON是一种存储key/value（键值对）数据的格式，类似于JavaScript的对象格式。它的优势在于数据能被处理成对象，方便获取信息字段。JSON的数据格式如下所示。
[
{
"name": "Java基础",
"author": "猫猫",
"price": "¥78.20"
}, {
"name": "Java进阶",
"author": "猫猫",
"price": "¥39.50"
}
]JSON数组数据都存储在一对[]中，在[]中，每一组数据用一对{}括起来，多个组之间用“,”分隔。需要注意的是，如果value是String类型的话必须用双引号引起来，如果是value是number、object、boolean和数组的话可以不使用双引号。
package com.miao.pojo;
public class Book {
private String name;
private double price;
private String auther;
public Book() {
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
public String getAuther() {
return auther;
}
public void setAuther(String auther) {
this.auther = auther;
}
}<%--
Created by IntelliJ IDEA.
User: maomao
Date: 2022/4/1
Time: 15:38
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="https://code.jquery.com/jquery-1.6.1.js"></script>
<html>
<head>
<title>Title</title>
</head>
<body>
<button id="btn">加载数据</button>
<table id="dataTable" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>作者</th>
<th>书名</th>
<th>价格</th>
</tr>
</table>
<script type="text/javascript">
$('#btn').click(function() {
$.getJSON('http://localhost:8080/ServletDemo01_war_exploded/JSONServlet',
function(data) {
var html = '';
for (var Book in data) {
html += '<tr>';
for (var key in data[Book]) {
html += '<td>' + data[Book][key] + '</td>';
}
html += '</tr>';
}
$('#dataTable').append(html);
});
});
</script>
</body>
</html>package com.miao;
import com.miao.pojo.Book;
import net.sf.json.JSONArray;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
@WebServlet(name = "JSONServlet",urlPatterns = "/JSONServlet")
public class JSONServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException {
//创建list集合
List<Book> Books= new ArrayList<Book>();
Book b =new Book();
b.setName("Java基础");
b.setAuther("maomao");
b.setPrice(78.20);
Books.add(b);
Book b1 =new Book();
b1.setName("Java进阶");
b1.setAuther("maomao");
b1.setPrice(68.20);
Books.add(b1);
//创建JSONArray对象
JSONArray jsonArray=JSONArray.fromObject(Books);
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(jsonArray);
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException {
doGet(request,response);
}
}
04. Ajax的基础操作
在jQuery中，向服务器请求数据的方法有很多。其中，最基本的方法是$.ajax()， $.ajax()方法可以精确地控制Ajax请求。例如，在请求出错时执行某些操作，设置请求字符集和超时时间等。
.get()方法、
.ajax()方法进一步的封装，
.post()方法的实际封装代码如下。
jQuery.each( [ "get", "post" ], function( i, method ) {
jQuery[ method ] = function( url, data, callback, type ) {
if ( jQuery.isFunction( data ) ) {
type = type || callback;
callback = data;
data = undefined;
}
return jQuery.ajax({
url: url, type: method, dataType: type, data: data, success: callback
});
};
});$.ajax()方法可以实现所有关于Ajax的操作，其语法格式如下。
$.ajax(options) // 语法格式1
$.ajax(url,options) // 语法格式2$.ajax()方法可设置的参数
参数 | 描述 |
url | 请求地址，默认是当前页面 |
data | 发送至服务器的数据 |
xhr | 用于创建XMLHttpRequest对象的函数 |
beforeSend(xhr) | 发送请求前执行的函数 |
success(result,status,xhr) | 请求成功时执行的函数 |
error(xhr,status,error) | 请求失败时执行的函数 |
complete(xhr,status) | 请求完成时执行的函数（请求成功或失败时都会调用，顺序在success和error函数之后） |
callback | 请求完成时执行的函数 |
参数 | 描述 |
dataType | 预期的服务器响应的数据类型 |
type | 请求方式（GET或POST） |
cache | 是否允许浏览器缓存被请求页面，默认为true |
cache | 设置本地的请求超时时间（以毫秒计） |
async | 是否使用异步请求。默认为true |
username | 在HTTP访问认证请求中使用的用户名 |
password | 在HTTP访问认证请求中使用的密码 |
contentType | 发送数据到服务器时所使用的内容类型。默认为“application/x-www-form-urlencoded” |
参数 | 描述 |
processData | 是否将请求发送的数据转换为查询字符串。默认为true |
context | 为所有Ajax相关的回调函数指定this值 |
dataFilter(data,type) | 用于处理 XMLHttpRequest 原始响应数据 |
global | 是否为请求触发全局Ajax事件处理程序，默认为true |
ifModified | 是否仅在最后一次请求后，响应发生改变时才请求成功，默认为false |
traditional | 是否仅在最后一次请求后，响应发生改变时才请求成功，默认为false |
scriptCharset | 请求的字符集 |
<%--
Created by IntelliJ IDEA.
User: maomao
Date: 2022/4/1
Time: 15:54
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<title>Ajax</title>
<script src="https://code.jquery.com/jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$.ajax({
type:"post", //提交方式
url:'http://localhost:8080/ServletDemo01_war_exploded/AJAXServle',
data:{
userName: $("#userName").val(),
password: $("#password").val()
}, //data中的内容会自动的添加到url后面
dataType: "text", //返回数据的格式
success:function(a){ //请求成功后执行的函数
if(a=="true"){
$('#suss').html("登录成功!")
}else{
$('#suss').html("登录失败!")
}
},
error :function () { //请求失败后执行的函数
alert("请求失败");
},
});
});
});
</script>
</head>
<body>
<div>
<div>
<ul>
<li>用户名：</li>
<li><input id="userName" name="userName" type="text" /></li>
</ul>
</div>
<div>
<ul>
<li>密码：</li>
<li><input id="password" name="password" type="password"/></li>
</ul>
</div>
<div>
<ul>
<li><button>登录</button></li>
</ul>
</div>
<div id="suss"></div>
</div>
</body>
</html>package com.miao.pojo;
public class Book {
private String name;
private double price;
private String auther;
public Book() {
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
public String getAuther() {
return auther;
}
public void setAuther(String auther) {
this.auther = auther;
}
}import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Map;
@WebServlet(name = "AJAXServle",value = "/AJAXServle")
public class AJAXServle extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
boolean flag = false;
Map<String, String[]> parameterMap = req.getParameterMap();
if ((req.getParameter("userName")).equals("maomao")
&& req.getParameter("password").equals("123")) {
flag = true; //登录成功标志
} else {
flag = false;
}
resp.setContentType("text/html;charset=utf-8");
//使用PrintWriter方法打印登录结果
PrintWriter out = resp.getWriter();
out.print(flag);
out.flush();
out.close();
}
}
