AJAX

AJAX笔记

是什么

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。
通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。
AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

特点

优点：

• 可以无需刷新页面而与服务器端进行通信
• 允许你根据用户事件来更新部分页面内容

缺点：

• 没有浏览历史，不能回退
• 存在跨域问题(同源)
• SEO 不友好

最基本使用

1. 创建 XMLHttpRequest 对象

   var xhr = new XMLHttpRequest();

2. 设置请求信息

   xhr.open(method, url);

3. 发送请求

   xhr.send(body) //get 请求不传 body 参数，只有 post 请求使用

4. 接收响应
   //xhr.responseXML 接收 xml 格式的响应数据
   //xhr.responseText 接收文本格式的响应数据

一个最最基本的使用

   const xhr = new XMLHttpRequest();

    xhr.open('GET', 'http://www.baidu.com')
    
    xhr.send()
    
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status >= 200 && xhr.status < 300){
                console.log(xhr.response)
            }
        }
   }

响应状态

XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态：有以下值

值	状态	描述
0	UNSENT	代理被创建，但尚未调用 open() 方法。
1	OPENED	open() 方法已经被调用。
2	HEADERS_RECEIVED	send() 方法已经被调用，并且头部和状态已经可获得。
3	LOADING	下载中； responseText 属性已经包含部分响应数据。
4	DONE	收到全部响应数据

列举一些其他常用的方法和属性

1. XMLHttpRequest.timeout

   在IE中，超时属性可能只能在调用 open() 方法之后且在调用 send() 方法之前设置

   给异步设置超时时间，默认0 设置时间内未收到服务器响应，取消请求

2. XMLHttpRequest.abort()

   如果该请求已被发出，XMLHttpRequest.abort() 方法将终止该请求。当一个请求被终止，它的 readyState 将被置为 XMLHttpRequest.UNSENT (0)，并且请求的 status 置为 0

3. XMLHttpRequest.setRequestHeader()

   设置 HTTP 请求头的值。必须在 open() 之后、send() 之前调用 setRequestHeader() 方法。

4. XMLHttpRequest.responseType

   设置返回响应数据类型，设置后返回的数据将按我们设置的解析，要保证会服务器返回的一致，不然response会变成null, 不设置 会根据服务器返回的content-type头来解析数据

5. XMLHttpRequest.withCredentials

   同源无效，设置的话当前域发送跨域请求的话可以自动携带那个域的cookie,例如 a 请求 b 的话,在为true的情况话，a发送到b服务器的请求会自己携带b域的cookie。

在成熟库的应用

知道上面这些常用的就差不多了，axios在前端的实现就是基于XMLHttpRequest实现的，基本也就用到了上面的方法

参考：

尚硅谷的AJAX教程

MDNAJAX