1、创建一个XMLHttpRequest对象,这里可以处理一下ie6的兼容问题
2、通过open()与服务器建立连接,这里有三个参数
参数一:请求方式(无论是GET数据还是POST数据,发送的形式都是字符串)
参数二:地址
参数三:是否异步
3、通过send()发送请求 也可以用send接受post发送的数据
4、通过onredystatechange监听(页面或者readystate),如果readystate==4(这里只是完成)status==200这两个条件同时满足是就代表于后台搭建成功
5、通过responseText来获取服务器返回的数据(通过回调函数的参数获取)
代码如下:
注意:这里的地址 是自己建的json文件 随便写的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
<script>
function ajax(type, url, success, error) {
// 浏览器兼容处理
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest()
} else {
var xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
const methods = type.toLowerCase()
// 三个参数
// 参数一 请求方式
// 参数二 请求地址
// 参数三 是否异步 true 为异步 false 不是异步
xhr.open(methods, url, true)
// 发送请求
xhr.send()
// 监听事件
xhr.onreadystatechange = function () {
// 判断
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
// 成功时返回数据
success && success(xhr.responseText)
} else {
// 失败是返回状态码
error && error(xhr.status)
}
}
}
}
ajax(
'get',
'../data/data.json',
function (res) {
console.log(res)
},
function (err) {
console.log(err)
}
)
</script>
</html>
拓展一下:
ajax状态值
0---> ajax 对象创建完成 但是没有与后台建立链接
1---->ajax 对象与后台建立连接,但是还没有发送完成
2---->ajax 对象发送完成 数据还没有接收到
3---->ajax 原始数据 部分数据接收完成 (数据还没有进行加密 解密)
4---->ajax 数据最终接收完成
同步异步
程序中
同步: 一个一个去做
异步: 同时做多个事情,比如:一边打游戏,一边聊天,一边吃饭
数据请求时候都是异步的 事件 定时器 promise
生活中
同步: 同时做多个事情
异步: 一个一个做 程序中正好相反
常见HTTP状态码
200 -> 请求成功
304 -> 重定向
403 -> 服务器拒绝请求
404 -> 请求的资源不存在
414 -> 请求的地址过长
500 -> 后端程序出现了问题
502 -> 后端服务器的问题