AJAX

AJAX简介

• AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
• AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
• AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的 情况下。通过在后台与服务器进行少量数据交换，
• AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况 下，对网页的某部分进行更新。
• 传统的网页（不使用AJAX）如果需要更新内容，必需重载整个网页面。
  有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

获取登录页面

// 创建 AJAX 对象
var r = new XMLHttpRequest()
// 设置请求方法和请求地址
r.open('GET', '/login', true)
// 注册响应函数
r.onreadystatechange = function() {
    if(r.readyState == 4) {
        console.log('请求成功', r.responseText.length)
    }
}
// 发送请求
r.send()

readyState什么意思：
0 （未初始化）
对象已建立，但是尚未初始化（尚未调用open方法）
1 （初始化）
已调用send()方法，正在发送请求
2 （发送数据）
send方法调用完成，但是当前的状态及http头未知
3 （数据传送中）
已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 （完成）
// 数据接收完毕，此时可以通过通过responseBody和responseText获取完整的回应数据

发送登录数据

// 创建 AJAX 对象
var r = new XMLHttpRequest()
// 设置请求方法和请求地址
r.open('POST', '/login', true)
// 设置发送的数据的格式
r.setRequestHeader('Content-Type', 'application/json')
// 注册响应函数
r.onreadystatechange = function() {
    if (r.readyState === 4) {
        console.log('state change', r, r.status, r.response)
        var response = JSON.parse(r.response)
        console.log('response', response)
    } else {
        console.log('change')
    }
}
// 发送请求
var account = {
    username: 'gua',
    password: '123',
}
var data = JSON.stringify(account)
r.send(data)

可以封装成这样的一个函数

var ajax = function(method, path, headers, data, reseponseCallback) {
    var r = new XMLHttpRequest()
    // 设置请求方法和请求地址
    r.open(method, path, true)
    // 设置发送的数据的格式
    r.setRequestHeader('Content-Type', 'application/json')
    // 注册响应函数
    r.onreadystatechange = function() {
        if(r.readyState === 4) {
            reseponseCallback(r)
        }
    }
    // 发送请求
    r.send(data)
}
ajax('GET', '/login', null, '', function(r){
    console.log(r.status, r.response)
})

只发请求没有需要数据的用GET，要数据的就是POST

ajax('GET', 'https://api.douban.com/v2/book/1220562', null, '', function(r){
    // console.log(r.status, book)
    var book = JSON.parse(r.response)
    var imgUrl = book.image
    var body = document.querySelector('body')
    var img = `
        <img src=${imgUrl}>
    `
    body.insertAdjacentHTML('beforeend', img)
})