AJAX 这一篇就够了（学习javaWeb）

目录

一.AJAX·快速入门

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

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

3.向服务器发送请求

4.获取服务器响应数据

二.Ajax案例（练手）验证用户是否存在

1.selectUserServlet

2.register.html

3.效果: (异步)

 三.Axios异步框架 快速入门

1.Axios对原生的Ajax进行封装，简化书写

2.官网：Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js (axios-http.cn)

案例：1. axiosServlet 

案例：2. 02-axios-demo.html

四.Axios请求方式的别名

1.为了方便起见，Axios已经未所有支持的请求方式提供了别名

1.概念：AJAX（Asynchronous JavaScript And Xml）异步的JavaScript和Xml

2.AJAX作用：

（1）.与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器相应的数据

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

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

3.同步与异步

同步：客户端需要等待服务端的处理（页面刷新）

异步：客户端不需要等待服务端的处理（页面不刷新）

一.AJAX·快速入门

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

package com.itheima.web.servlet;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1.响应数据
        response.getWriter().write("hello ajax");
    }

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

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

var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

3.向服务器发送请求

xhttp.open("GET", "http://localhost:8080/ajax_demo/ajaxServlet", true);//异步写全路径，有利于前后端分离
    xhttp.send();

4.获取服务器响应数据

 xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("demo").innerHTML =
                    alert(this.responseText);
            }
        };

二.Ajax案例（练手）验证用户是否存在

1.selectUserServlet

package com.itheima.web.servlet;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet("/selectUserServlet")
public class SelectUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1. 接收用户名
        String username = request.getParameter("username");

        //2. 调用service查询User对象

        boolean flag = true;

        //3. 响应标记
        response.getWriter().write("" + flag);
    }

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

2.register.html

<script>

    //1. 给用户名输入框绑定 失去焦点事件
    document.getElementById("username").onblur = function () {
        //2. 发送ajax请求
        // 获取用户名的值
        var username = this.value;

        //2.1. 创建核心对象
        var xhttp;
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.2. 发送请求
        xhttp.open("GET", "http://localhost:8080/ajax_demo/selectUserServlet?username="+username);
        xhttp.send();

        //2.3. 获取响应
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                //alert(this.responseText);
                //判断
                if(this.responseText == "true"){
                    //用户名存在，显示提示信息
                    document.getElementById("username_err").style.display = '';
                }else {
                    //用户名不存在 ，清楚提示信息
                    document.getElementById("username_err").style.display = 'none';
                }
            }
        };
    }
</script>

3.效果: (异步)

 三.Axios异步框架 快速入门

1.Axios对原生的Ajax进行封装，简化书写

2.官网：Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js (axios-http.cn)

案例：1. axiosServlet 

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;

@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("get...");
        //1.接受一下请求参数
        String username = request.getParameter("username");
        System.out.println(username);

        //2.响应数据
        response.getWriter().write("hello Axios");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("post...");
        this.doGet(request, response);
    }
}

案例：2. 02-axios-demo.html

<script>
    /*//1.get请求方式
    axios({
        method:"get",
        url:"http://localhost:8080/ajax_demo/axiosServlet?username=zhangsan"
    }).then(function (resp){
        alert(resp.data);
    })*/
    //2.post请求方式
    axios({
        method:"post",
        url:"http://localhost:8080/ajax_demo/axiosServlet",
        data:"username=zhangsan"
    }).then(function (resp){
        alert(resp.data);
    })

</script>

四.Axios请求方式的别名

1.为了方便起见，Axios已经未所有支持的请求方式提供了别名

(1).axios.get(url[,config])

(2).axios.delete(url[,config])

(3).axios.head(url[,config])

(4).axios.options(url[,config])

(5).axios.post(url[,data[config]])

(6).axios.put(url[,data[,config]])

(7).axios.patch(url[,data[,config]])

 发送get请求：

axios.get("http://localhost:8080/ajax_demo/axiosServlet?username=zhangsan").then(function (resp){
        alert(resp.data);
    })

 发送post请求：

axios.get("http://localhost:8080/ajax_demo/axiosServlet","username=zhangsan",).then(function (resp){
        alert(resp.data);
    })