JS-ajax

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接受数据时 会出现格式像对象 但不是对象的字符串
--------------------------------------------------

1. 将json字符串 转成 json对象
   JSON.parse(json字符串)
       [只能转 json字符串 数字字符串 布尔值 null]
2. 将json对象 转成 json字符串
   JSON》stringify(json对象)

get 与 post 的区别

1. post相对get更安全
2. get参数大小限制为4kb post无限制

默认get请求的行为：

1. 地址栏跳转
2. a标签跳转
3. 引入文件
4. form默认提交
5. ajax的get请求

关于控制台

1. 发送的请求 可以在 Network 中查看
2. 发送的参数(数据) 可以在 Network / Payload 中查看
3. 响应数据 可以在 Network / Preview 中查看