原生ajax可能是你头疼的一个东西,简单说一下
首先模拟一下 创建一个json文件
大概步骤呢 4步
- 初始化xml对象
var xml =new XMLHttpRequest();
- 打开与服务器的链接通道
xml.open("get",".文件路径",true);
请求方式两种:
GET 不安全 传输是通过url地址栏携带的 最大限制约等2KB 传输效率快
GET请求能够被缓存,GET请求会保存在浏览器的浏览记录中,以GET请求的URL能够保存为浏览器书签,post请求不具有这些功能。
POST相对安全 不通过url地址传输 理论无大小限制 传输效率慢…
- 向服务器发送请求
xml.send(data);
- xmlhttp.onreadystatechange=state_Change
注释:onreadystatechange 是一个事件句柄。它的值 (state_Change) 是一个函数的名称,当 XMLHttpRequest 对象的状态发生改变时,会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时,我们才执行代码。
ajax中的两种状态码:
HTTP协议状态码: status
200: 成功,并且没有任何异常
404: 地址路径出现问题,前端代码的路径有问题
1xx 信息状态码,服务器正在处理
2xx 成功
3xx 重定向
4xx 前端代码问题
5xx 后端出现问题
ajax请求状态码:
0 未初始化 open()调用之前
1 与服务器建立连接
2 请求发送
3 服务器正在处理
4 服务器处理完成并返回内容
<script>
//初始化xml对象
var xml =new XMLHttpRequest();
//打开与服务器的链接通道
xml.open("get","./package.json",true);
//向服务器发送请求
xml.send(data);
//
xml.onreadystatechange = function(){
/*
readyState 属性返回当前文档的状态(载入中……)。
该属性返回以下值:
uninitialized - 还未开始载入
loading - 载入中
interactive - 已加载,文档与用户可以开始交互
complete - 载入完成
*/
if(xml.readyState = 4&&xml.status == 200){
//xml.response 获取到的的数据
console.log(xml.response);
//callback
}
}
</script>