【JavaWeb】Ajax - 技术栈

xhr.open(method, url, [async][, user][, password])
//method：表示当前的请求方式，常见的有GET、POST
//url：服务端地址
//async：布尔值，表示是否异步执行操作，默认为true
//user: 可选的用户名用于认证用途；默认为null
//password: 可选的密码用于认证用途，默认为null

通过XMLHttpRequest对象的send（）方法发送给服务端

java 复制代码

xhr.send([body])
//body: 在 xhr 请求中要发送的数据体，如果不传递数据则为 null 如果使用GET请求发送数据的时候，需要注意如下：
//将请求数据添加到open()方法中的url地址中
//发送请求数据中的send()方法中参数设置为null

接受返回值并处理

java 复制代码

request.onreadystatechange = function(e){
    if(request.readyState === 4){ // 整个请求过程完毕
        if(request.status >= 200 && request.status <= 300){
            console.log(request.responseText) // 服务端返回的结果
        }else if(request.status >=400){
            console.log("错误信息：" + request.status)
        }
    }
}
 
//readyState 属性一共有5个值，分别表示不同的请求响应阶段：
 
//0： 还未创建请求，即未调用 open() 方法
//1： 已调用 open() 方法，但未发送 send() 方法
//2： 已调用 send() 方法，但未接收到响应
//3： 已接收到部分响应
//4： 已接收到全部的响应

五、Ajax应用场景

动态加载内容：Ajax可以在不刷新整个页面的情况下，通过异步请求从服务器获取数据并动态更新页面的部分内容，从而实现更流畅的用户体验
表单验证：Ajax可以在不刷新整个页面的情况下，实时验证表单数据的合法性（如手机号、唯一性校验）并提供反馈信息
搜索建议：当用户在搜索框中输入内容时，Ajax可以在输入框下方实时显示相关的搜索建议，帮助用户更快速地找到自己需要的信息
购物车更新：Ajax可以在不刷新整个页面的情况下，实时更新购物车中的商品数量以及总价等信息
实时聊天：Ajax可以实现与服务器的实时通信，让用户在不刷新页面的情况下，实时接收到其他用户的消息（如直播评论、点赞、礼物等）

六、Ajax常见问题

1.缓存问题

在一些浏览器中存在缓存机制，Ajax只会发送一次请求，剩余请求则不会再发送给浏览器，而是直接读取缓存中的数据

解决方案：浏览器缓存是通过URL地址记录，只需更改URL地址即可解决缓存问题，xhr.open（"get"，"/demo?t="+Date.now()）

2.跨域问题

当一个页面向另一个不同域名/不同协议/不同端口的页面请求资源时，因为浏览器的同源策略，会产生跨域问题

解决方案：

后台Http请求转发
后台配置Cors
使用SpringCloud网关
使用Nginx转发

3.请求超时与网络异常

当请求时间过长或网络出现问题时，可单独做一些特殊处理

javascript 复制代码

btn.addEventListener('click', function(){
            const xhr = new XMLHttpRequest();
            //超时时间设置为2s
            xhr.timeout = 2000;
            //超时处理
            xhr.ontimeout = function(){
                // 超时相关操作
            }
            //网络异常处理
            xhr.onerror = function(){
                // 网络异常相关操作
            }

            xhr.open("GET",'http://127.0.0.1:8080/demo');
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status< 300){
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })

4.取消请求

当请求发出但并未响应时，可通过abort（）取消请求

javascript 复制代码

const btns = document.querySelectorAll('button');
        let x = null;
        btns[0].onclick = function(){
            x = new XMLHttpRequest();
            x.open("GET",'http://127.0.0.1:8080/demo');
            x.send();
        }
        // 取消请求
        btns[1].onclick = function(){
            x.abort();
        }

七、常见Ajax三种请求方式

1.jQuery请求

jQuery是⼀个优秀的js框架，对JS原⽣的Ajax进⾏了封装，封装后的Ajax的操作⽅法更简洁，功能更强⼤，jQuery三种常见请求方式：

|--------|--------------------------------------------|
| 请求方式 | 语法 |
| Ajax请求 | $.ajax([settings]) |
| GET请求 | $.get(url,[data],[callback],[type]) |
| POST请求 | $.post(url,[data],[callback],[type]) |

|----------|--------------------------------|
| 参数名称 | 描述 |
| url | 请求地址 |
| data | 请求参数 |
| type | 请求类型 |
| async | 布尔类型true/false，代表异步和同步，默认为true |
| dataType | 回传数据类型 |
| success | 成功回调函数 |
| error | 失败回调函数 |

javascript 复制代码

// Ajax请求
$.ajax({
     url:"",
     data:{},
     type:"post/get",
     async:true,
     dataType:"text",
     success:function(obj){
     },
     error:function(){
     }
})

javascript 复制代码

// GET请求
$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

javascript 复制代码

// POST请求
$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

2.Axios请求

javascript 复制代码

    //配置 baseURL
    axios.defaults.baseURL = 'http://127.0.0.1:8080';
    btns[2].onclick = function () {
      axios({
        //请求方法
        method: 'POST',
        //url
        url: '/axios-server',
        //url参数
        params: {
          vip: 10,
          level: 30
        },
        //头信息,此部分如果使用自定义的头信息,需要服务端进行相应修改,正常不设置
        headers: {
          a: 100,
          b: 200
        },
        //请求体参数
        data: {
          username: 'admin',
          password: 'admin'
        }
      }).then(response => {
        //响应状态码
        console.log(response.status);
        //响应状态字符串
        console.log(response.statusText);
        //响应头信息
        console.log(response.headers);
        //响应体
        console.log(response.data);
      })
    }

3.Fetch请求

javascript 复制代码

btn.onclick = function () {
      fetch('http://127.0.0.1:8080/fetch-server?vip=10', {
        //请求方法
        method: 'POST',
        //请求头
        headers: {
          name: 'aodi'
        },
        //请求体
        body: 'username=admin&password=admin'
      }).then(response => {
        // return response.text();
        return response.json();
      }).then(response => {
        console.log(response);
      });
    }