第18周第1章Ajax基础知识

介绍Ajax

Ajax 概述
- Ajax 是 "Asynchronous JavaScript and XML" 的首字母缩写，即"异步 JavaScript 与 XML"。
- Ajax 是一种前端技术，基于 JavaScript 驱动，最初设计时采用 XML 数据格式。
- 它的主要作用是在不刷新整个页面的情况下，进行局部内容的更新，提高用户体验。
Ajax 的优势
- 避免整个页面刷新，提高响应速度和用户体验。
- 可以在同一个页面中动态加载和更新局部内容，如微博中的新闻板块或动态更新等。
应用场景示例
- 打开慕课网主页（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. 完整案例

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

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>

第18周 第1章Ajax基础知识

介绍Ajax

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

1. 发送 Ajax 请求

2. 处理服务器响应

3. 完整案例

第18周第1章Ajax基础知识

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