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名字的来历
大致是这样,其实也是一种文本标记语言
<object>
<name>李华</name>
<age>114</age>
<about>逸一时,误一世,逸久逸久罢一龄</about>
</object>
不过现在,ajax也可以使用json传递数据,这种格式可读性明显更好一些
{name:'李华',age:114,about:"逸一时,误一世,逸久逸久罢一龄"}
(3)报文:
报文是一种传输格式,也是详见计算机网络吧....只能说
在http协议中,请求的方式是这样子的
请求报文
行 get(请求方式) url(地址) 1.0(x)
头 内容较多
空行
体 体可能有,也可能没有,与提交方式有关
请求有两种形式
- get:get请求主要用于获取数据,如果想要往后台传入数据,需要在附带在url的尾部,用?作为分隔
- post:请求主要用于提交数据,提交数据的方法为放在request的体中
回复报文
行 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