第18周 第1章Ajax基础知识

介绍Ajax

1. Ajax 概述

   • Ajax 是 “Asynchronous JavaScript and XML” 的首字母缩写，即“异步 JavaScript 与 XML”。
   • Ajax 是一种前端技术，基于 JavaScript 驱动，最初设计时采用 XML 数据格式。
   • 它的主要作用是在不刷新整个页面的情况下，进行局部内容的更新，提高用户体验。

2. Ajax 的优势

   • 避免整个页面刷新，提高响应速度和用户体验。
   • 可以在同一个页面中动态加载和更新局部内容，如微博中的新闻板块或动态更新等。

3. 应用场景示例

   • 打开慕课网主页（www.imooc.com），观察页面中课程答疑部分的信息是通过 Ajax 技术动态加载的。
   • 页面加载时，主体内容一次性加载完成，但某些数据（如课程答疑）是后续动态加载的。
   • 移动端浏览时，课程列表在滚动时动态加载数据，且无需刷新整个页面，这是 Ajax 技术在手机端应用的典型案例。

创建XMLHttpRequest对象 发送Ajax请求与处理响应

1. 发送 Ajax 请求

• 创建 XMLHttpRequest 对象

  • 通过 XMLHttpRequest 对象来发送 Ajax 请求，这是 Ajax 技术的核心。

• 使用 open 方法创建请求

  • 使用 XMLHttpRequest.open(method, url) 方法创建请求：
    • method: 请求类型（GET 或 POST）。
    • url: 请求的 URL 或 URI。

• 使用 send 方法发送请求

  • 通过 XMLHttpRequest.send() 方法发送请求。

2. 处理服务器响应

• 捕获请求状态变化

  • 使用 onreadystatechange 事件监听 XMLHttpRequest 对象的状态变化。

• 处理响应状态

  • readyState: 表示请求的处理阶段，共有五个状态值：
    1. 0: 请求未初始化。
    2. 1: 服务器连接已建立。
    3. 2: 请求已接收。
    4. 3: 请求处理中。
    5. 4: 请求已完成，响应已就绪。
  • status: 表示服务器返回的 HTTP 响应状态码，常见状态码：
    • 200: 请求成功。
    • 404: 资源未找到。

• 获取响应内容

  • 当 readyState 等于 4 且 status 等于 200 时，表示请求成功，可以通过 responseText 属性获取服务器返回的响应文本。

3. 完整案例

1. 创建 XMLHttpRequest 对象。
2. 使用 open 方法创建 GET 请求。
3. 使用 send 方法发送请求。
4. 使用 onreadystatechange 事件处理响应，将服务器返回的 HTML 片段显示在页面上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="btnLoad" type="button" value="加载"/>
    <div id="divContent"></div>
    <script>
        document.getElementById("btnLoad").onclick = function(){
            //1. 创建XMLHttpRequest对象
            var xmlhttp;
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            console.log("XMLHttpRequest:",xmlhttp);
            //2. 发送Ajax请求
            xmlhttp.open("GET", "/content");
            xmlhttp.send();
            //3. 处理服务器响应
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState == 4  && xmlhttp.status == 200){
                    var t = xmlhttp.responseText;
                    console.log(t);
                    document.getElementById("divContent").innerHTML = document.getElementById("divContent").innerHTML + "<br/>" + t;
                }
            }
        }
    </script>
</body>
</html>