AJAX

AJAX: Asynchronous JavaScript + XML（异步JavaScript和XML）,用JS发送请求和接收响应。

Ajax的最大优点：能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息

背景

AJAX是浏览器上的功能

• 浏览器可以发请求，收响应
• 浏览器在window上加了一个XMLHTTPRequest函数
• 用这个构造函数（类）可以构造出一个对象
• JS通过实现发情请求，收响应

准备一个服务器

• 使用sever.js作为服务器
• 下载工具 yarn global add node-dev
• 启动 node-dev server.js 端口号

onreadystatechange事件

onload & onerror 事件改成onreadystatechange事件

• 因为onerror 事件不稳定
• 在请求页面如果你输入错误的时候，它不会直接把服务器写的404 错误的内容渲染到页面
• 它监听不到onerror事件，所以替换
• onreadystatechange事件：只要readyState属性发送变化，就会调用相应的处理函数

readyState

案例（加载CSS）

以前我们都是用<link rel = stylesheet href='/style.css'>,现在用AJAX 加载

四个步骤

• 创建HttpRequest（全称是XMLHTTPRequest）
• 调用对象的open方法
• 监听对象的 onreadystatechange事件
• 在处理函数里操作CSS文件内容
• 调用对象的send方法（发送请求）

//getCSS.onclick 这个是在html页面上加的按钮点击就实现加载css
getCSS.onclick = () => {
    //创建一个对象
    const request = new XMLHttpRequest()
    //open方法 .open(method,url) method表示什么请求 get、post、put、delete等
    request.open('GET', '/style.css')
    //监听对象的成功或失败
    request.onreadystatechange = () => {
        if(request.readyState === 4){
             //下载完成，但是不知道成功还是失败，2xx表成功，失败 4xx 5xx ...
            if(request.status >= 200 && request.status < 300){
                 //创建 style标签
                 const style = document.createElement('style')
                 //填写 style内容
                style.innerHTML = request.response
                 //插入到头里面
                 document.head.appendChild(style)
            }else{
                alert('加载失败')
            }
        }
    }
   
    //发送请求
    request.send()

}