Ajax笔记

之前都是使用jsp来获取后端Servlet传输到前端的数据，但是jsp的缺点有很多，现在一般都不用jsp

概念

AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。

作用：

与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器的响应数据(使用AJAX+HTML就可以替换JSP页面了)
异步交互：可以不重新加载整个页面的情况下，与服务器交换数据并更新部分的网页。像用户名校验、搜索联想等

快速入门

编写一个Servlet，用response输出字符串

//1`获取请求参数
      String username = request.getParameter("username");
      boolean flag=false;
      //2`判断是否存在，这里简化
      if("zs".equals(username)){
          flag=true;
      }
   
      //3`输出结果
      response.getWriter().write(flag+"");

创建XMLHttpRequest核心对象—>用于和服务端交互

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 对象属性

属性	描述
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”）

//1`创建核心对象
var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
} else {
    // code for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

发送请求

方法	描述
open(method, url, async)	规定请求的类型 method：请求的类型：GET 还是 POST url：服务器（文件）位置 async：true（异步）或 false（同步）
send()	向服务器发送请求（用于 GET）
send(string)	向服务器发送请求（用于 POST）

GET 还是 POST？

GET 比 POST 更简单更快，可用于大多数情况下。

不过，请在以下情况始终使用 POST：

缓存文件不是选项（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 无大小限制）
发送用户输入（可包含未知字符），POST 比 GET 更强大更安全

//2`向服务器发送请求
      xhttp.open("GET", "http://localhost:8080/AJAX/demoServlet?username="+username);
      xhttp.send();

获取响应数据

onreadystatechange 属性

属性	描述
onreadystatechange	定义了当 readyState 属性发生改变时所调用的函数。
readyState	保存了 XMLHttpRequest 的状态。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 正在处理请求 4: 请求已完成且响应已就绪
status	200: “OK” 403: “Forbidden” 404: “Page not found” 如需完整列表，请访问 Http 消息参考手册
statusText	返回状态文本（例如 “OK” 或 “Not Found”）

每当 readyState 发生变化时就会调用 onreadystatechange 函数。

//3`获取响应
      xhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
              let responseText = xhttp.responseText;
              console.log(responseText);
              if(responseText=="true"){
                  //用户名存在
                  //显示提示
                  document.getElementById("userExit").style.display='';
              }
              else{
                  //用户名不存在
                  //不显示提示
                  document.getElementById("userExit").style.display="none";
   
              }
          }
      };

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" name="username" id="user">
<span id="userExit"  style="display: none;color: red">用户名已存在</span>
<script>
    document.getElementById("user").onblur=function () {
        var username=this.value;
        console.log(username)
        //1`创建核心对象
        var xhttp;
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2`向服务器发送请求
        xhttp.open("GET", "http://localhost:8080/AJAX/demoServlet?username="+username);
        xhttp.send();

        //3`获取响应
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                let responseText = xhttp.responseText;
                console.log(responseText);
                if(responseText=="true"){
                    //用户名存在
                    //显示提示
                    document.getElementById("userExit").style.display='';
                }
                else{
                    //用户名不存在
                    //不显示提示
                    document.getElementById("userExit").style.display="none";

                }
            }
        };
    }


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

Axios

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

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

特性

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

基本使用

axios(js对象).then(回调函数)

//1`发送get请求
axios({
    method:"get",
    url:"http://localhost:8080/AJAX/axiosdemo?username=zs"
}).then(
    function (response){
        document.getElementById("content").innerHTML=response.data;
    }
)

//2`发送post请求
axios({
    method: "post",
    url: "/axiosdemo",
    data:"username=zs",
    baseURL:"http://localhost:8080/AJAX"//会自动加载url前面
}).then(
    function (res){
        document.getElementById("content").innerHTML=res.data;
    }
)

使用别名

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

在使用别名方法时， url、method、data 这些属性都不必在配置中指定。

get请求

axios.get("http://localhost:8080/AJAX/axiosdemo?username=zs").then(
    function (res){
        document.getElementById("content").innerHTML=res.data;
    }
)

get请求也可以这样写参数

axios.get("http://localhost:8080/AJAX/axiosdemo",{
    params:{username:"zs"}
}).then(
    function (res){
        document.getElementById("content").innerHTML=res.data;
    }
)

post请求

axios.post("http://localhost:8080/AJAX/axiosdemo",{
    username:"zs"
}).then(
    function (res){
        document.getElementById("content").innerHTML=res.data;
    }
)

JSON

JSON: JavaScript Object Notation(JavaScript 对象表示法)

JSON 是存储和交换文本信息的语法，类似 XML。

JSON 比 XML 更小、更快，更易解析。

JSON数据和JAVA对象转换

请求数据：JSON字符串—>JAVA对象

响应数据：JAVA对象—>JSON字符串

基本使用

导入坐标

<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.79</version>

JAVA对象–>JSON

String s = JSON.toJSONString(user);
//{"age":18,"name":"张三","sub":["语文","英语"]}

JSON–>JAVA对象

User user1 = JSON.parseObject("{\"age\":19,\"name\":\"李四\",\"sub\":[\"语文\",\"英语\"]}", User.class);