1 AJAX基本概述

AJAX是一门很重要的技术，主要作用就是增强用户的体验。AJAX全名为：ASynchronous JavaScript And XML，异步的JavaScript和XML。其中同步和异步的差异，以客户端向服务器发送请求及服务器响应的过程，简单说明下：

同步	异步
客户端发出请求后只能等待服务器的响应，期间不能进行其他操作	客户端发出请求后不需要原地等待服务器的响应，期间可以进行其他操作

借用百度百科的AJAX概念如下：

Ajax是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。传统的网页（不使用AJAX）如果需要更新内容，必须重载整个网页页面。

Ajax是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
传统的网页（不使用AJAX）如果需要更新内容，必须重载整个网页页面。

2 AJAX实现方式

AJAX实现方式有两种：

1）原生的JS实现方式：了解即可，了解即可，了解即可，实际项目中基本用的是下一种；
2）JQuery实现方式：.ajax()、.get()、

2.1 原生JS实现AJAX

【实现步骤】：

1）创建核心对象
2）建立连接（方法的参数解释详见下面代码）；
3）发送请求；
4）接收及处理响应结果。

【练习案例】：

1）在一个html页面中点击按钮，发送请求至AjaxServlet，在该Servlet中打印请求的信息；
2）为了演示AJAX异步的效果，在AjaxServlet中获取请求参数后，加5s线程睡眠，模拟业务处理；

【代码实现】：

1）html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun() {
            //发送异步请求
            //1、创建核心对象
            var xmlhttp;
            if(window.XMLHttpRequest){ //code for IE7+,Firefox,chrome,opera,safari
                xmlhttp = new XMLHttpRequest();
            }else{//code for IE6,IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2、建立连接
            /*
            * 参数：请求方式、请求的url路径、同步或异步请求（true为异步）
            * get方式：请求参数在url后面拼接，send方法为空；
            * post方式：请求参数在send方法中定义。
            * */
            xmlhttp.open("GET","ajaxServlet?username=Tim",true);
            //3、发送请求
            xmlhttp.send();
            //4、接收及处理响应结果,当服务器响应成功了再获取
            xmlhttp.onreadystatechange = function () { //当xmlhttp对象就绪状态改变时会触发事件
                if(xmlhttp.readyState==4 && xmlhttp.status == 200){ //请求已完成且响应就绪,响应状态码为200
                    alert(xmlhttp.responseText);
                }
            };
        }
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
    <input type="text">
</body>
</html>

2）AjaxServlet

package cn.test.web.servlet;

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("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1、获取请求参数
        String username = request.getParameter("username");
        //模拟业务处理
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        System.out.println(username);
        //2、响应
        response.getWriter().write("hello"+username);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

【演示效果】：对比测试看下AJAX的优势

1）首先看建立连接时采用同步请求时（xmlhttp.open方法参数为false），浏览器端只能等待响应，不能在文本框中输入，5s后才能输入：

2）首先看建立连接时采用同步请求时（xmlhttp.open方法参数为true），浏览器端无需死等响应，可以在文本框中输入：

2.2 JQuery方式实现AJAX

JQuery实现方式有三种：.ajax()、.get()、

1）$.ajax()

【语法】：$.ajax({键值对})；其中参数比较多，如下是常用的：

url：请求路径
type：请求方式
data：请求参数，方式一 data:{"username":"Tim","age":20}，方式二，data:{"username":"Tim","age":20}，JSON格式，推荐使用
success:function (data) { }：响应成功后的回调函数,data为接收的响应值
error:function () { }：响应出错，会执行的回调函数
dataType：设置接收到响应数据的格式

【代码实现】：还是用上一节的AjaxServlet，此处使用$.ajax异步方式请求，html中的代码简洁的太多！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        function fun() {
            //1、$.ajax()方式实现异步请求，参数比较多，如下几个是常用的
            $.ajax({
                url:"ajaxServlet",//请求路径
                type:"POST",  //请求方式
                // data:"username=Tim&age=20", //请求参数 ，方式一
                data:{"username":"Tim","age":20},//请求参数 ，方式二,JSON格式，推荐使用
                success:function (data) { //响应成功后的回调函数,data为接收的响应值
                    alert(data);
                },
                error:function () { //响应出错，会执行的回调函数
                    alert("出错了~~");
                },
                dataType:"text"//设置接收到响应数据的格式
            })
        }
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
    <input type="text">
</body>
</html>

2）$.get()：用来发送GET请求

【语法】：$.get(url, [data], [callback], [type])，参数如下：

url：请求路径；
data：请求参数；
callback：回调函数；
type：响应结果的类型；

【代码实现】：这种方法要比$.ajax()更加方便！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        function fun() {
            //1、$.get()方式实现异步请求
            $.get("ajaxServlet",{"username":"Tim"},function (data) {
                alert(data);
            },"text");
        }
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
    <input type="text">
</body>
</html>

3）$.post()：用来发送POST请求

用法和参数与.get()一致，不再赘述了，实际项目开发中.get()、

———————————————————————————————————————

本文为博主原创文章，转载请注明出处！

JavaWeb——AJAX异步技术实现方式与案例实战（原生的JS方式、使用JQuery方式）

2 AJAX实现方式

2.1 原生JS实现AJAX

2.2 JQuery方式实现AJAX