[AJAX]AJAX的入门学习

Posted 2021-01-05 小粒旬

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

前端代码：

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‘,‘http://www.baidu.com:8081‘)
request.send()

后台：

...
if(path === ‘/xxx‘){
    response.setHeader(‘Content-type‘,‘text/html;charset=utf-8‘)
    response.statusCode = 200
    response.setHeader(‘Access-Control-Allow-Origin‘:‘http://frank.com:8081‘)
    response.write(`
        {
            "people":{
                "name":"ajax"
            }
        }
    `)
    response.end()
}

本篇入门学习AJAX的文章就到此结束啦~。