前言：不积跬步无以至千里，不积小流无以成江河！

废话不多，以最简练的语言和实例初步了解Ajax！

一、Ajax简介

Ajax（Asynchronous JavaScript and XML）是一种基于Web技术的编程实现方式，它使用JavaScript和XML来实现异步的数据交互。JavaScript负责发起请求和处理响应，而XML则负责将数据与页面分离。Ajax能够在不刷新整个页面的情况下更新页面内容，提高了页面的响应速度和用户体验。

二、Ajax用法

以JQuery写法：

<script>

$Ajax{

url:请求的页面地址

method:请求方法（POST、GET、DELETE等等）

data 传输数据

{

data1：数据1

data2：数据2

}

dataType:数据类型

success：function（）请求成功后执行的方法

error：function（）请求失败后执行的方法

</script>

结合一个简单的登录页面来理解：

<body>
<div><span>账号:</span><input type="text"  name="username"><br><span>密码:</span><input type="password"  name="password"><br><button >登录</button>
</div>
</body>

其Ajax请求用法如下：

即获取两个输入框内值，传递给后端控制器进行逻辑处理，返回值为true则说明匹配成功则控制台打印成功！

<script>$("button").click(function () {var Username=$("input[name='username']").val();var Password=$("input[name='password']").val();$.ajax({url:"LoginAjax",method:"post",data:{username:Username,password:Password},dataType:"json",success:function (Result){console.log(“登录成功！”);}});});
</script>

三、实例演示

1、创建一个LoginAjax的jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title><script src="js/jquery-3.1.1.min.js"></script><style>div{position: relative;left: 40%;top: 30%;float: left;}</style>
</head>
<body>
<div><span>账号:</span><input type="text"  name="username"><br><span>密码:</span><input type="password"  name="password"><br><button >登录</button>
</div>
<script>$("button").click(function () {var Username=$("input[name='username']").val();var Password=$("input[name='password']").val();$.ajax({url:"LoginAjax",method:"post",data:{username:Username,password:Password},dataType:"json",success:function (Result){if (Result.result){location.href="index.jsp";console.log(Result.message);}else console.log(Result.message);}});});
</script>
</body>
</html>

2、编写LoginAjax类继承HTTPSerlet

package com.example.javatest;
import com.fasterxml.jackson.databind.ObjectMapper;
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("/LoginAjax")
public class LoginAjax extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//无论是GET还是POST都能用Get方法实现doGet(req, resp);}@Overridepublic void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {String username=request.getParameter("username");String password=request.getParameter("password");ResultMap Rm=new ResultMap();request.setCharacterEncoding("utf-8");try {if (username.equals("admin")&&password.equals("pwd")){Rm.setMessage("Success!");Rm.setResult(true);}else{Rm.setResult(false);Rm.setMessage("False!");}}catch (Exception e){e.printStackTrace();}ObjectMapper Om=new ObjectMapper();//把对象转换成json格式String jason=Om.writeValueAsString(Rm);response.getWriter().println(jason);}
}

3、结果集类ResultMap

package com.example.javatest;
public class ResultMap {protected String message;protected  boolean result;public String getMessage() {return message;}public void setMessage(String message) {this.message = message;}public boolean getResult() {return result;}public void setResult(boolean result) {this.result = result;}
}