什么是AJAX？

ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态应用的网页开发技术，无需重新加载整个网页的情况下，能够更新页面局部数据的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使页面实现异步更新。这意味着可以在不重新加载整个页面的情况下，对页面的某部分进行更新。通俗的理解就是利用XMLHttpRequest对象和服务器进行数据交互的方式就是Ajax

AJAX可以作什么？

传统的网页如果在更新内容，需要去对整个页面进行刷新。如果数据变换频繁我们需要对整个页面进行不断的刷新，对于用户的体验来说并不又好。而AJAX可以帮助我们完成页面上的局部更新，而不重新刷新整个页面。

AJAX的使用

1、XMLHttpRequest对象

XMLHttpRequest 是浏览器接口对象，该对象的 API 可被 JavaScript、VBScript 以及其它web 浏览器内嵌的脚本语言调用，通过 HTTP 协议在浏览器和 web 服务器之间收发 XML 或其它数据。XMLHttpRequest 可以与服务器实现异步交互，而无需让整个页面刷新，因此成为 Ajax 编程的核心对象。

创建Ajax的步骤

1、创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

2、给出指定的请求地址

xhr.open("请求方式","请求路径");

3、发送请求

xhr.send();

4、获取服务器端给客户端的相应数据

xhr.onreadystatechange = function(){
//0:open()没有被调用
//1:open()正在被调用
//2:send()正在被调用
//3:服务端正在返回结果
//4:请求结束，并且服务端已经结束发送数据到客户端
if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById("span").innerHTML=xhr.responseText;
alert(xhr.responseText);
}
}

演示案例：

1、创建AjaxServlet

public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        PrintWriter pw = resp.getWriter();
        pw.write("Hello My AJAX");
        pw.flush();
        pw.close();
    }
}

2、写web.xml配置

<servlet>
    <servlet-name>AjaxServlet</servlet-name>
    <servlet-class>com.niu.ajax.AjaxServlet</servlet-class>
</servlet>

<servlet-mapping>
    <servlet-name>AjaxServlet</servlet-name>
    <url-pattern>/ajaxServlet</url-pattern>
</servlet-mapping>

3、创建页面ajax01.jsp

<%--
  Created by IntelliJ IDEA.
  User: niuxiaocong
  Date: 2022/5/5
  Time: 0:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Demo AJAX</title>
</head>
<body>
    <h2>体验 Ajax</h2>
    <span id="span"></span>
    <button id="btn" type="submit">点击我发送Ajax请求</button>

    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function (){
            var xhr = new XMLHttpRequest();
            xhr.open("get","http://localhost:8080/servlet/ajaxServlet");
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200){
                    alert(xhr.responseText);
                    document.getElementById("span").innerHTML = xhr.responseText;
                }
            }
        }
    </script>

</body>
</html>

4、调用演示

AJAX 里面的小东西

onreadystatechange

在上面的演示案例中可以看到我们调用这这个onreadystatechange事件。那么这个onreadystatechange事件到底有什么用呢？就是当我们的请求发送到服务器的时候，需要通过这个事件来确定服务器是否相应？是否请求成功？是否返回数据？如果返回了数据，数据类型是什么样子的，都是通过这个事件来进行处理的。

XMLHttpRequest里面三个重要的属性：onreadystatechange、readyState、status

AJAX 的请求方式

向服务器发送请求我们可以通过open()函数或者send()函数

方法	描述
send([string])	如果send携带了参数，只能使用在post请求
open("方法类型","请求路径","同步	异步")	规定请求的类型、URL 以及是否异步处理请求。

AJAX 的响应方式

如果需要获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性，如果响应的数据是字符串，那么建议直接使用responseText的格式。

同步和异步

同步：就是当执行完成一项任务的时候才可以进行下一项任务。就叫做同步。举个栗子，就相当于我们打电话，当我们打完电话以后才可以打下一个电话，打电话的期间其让人呼叫不进来，我们也不能在打另外一个电话。

异步：就是当前的任务没有执行完成的时候仍然可以执行下一项任务，叫做异步。举个栗子，异步相当于我们聊的qq，微信，当我给你发了消息不管你有没有回应我，我可以继续给你发消息，也可以给别人发消息。

AJAX 技术