第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 等于 4status 等于 200 时,表示请求成功,可以通过 responseText 属性获取服务器返回的响应文本。

3. 完整案例

  1. 创建 XMLHttpRequest 对象。
  2. 使用 open 方法创建 GET 请求。
  3. 使用 send 方法发送请求。
  4. 使用 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>
相关推荐
武子康1 小时前
Java-72 深入浅出 RPC Dubbo 上手 生产者模块详解
java·spring boot·分布式·后端·rpc·dubbo·nio
_殊途2 小时前
《Java HashMap底层原理全解析(源码+性能+面试)》
java·数据结构·算法
椰椰椰耶3 小时前
【Spring】拦截器详解
java·后端·spring
没有bug.的程序员4 小时前
JAVA面试宝典 - 《MyBatis 进阶:插件开发与二级缓存》
java·面试·mybatis
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止5 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms5 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登5 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
没有羊的王K5 小时前
SSM框架学习——day1
java·学习