AJAX使用和固定格式

     ajax 的全称 Asynchronous JavaScript and XML ( 异步 JavaScript 和 XML ) 。

     ajax 是一种创建交互式网页应用的网页开发技术 。其中最核心的依赖是浏览器提供的

XMLHttpRequest 对象，是这个对象使得浏览器可以发出 HTTP 请求与接收 HTTP 响应。实现了在页面不刷新的情况下和服务器进行交互。

方法                                                      描述

new XMLHttpRequest()                        生成一个 XMLHttpRequest 对象

open(‘ 请求类型 ’ , ’URL’ , ’ 请求方式 ’)     1. 请求类型： get 、 post

                                                              2. 请求地址：服务器（文件）位置

                                                              3. 请求方式： true 为异步， false 为同步

 

send()                                                    发送请求

onreadystatechange                            该方法可以定义响应执行函数，当 readyState 属性发

                                                             生变化时会自动调用该方法。

readyState                                           交互流程，有 5 个阶段

                                                             0. 请求初始化

                                                             1. 服务器链接已建立

                                                             2. 请求已接收

                                                             3. 正在处理请求

                                                             4. 请求已完成且响应已就绪

status                                                   HTTP 响应状态码

                                                             200 ： OK （请求成功）

                                                             403 ： Forbidden （禁止）

                                                             404 ： Page not found （未找到）

responseText                                        响应文本（返回的数据）

setRequestHeader(‘ 头部名称 ’ , ‘ 头部值 ’)      请求头，向请求添加 HTTP 头部

ajax 使用方法：

1. 创建 XMLHttpRequest 对象

2. 使用 open 方法指定要请求的地址、类型和方式。

3. 使用 send 方法发送请求，如果需要传参：

get 方式要将参数拼接到 URL 后边，参数间 & 分割。例： ’index.php?name= 张三 &age=18’

post 方式可以将参数放到 send() 里。例： send(‘name= 张三 &age=18’)

4. 绑定 onreadystatechange 事件，判断 readyState 和 status 的状态。

5. 接收数据，通过 json 转换使用。

let xhr = new XMLHttpRequest();
xhr.open('get','js/index.json',true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
let text = xhr.responseText;
console.log(text);
let data = JSON.parse(text);
console.log(data);
}
};

注意：本地 json 文件属于静态资源，一般情况下不支持 post 方式请求。