ajax --- async javascript and xml 前后端交互技术
ajax是 异步 操作
使用 ajax 与 服务器接口 交互流程：
// 1. 创建对象
// 内置对象 XMLHttpRequest
var xhr = new XMLHttpRequest()
// 2. 设置请求参数
// xhr.open('请求方式','请求地址',是否异步)
xhr.open('get', 'http://localhost:8888/test/first',true)
console.log(xhr.readyState);
// 3. 发送
// xhr.send()
xhr.send()
console.log(213, xhr.readyState);
// 4. 监听请求状态
// 使用readystatechange事件 当ajax请求的状态发生了变化触发事件
xhr.onreadystatechange = function () {
// 当接受到完整数据时 进行下一步
if (xhr.readyState === 4) {
// 当状态码为2开头时 进行下一步
if (xhr.status >= 200 && xhr.status < 300) {
// 接受对方响应的数据
// xhr.responseText
var res = xhr.responseText
console.log(res);
}
}
}
提到的方法和属性：
XMLHttpRequest 内置的对象
readystatechange 监听请求状态的事件
readyState 当前文档状态
0 --- 未初始化,已创建对象，但未设置请求参数(未调open方法)
1 --- 载入，请求未发送(未调用sand方法)
2 --- 载入完成，请求发送完成
3 --- 交互中，接收到 部分 响应数据
4 --- 完成，接受到了完整数据，且连接已关闭
status 状态码
1开头：正在进行中
2开头：成功
3开头：重定向中 - 缓存
4开头：客户端错误
5开头：服务器错误
responseText 服务器反馈的数据
携带参数的方法：
1. get请求 携带参数：
1.1 在使用open()设置请求参数时
在请求地址的末尾添加 问号 ?
1.2 问号后接 键值对 形式的参数
1.3 键值对之间 用 & 隔开
xhr.open('get','http://localhost:8888/test/third?name=李四&age=888');
2. post请求 携带参数：
2.1 在 open() 和 send() 之间添加头信息
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
2.2 将需要传递的参数放在 send() 中
[同样是 键值对 & 隔开 但卡头不需要添加 ?]
ajax请求文件：
ajax除了可以请求后端接口外 还可以请求 任意类型的文件
[前提：被请求的文件必须在web服务器中]
方法：
将open()方法中 请求地址改为文件路径即可
--------------------------------------------------
相关扩展：
请求js文件时 把所接受的 ”字符串”代码 当作 js代码 执行
eval(接受到的数据)
请求xml文件时 需要另外的接受数据方法
xhr.responseXML
[xml的节点中没有 innerText 只有 innerHTML]
json对象 与 json字符串：
1. json对象
json对象的 键 必须用 双引号 包裹
json对象的 值 如果是 字符串 也必须用 双引号 包裹
json对象的 最后一行 不能带 逗号
2. json字符串
跟伪数组一样 ajax接受数据时 会出现格式像对象 但不是对象的字符串
--------------------------------------------------
- 将json字符串 转成 json对象
JSON.parse(json字符串)
[只能转 json字符串 数字字符串 布尔值 null] - 将json对象 转成 json字符串
JSON》stringify(json对象)
get 与 post 的区别
- post相对get更安全
- get参数大小限制为4kb post无限制
默认get请求的行为：
- 地址栏跳转
- a标签跳转
- 引入文件
- form默认提交
- ajax的get请求
关于控制台
- 发送的请求 可以在
Network中查看 - 发送的参数(数据) 可以在
Network / Payload中查看 - 响应数据 可以在
Network / Preview中查看
