AJAX入门

听了方老师的课程，配上了阮一峰阮老师的教程食用，整理记录一些使用AJAX所需的知识点。

什么是AJAX

Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。

为什么使用AJAX

首先整理总结一下主要发送HTTP请求的方式及其优缺点

form 可以发请求，但是会刷新页面或新开页面
a可以发 get 请求，但是也会刷新页面或新开页面
img 可以发 get 请求，但是只能以图片的形式展示
link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示
script(JSONP) 可以发 get 请求，但是只能以脚本的形式运行
AJAX 不仅仅可以发送get请求，还可以发送post/put/delete请求；而且可以只刷新局部，不会刷新页面。利用CORS还可以规避同源策略，实现跨源访问。

使用方式

一个完整的使用AJAX完成HTTP请求的流程步骤为：

1.创建 XMLHttpRequest 实例

2.发出 HTTP 请求

3.接收服务器传回的数据

4.更新网页数据

下面就是一个AJAX例子：

前端：


// 创建一个XMLHTTPRequest实例对象
let request = new XMLHttpRequest()

// 监听请求状态
request.onreadystatechange = function(){

    // 通信成功时，状态值为4
    if (request.readyState === 4){
        if (request.status === 200){
            console.log(request.responseText);
            let string = request.responseText

            //把符合JSON语法的字符串转换成JS对应的值
            let obj = window.JSON.parse(string)
            console.log(obj)
        } else {
        console.error(request.statusText);
        }
    }
};

// open()方法用于指定 HTTP 请求的参数，或者说初始化 XMLHttpRequest 实例对象
request.open('GET','/xx')

// send()方法用于实际发出 HTTP 请求。
request.send()

服务器：

...
if(path === '/xxx'){
    response.setHeader('Content-type','text/html;charset=utf-8')
    response.statusCode = 200
    response.write(`
        {
            "people":{
                "name":"ajax"
            }
        }
    `)
    response.end()
}

更多参数可以参考阮一峰老师的博客

使用JSON

关于JSON的学习可以看官方文档。

JAX 通过原生的XMLHttpRequest对象发出 HTTP 请求，得到服务器返回的数据后，再进行处理。现在，服务器返回的都是 JSON 格式的数据，XML 格式已经过时了

注意

服务器返回的并不是JSON对象！

服务器响应的是字符串，如上面的例子中：

...
response.write(`
        {
            "people":{
                "name":"ajax"
            }
        }
    `)
...

他只是符合JSON对象语法标准的字符串，不是对象。

如果要让他变成我们需要的值，则需要：

let string = request.responseText

//把符合JSON语法的字符串转换成JS对应的值
// 这里就把字符串转化成了一个JS对象
let obj = window.JSON.parse(string)

同源/跨源

同源政策规定，AJAX请求只能发给同源的网址，否则就报错。

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）,可以使用CORS规避同源限制。

关于如何跨源以及更详细的参数可以参考阮老师的另一篇博客

下面这个例子使用了最简便的方法：给服务器端response的header设置Access-Control-Allow-Origin:

...
if(path === '/xxx'){
    response.setHeader('Content-type','text/html;charset=utf-8')
    response.statusCode = 200

    // here
    response.setHeader('Access-Control-Allow-Origin':'http://frank.com:8081')
    response.write(`
        {
            "people":{
                "name":"ajax"
            }
        }
    `)
    response.end()
}

下面分别是AJAX的同源、跨源的demo：

同源

请求方：http://frank.com:8081
响应方：http://frank.com/xx:8081

前端代码：

let request = new XMLHttpRequest()
request.onreadystatechange = function(){
    // 通信成功时，状态值为4
    if (request.readyState === 4){
        if (request.status === 200){
            console.log(request.responseText);
            let string = request.responseText
            //把符合JSON语法的字符串转换成JS对应的值
            let obj = window.JSON.parse(string)
            console.log(obj)
        } else {
        console.error(request.statusText);
        }
    }
};
request.open('GET','/xx')
request.send()

后台：

...
if(path === '/xxx'){
    response.setHeader('Content-type','text/html;charset=utf-8')
    response.statusCode = 200
    response.write(`
        {
            "people":{
                "name":"ajax"
            }
        }
    `)
    response.end()
}

跨源(CORS):

请求方：http://frank.com:8081
响应方：http://www.baidu.com:8081