--Ajax---优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_49405762/article/details/126654954

本文详细介绍了Ajax的基本概念和使用，包括GET和POST请求的实现。通过原生JavaScript、JQuery以及Vue（使用axios库）展示了不同方式发起Ajax请求的方法。强调了Ajax的异步特性以及在页面局部刷新中的应用，并指出Ajax无法通过后台跳转页面，而是需要前端JS处理页面跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

🚩前言

🌻今天进行Ajax的学习

✏️Ajax

异步刷新（局部刷新），前端技术——可以给后台发请求
四种发请求的方式
地址栏
a标签
form表单
location.href或window.open()
异步：整个页面不会全部刷新，只有某个局部在刷新
例如：验证用户名是否存在
刷新：
请求头：
post请求才有请求体
Ajax发起请求，后台给出的响应会回到Ajax
JS原生的Ajax
re’a’dread
0——初始化成功，open未调用
1——open被调用，建立的连接
2——send被调用，可以获取状态行和响应头
3——可以拿到响应体，响应体加载中
4——响应体下载完成，可以直接使用responseText

✒️GET请求

   // 向后台发请求
       // 使用ajax
       let xhr=new XMLHttpRequest();
       // 设置请求的方式和URL
       xhr.open("GET","hello?username="+user);
       // 发请求
       xhr.send(null);
       // 指定xhr的状态处理函数
       xhr.onreadystatechange=function () {
           if (this.readyState === 4){
               // 通过xhr的responseText获取到对应的响应体
               span.innerText=xhr.responseText;
           }
       };

✒️POST请求

 // 向后台发请求
       // 使用ajax
       let xhr=new XMLHttpRequest();
       // 发送POST请求
       xhr.open("POST","hello");
       // 设置请求头信息
       xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
       // 发请求,设置请求体
       xhr.send("username="+user);
       // 指定xhr的状态处理函数
       xhr.onreadystatechange=function () {
           if (this.readyState === 4){
               // 通过xhr的responseText获取到对应的响应体
               span.innerText=xhr.responseText;
           }
       };

✏️JQuery的Ajax

✒️发送GET请求

$.get(“hello?username=” + user, function (data) {
alert(data)
});

✒️发送POST请求

    $.post("hello","username=" + user, function (data) {
       alert(data)
   });

完整写法
$.ajax({
url:“hello”,
data:{“username=”:username},
type:“post”,
success:function (res) {
},
error:function (res) {

       },
   });

✏️Vue的Ajax（aixos）

对原生的Ajax的一个封装

ES6的：Promise语法

✒️GET请求

aixos发送GET请求，这个请求中如果有参数，还是一个默认的以文档流的形式发送，和之前的任何一种请求方式没有任何区别。

        get:function(){

           axios.get("wea?city="+this.city).then(function (response) {
               app1.msg2=response.data;
           });
       },

✒️POST请求

aixos发送POST请求，这个请求中如果有参数，会把请求体转成json串，然后发给后台

        post:function(){
           axios.post("wea",{"city":this.city}).then(function (response) {
               app1.msg2=response.data;
           })
       },

【封装对象的前提：json串中的数据的key和对象的属性名要一致】

注意点：
【使用Ajax发送请求，页面是不可以通过后台跳转页面，如果需要跳转页面，也是通过前端的JS来跳转，不可能通过Servlet来跳转】
【Ajax和form表单不能同时使用】
Ajax：不能跳转页面
form表单：一定要跳转页面的