Ajax快速上手

json中不支持单引号，只支持双引号,js单和双都支持

1 AJAX 的过程的简单使用过程

• 1：先创建一个XMLHttpRequest();类型的对象，相当于打开了浏览器

eg:var xhr =new XMLHttpRequest()

• 2. 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址

xhr.open("GET","http://localhost:4000",true) xhr.open("GET",'./time.php') 一般我们都已get方式请求数据，以post方式获取数据

• 3.通过连接发送一次请求 —— 相当于回车或者点击访问发送请求 xhr.send(null)
• 4.指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作
• 5.服务器部署

  

xhr.onreadystatechange = function () {
// 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
    if (this.readyState === 4) {
    // 通过 xhr 的 responseText 获取到响应的响应体
    console.log(this)
    }
}

// open方法:参数
/*
配置网络请求
method:方法 GET POST
url:服务器地址
async:是否异步(布尔类型)

2.GET和POST的请求的不同:
http://www.test.com:9000

1)安全性:
post更安全

2)get请求向后台传递数据，是在地址栏中传输的
 http://www.test.com:9000?username=lucy&pwd=12345213

3)
get请求传递的数据大小是有限制的
post理论上是不限制大小的

4)一般用post向服务器提交数据，用get向服务器索取数据

*/

2.1. readyState

由于 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被 触发多次，所以我们有必要了解每一个状态值代表的含义：

readyState	状态描述	说明
0	UNSENT	代理（XHR）被创建，但尚未调用 open() 方法。
1	OPENED	open() 方法已经被调用，建立了连接
2	HEADERS_RECEIVED	send() 方法已经被调用，并且已经可以获取状态行和响应头
3	LOADING	响应体下载中， responseText 属性可能已经包含部分数据。
4	DONE	响应体下载完成，可以直接使用 responseText

2.1.1. 时间轴

var xhr = new XMLHttpRequest()
console.log(xhr.readyState)
// => 0
// 初始化 请求代理对象
xhr.open('GET', 'time.php')
console.log(xhr.readyState)
// => 1
// open 方法已经调用，建立一个与服务端特定端口的连接
xhr.send()

xhr.addEventListener('readystatechange', function () {
    switch (this.readyState) {
        case 2:
        // => 2
        // 已经接受到了响应报文的响应头
        // 可以拿到头
        // console.log(this.getAllResponseHeaders())
        console.log(this.getResponseHeader('server'))
        // 但是还没有拿到体
        console.log(this.responseText)
        break
        case 3:
        // => 3
        // 正在下载响应报文的响应体，有可能响应体为空，也有可能不完整
        // 在这里处理响应体不保险（不可靠）
        console.log(this.responseText)
        break

        case 4:
        // => 4
        // 一切 OK （整个响应报文已经完整下载下来了）
        // 这里处理响应体
        console.log(this.responseText)
        break
    }
})

通过理解每一个状态值的含义得出一个结论：一般我们都是在 readyState 值为 4 时，执行响应的后续逻辑。

xhr.onreadystatechange = function () {
    if (this.readyState === 4) {
    // 后续逻辑......
    }
}

2.2. 遵循 HTTP

本质上 XMLHttpRequest 就是 JavaScript 在 Web 平台中发送 HTTP 请求的手段，所以我们发送出去的请求任然是HTTP 请求，同样符合 HTTP 约定的格式：

// 设置请求报文的请求行
xhr.open('GET', './time.php')
// 设置请求头
xhr.setRequestHeader('Accept', 'text/plain')
// 设置请求体
xhr.send(null)
xhr.onreadystatechange = function () {
    if (this.readyState === 4) {
        // 获取响应状态码
        console.log(this.status)
        // 获取响应状态描述
        console.log(this.statusText)
        // 获取响应头信息
        console.log(this.getResponseHeader('Content‐Type')) // 指定响应头
        console.log(this.getAllResponseHeader()) // 全部响应头
        // 获取响应体
        console.log(this.responseText) // 文本形式
        console.log(this.responseXML) // XML 形式，了解即可不用了
    }
}

3. 具体用法

3.1. GET 请求

通常在一次 GET 请求过程中，参数传递都是通过 URL 地址中的 ? 参数传递。 浏览器地址栏只能发起get请求

var xhr = new XMLHttpRequest()
// GET 请求传递参数通常使用的是问号传参
// 这里可以在请求地址后面加上参数，从而传递数据到服务端
xhr.open('GET', './delete.php?id=1')
// 一般在 GET 请求时无需设置响应体，可以传 null 或者干脆不传
xhr.send(null)
xhr.onreadystatechange = function () {
    if (this.readyState === 4) {
    console.log(this.responseText)
    }
}
// 一般情况下 URL 传递的都是参数性质的数据，而 POST 一般都是业务数据

3.2. POST 请求

POST 请求过程中，都是采用请求体承载需要提交的数据。

var xhr = new XMLHttpRequest()
// open 方法的第一个参数的作用就是设置请求的 method
xhr.open('POST', './add.php')
// 设置请求头中的 Content‐Type 为 application/x‐www‐form‐urlencoded
// 标识此次请求的请求体格式为 urlencoded 以便于服务端接收数据
xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')
// 需要提交到服务端的数据可以通过 send 方法的参数传递
// 格式：key1=value1&key2=value2
xhr.send('key1=value1&key2=value2')
xhr.onreadystatechange = function () {
    if (this.readyState === 4) {
    console.log(this.responseText)
    }
}

3.3. 同步与异步

关于同步与异步的概念在生活中有很多常见的场景，举例说明。

同步：一个人在同一个时刻只能做一件事情，在执行一些耗时的操作（不需要看管）不去做别的事，只是等 待 异步：在执行一些耗时的操作（不需要看管）去做别的事，而不是等待

xhr.open() 方法第三个参数要求传入的是一个 bool 值，其作用就是设置此次请求是否采用异步方式执行，默认 为 true ，如果需要同步执行可以通过传递 false 实现：

console.log('before ajax')
var xhr = new XMLHttpRequest()
// 默认第三个参数为 true 意味着采用异步方式执行
xhr.open('GET', './time.php', true)
xhr.send(null)
xhr.onreadystatechange = function () {
    if (this.readyState === 4) {
    // 这里的代码最后执行
    console.log('request done')
    }
}
console.log('after ajax')

如果采用同步方式执行，则代码会卡死在 xhr.send() 这一步：

console.log('before ajax')
var xhr = new XMLHttpRequest()
// 同步方式
xhr.open('GET', './time.php', false)
// 同步方式 执行需要 先注册事件再调用 send，否则 readystatechange 无法触发
xhr.onreadystatechange = function () {
    if (this.readyState === 4) {
    // 这里的代码最后执行
    console.log('request done')
    }
}
xhr.send(null)
console.log('after ajax')

同步：按照顺序执行

异步：互不干扰

演示同步异步差异。

一定在发送请求 send() 之前注册 readystatechange （不管同步或者异步）

• 为了让这个事件可以更加可靠（一定触发），一定是先注册

了解同步模式即可，切记不要使用同步模式。 至此，我们已经大致了解了 AJAX 的基本 API 。