AJAX原理

AJAX：Asynchronous JavaScript and XML异步的JavaScript与XML技术），即使用JS发送请求和接收响应。

AJAX原理

• 步骤：
  1. 创建HttpRequest对象(XMLHttpRequest())
  2. 调用对象的open方法（查看mdn,只用method和url，后面的参数都不用）
  3. 监听对象的onload和onerror事件
     • 专业前端会改用onreadystatechange
     • 在事件处理函数里操作相应文件内容
  4. 调用对象的send方法(发送请求)

例如：

加载HTML

    getHTML.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/1.html')//read state = 1
    request.onreadystatechange = () => {
        
        //2xx一般表示成功
        if (request.readyState === 4) {
            if (request.status >= 200 && request.status < 300) {
            
            // 创建一个div标签
                const div = document.createElement("div");
                
               // 填写div内容
                div.innerHTML = request.response;
                
                // 插入body中
                 document.body.appendChild(div);
                 } else {
                     alert("加载1.html失败");
                     }
             }
      }
     request.send()//read state = 2
}

解析方法：

• 得到CSS后生成style标签
• 得到JS后生成script标签
• 得到HTML后使用innerHTML和DOM API
• 得到XML后使用responseXML和DOM API
• 不同类型数据有不同的解析方式

总结：

• HTTP可以装HTML,CSS,JS,XML,JSON等等。
• 设置正确的Content-Type。
• 知道如何解析这些内容，就可以使用这些内容。

完整加载代码，请点击此链接