[前端基础]关于AJAX的一些梳理

1.AJAX概述

Asynchronous JavaScript And XML（异步 JavaScript 和 XML），它是一种用于在网页上进行异步数据交互的技术。通过 AJAX，前端可以通过 JavaScript 发送异步请求到服务器，获取数据并更新网页内容，而无需刷新整个页面。这使得网页可以在不中断用户操作的情况下实现动态更新和交互。

通俗点讲,AJAX是一种内置在原生javascrpit中的技术,可以帮助用户进行请求数据和获取数据

并非是一种编程语言,而是一种技术,他其实至少利用到了js内置的XMLHttprequest对象,再使用html等来显示数据.后面尝试用的axios,实际上是对AJAX的封装

2.AJAX的前置知识

ajax之前需要一些前置知识

(1)http,超文本传输协议,具体详见计算机网络部分,用于web端之间数据传输

(2)xml,一种文本格式,也是ajax名字的来历

大致是这样,其实也是一种文本标记语言

不过现在,ajax也可以使用json传递数据,这种格式可读性明显更好一些

{name:'李华',age:114,about:"逸一时,误一世,逸久逸久罢一龄"}

(3)报文:

报文是一种传输格式,也是详见计算机网络吧....只能说

请求报文

行      get(请求方式) url(地址) 1.0(x)
头      内容较多
空行
体      体可能有,也可能没有,与提交方式有关

回复报文

行      http/1.0(协议和版本)  200(状态码)  ok(状态字符串)    
头      内容较多
空行
体      主要的返回结果

(4)express框架

严格来说这其实不是ajax的知识,这玩意是快速搭建一个可以应答的伪后端...........express框架同样需要一共node.js环境才能使用,记得自己去安装.

var e=require("express");
const app=e();
//上面两个是node.js的内容,向模块express请求一共方法
//利用这个方法,创建一个对象

//设置路由规则
//这边两个自定义对象,request是对请求报文的封装,response是对回收报文的封装
//下面方法是接收请求,在当前服务器的server的位置上接收请求
//一旦接收了请求,就会触发这个箭头函数
app.get("/server", (request,response)=>{
    console.log("已经到达后端");
    //要设置回复报文头,才能正常进行跨域(重要)
    response.setHeader("Access-Control-Allow-Origin","*");
    response.send("hello Ajax");
})

//设置窗口监听服务
//因为前端请求的端口是8000,所以一旦这个窗口被进程占用,这里就会输出一次
app.listen(8000,()=>{
    console.log("8000正在监听中");
})

3.AJAX的工作步骤

AJAX的工作步骤其实很简单

1.建立xmlhttprequest对象\

 xmlhttprequest是ajax的核心,虽然现在不仅仅能传递xml

  //核心,先构架xmlhttprequset对象
            //这个对象不但负责发送请求,还负责接收请求
            const xhr=new XMLHttpRequest();

2.确定请求形势并且发送请求

 发送请求一共需要两个函数,一个是open,常用参数为三个(请求类型,请求地址,是否异步)

举个例子,一个get请求

 //此外,get请求是可以加上参数的,在请求的最末尾? fname=Bill & lname=Gates
            xhr.open("get","http://127.0.0.1:8000/server",true);

另一个是send函数,负责发送这个请求,如果是post请求,里面可以加上一个string类型的字符串

send();
send(string str);

3.后端接收并且返回结果

 后端接收并且返回结果,这个时候需要注意一个触发函数 onreadystatechange,该函数监听readystate的变化,该变量一共有五个数值

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

4.通过检测状态判断是否通畅

当结果为4的时候,代表请求完成了,这个时候可以读取的属性有三个

status:代表当前的状态号码(200为正常,4xx为请求错误,5xx为服务端错误)

statueText:状态字符串,只有OK和not found两种

5.js处理结果,并且体现在页面上

 js处理结果其实很简单,在确定了一切正常以后,可以通过xhr对象直接调用reponse

也可以具体一点,指定调用的是什么格式,例如reponseXml和reponseText两种

具体的处理代码如下

 function clk(){
            //核心,先构架xmlhttprequset对象
            //这个对象不但负责发送请求,还负责接收请求
            const xhr=new XMLHttpRequest();
            //open,这里是规定请求的类型
            //比如这里给了三个参数,意思是get请求,请求地址
            //此外,get请求是可以加上参数的,在请求的最末尾? fname=Bill & lname=Gates
            xhr.open("get","http://127.0.0.1:8000/server",true);
            //发送请求
            xhr.send();
            //如果readystatechange发生改变,就会触发这个数据
            //onreadystatechange 被触发五次（0-4），每次 readyState 都发生变化。
            xhr.onreadystatechange=()=>{
                //readystate一共有四个属性值,4就代表后端的数据已经完全返回前端了
                if(xhr.readyState===4){
                    //status一共有很多数值,不过200代表成功
                    //4xx代表前端出问题,5xx代表后端出了问题
                    //具体可以去看那个报文的结构
                    if(xhr.status===200){
                        console.log("正确的3,状态字符串为:"+xhr.statusText);
                        document.getElementById("ta").innerHTML=xhr.response;
                    }else{
                        console.log("错误2,状态码为:"+xhr.status);
                    }
                }else{
                    console.log("错误1,没有完整的返回对象");
                }
            }
        }

写在最后

Ajax其实已经很少有人搞原生了,但是这个很重要,所以临时记录一下

这篇写的很简陋,其实只是记录了自己的基本操作

建议更加深入,如果后面我在实际运用中得到了新的认识,会立刻补充

end