目录

ajax和Axios 异步框架

Ajax

概念

AJAX作用

1.1、AJAX 快速入门

XMLHttpRequest 对象方法

XMLHttpRequest 对象属性

onreadystatechange 属性

onload 属性

实例

AJAX实例：

使用AJAX验证用户名是否存在

Axios 异步框架

Axios 快速入门

1.引入 axios 的 js 文件

2.使用axios 发送请求，并获取响应结果

3.Axios 请求方式别名

ajax和Axios 异步框架

Ajax

概念

AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML

AJAX作用

 1、与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据

使用了AJAX和服务器进行通信，就可以使用 HTML+AJAX来替换JSP页面了

axios和express是什么关系 axios 和ajax_axios和express是什么关系

2、异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等…

axios和express是什么关系 axios 和ajax_ajax_02

axios和express是什么关系 axios 和ajax_前端_03

三个特点：

并行操作：浏览器与服务器是并行操作的，浏览器在工作的时候，服务器也可以工作。

后台发送：浏览器的请求是后台js发送给服务器的，js会创建单独的线程发送异步请求，这个线程不会影响浏览器的线程运行。

局部刷新：浏览器接收到结果以后进行页面局部刷新

1.1、AJAX 快速入门

参考网址:w3school 在线教程

         1、编写AjaxServlet，并使用response输出字符串

        2、创建 XMLHttpRequest 对象：用于和服务器交换数据

let xmlhttp = new XMLHttpRequest()

        3、向服务器发送请求 

xmlhttp.open("GET",“url");
xmlhttp.send();//发送请求

        4、获取服务器响应数据

xmlhttp.onreadystatechange = function () {

if (xmlhttp.readyState == 4 && xmlhttp.status == 200){      
        alert(xmlhttp.responseText); 

    }
}
XMLHttpRequest 对象方法

方法

描述

new XMLHttpRequest()

创建新的 XMLHttpRequest 对象。

abort()

取消当前请求。

getAllResponseHeaders()

返回头部信息。

getResponseHeader()

返回特定的头部信息。

open(method, url, async, user, psw)

规定请求。method：请求类型 GET 或 POSTurl：文件位置async：true（异步）或 false（同步）user：可选的用户名psw：可选的密码

send()

向服务器发送请求，用于 GET 请求。

send(string)

向服务器发送请求，用于 POST 请求。

setRequestHeader()

将标签/值对添加到要发送的标头。

XMLHttpRequest 对象属性

属性

描述

onload

定义接收到（加载）请求时要调用的函数。

onreadystatechange

定义当 readyState 属性发生变化时调用的函数。

readyState

保存 XMLHttpRequest 的状态。0：请求未初始化1：服务器连接已建立2：请求已收到3：正在处理请求4：请求已完成且响应已就绪

responseText

以字符串形式返回响应数据。

responseXML

以 XML 数据返回响应数据。

status

返回请求的状态号200: "OK"403: "Forbidden"404: "Not Found"如需完整列表请访问 Http 消息参考手册

statusText

返回状态文本（比如 "OK" 或 "Not Found"）

onreadystatechange 属性

readyState 属性保存 XMLHttpRequest 的状态。

onreadystatechange 属性定义了一个回调函数，当 readyState 改变时执行该函数。

status 属性和 statusText 属性保存 XMLHttpRequest 对象的状态。

属性

描述

onreadystatechange

定义当 readyState 属性改变时调用的函数。

readyState

保存 XMLHttpRequest 的状态。0：请求未初始化1：服务器连接已建立2：请求已收到3：正在处理请求4：请求已完成且响应已就绪

status

返回请求的状态号200: "OK"403: "Forbidden"404: "Not Found"如需完整列表请访问 Http 消息参考手册

statusText

返回状态文本（比如 "OK" 或 "Not Found"）。

onload 属性

使用 XMLHttpRequest 对象时，您可以定义一个回调函数，以便在请求收到答复时执行。

请在 XMLHttpRequest 对象的 onload 属性中定义该函数：

实例

xhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

案例：

axios和express是什么关系 axios 和ajax_ajax_04

 Java代码

@WebServlet("/ajaxServlet")
public class Demo01AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 向浏览器响应字符串 hello ajax!
        // 设置响应类型和编码，注：text/plain为纯文本类型
        response.setCharacterEncoding("utf-8");
        response.getWriter().write("你好，欢迎来到ajax家族");
    }
}

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax入门</title>
</head>
<body>
<script>
    // 1.创建核心对象
    let xmlhttp =new XMLHttpRequest();
    // 2.发送请求
    xmlhttp.open("get","http://localhost:8080/ajax/ajaxServlet");
    xmlhttp.send();
    // 3.处理响应
    xmlhttp.onreadystatechange = function (){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
            alert(xmlhttp.responseText);
        }
    }

</script>
</body>
</html>

AJAX实例：

使用AJAX验证用户名是否存在

需求：在完成用户注册时，当用户名输入框失去焦点时，校验用户名是否在数据库已存在 服务器先不访问数据库，直接判断用户名，如果用户名为zhangsan，则表示用户已经存在，否则用户名可以注册使用。

axios和express是什么关系 axios 和ajax_javascript_05

java代码：

package com.itheima.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;
import java.io.PrintWriter;

@WebServlet("/selectUserServlet")
public class Demo02SelectUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 模拟注册,假设用户名为zhangsan表示用户存在
        String username = request.getParameter("username");
        boolean result = "zhangsan".equals(username);
        // 设置响应类型和编码，注：text/plain为纯文本类型
        response.setContentType("text/plain;charset=utf-8");
        response.getWriter().write(""+result);
    }
}

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="login.html">登录</a>
    </div>
    <form id="reg-form" action="#" method="get">
        <table>
            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名已存在</span>
                </td>
            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>

            <tr>
                <td>验证码</td>
                <td class="inputs">
                    <input name="checkCode" type="text" id="checkCode">
                    <img src="imgs/a.jpg">
                    <a href="#" id="changeImg">看不清？</a>
                </td>
            </tr>
        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>
</div>
<script>
    document.getElementById("username").onblur = function () {
        let username = document.getElementById("username").value;
        let xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "selectUserServlet?username=" +username);
        xmlhttp.send();
        // onreadystatechange
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                if (xmlhttp.responseText == "true") {
                    document.getElementById("username_err").style.display = '';
                } else {
                    document.getElementById("username_err").style.display = 'none';
                }
            }
        }
    }
</script>
</body>
</html>

Axios 异步框架

Axios 对原生的AJAX进行封装，简化书写 官网：Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js

异步和框架之间的区别是：异步是一种编程模型，用于实现并发性，而框架是一组代码和库，用于实现特定的应用程序功能。异步编程可以在任何框架中使用，但是框架本身可能或可能不支持异步编程。 

Axios 快速入门

1.引入 axios 的 js 文件

位置：G:\frontEndDev\工具&配置\2. axios\js\axios-0.18.0.js

axios和express是什么关系 axios 和ajax_javascript_06

<script src="js/axios-0.18.0.js"></script>

2.使用axios 发送请求，并获取响应结果

get请求

axios({   method:"get", url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"})
.then(function (resp) {
alert(resp.data);
}
)

post请求

axios({    method:"post",   url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
data:"username=zhangsan"})
.then(function (resp) {    alert(resp.data);});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Axios入门</title>
</head>
<body>
<script src="js/axios-0.18.0.js"></script>
<script>
    debugger
    // 使用axios发送AJAX的GET请求
   /* axios.get("axiosServlet?username=zhangsan")
        .then(function (resp){
            alert(resp.data)
        });*/
    // 使用axios发送AJAX的POST请求
    axios({method:"POST",
        url:"axiosServlet",
        data:"username=zhangsan"})
        .then(function (resp){
            alert(resp.data);
        });
</script>
</body>
</html>
3.Axios 请求方式别名

为了方便起见， Axios 已经为所有支持的请求方法提供了别名。

方法名

作用

get(url)

发起GET方式请求

post(url,请求参数)

发起POST方式请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Axios入门</title>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>

<script>
    // 使用axios发送AJAX的GET请求
/*    axios({
        method: "GET",
        url: "http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
    }).then(function (resp) {
        // resp.data: 响应数据
        alert(resp.data);
    });*/

    // 使用axios发送AJAX的POST请求
    axios({
        method: "POST",
        url: "http://localhost:8080/ajax-demo/axiosServlet",
        data: "username=zhangsan"
    }).then(function (resp) {
        // resp.data: 响应数据
        alert(resp.data);
    });
</script>
</body>
</html>

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Axios入门</title>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>

<script>
    // 复制上一个案例的代码添加axios的别名请求方式
    // 使用axios发送AJAX的GET请求
    /*    axios({
            method: "GET",
            url: "http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
        }).then(function (resp) {
        // resp.data: 响应数据
            alert(resp.data);
        });*/

    // axios.get(url): 直接发送get请求
    /*axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan&password=666")
        .then(function (resp) {
            // resp.data: 响应数据
            alert(resp.data);
        });*/

    // 使用axios发送AJAX的POST请求
    /*axios({
        method: "POST",
        url: "http://localhost:8080/ajax-demo/axiosServlet",
        data: "username=zhangsan"
    }).then(function (resp) {
        // resp.data: 响应数据
        alert(resp.data);
    });*/

    // axios.post(url, 请求参数): 发送post请求
    axios.post("http://localhost:8080/ajax-demo/axiosServlet", "username=zhangsan&password=123")
        .then(function (resp) {
            alert(resp.data);
        });
</script>
</body>
</html>