Ajax与异步

发表于 分类于 阅读次数： 本文字数： 555 阅读时长 ≈ 2 分钟

一种可以让网页局部刷新的技术

简介

Ajax即async javascript and xml
异步js和xml，xml是一种类似html的标记语言，常用于网络数据传输，但是现在网络数据传输通常使用json格式，因此这个名称是以前的历史遗留。总而言之，ajax就是用JavaScript来发送网络请求。

XMLHttpRequest

XMLHttpRequest是一个浏览器内建对象，它可以使用JavaScript发送http请求。虽然名字中式xml，但是它可以处理任何类型的数据，包括json。

基本使用

  1. vscode需要安装一个live server插件，用于模拟一个服务器，网页在服务器环境下运行。（其他模拟服务器环境的方法也可以）

  2. 用XMLHttpRequest发送请求的过程：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //1. 创建一个XMLHttpRequest实例对象xhr
    let xhr = new XMLHttpRequest()

    //2. 配置xhr
    //	xhr.open("请求方式","目标地址",[async, user, password])	最后一个参数可以省略
    xhr.open("GET","http://127.0.0.1:5500/1.txt")	//假设html文件同目录下有个1.txt文件

    //3. 发送请求
    xhr.send()

  3. 用xhr.onreadystatechange监听xhr状态变化获取响应

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    //xhr.readyState记录了xhr的状态，状态会随着处理进度而改变
    //值如下
    UNSENT = 0; // 初始状态
    OPENED = 1; // open 被调用
    HEADERS_RECEIVED = 2; // 接收到 response header
    LOADING = 3; // 响应正在被加载（接收到一个数据包）
    DONE = 4; // 请求完成

    // xhr.onreadystatechange方法会在每次状态改变时被调用
    //	xhr.readyState状态每次接收到响应都会经过2，3，4
    xhr.onreadystatechange = function(){
        console.log(xhr.readyState)	//2，3，4
    }

    //	响应的内容在 xhr.responseText
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4)
        	console.log(xhr.responseText)	//打印响应的body
    }

    //http状态码
    xhr.status	//一个数字 200，404,403等等

    更方便的方式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    //现在有更方便的方式来监听状态和查看响应
    xhr.onload = function() {};	//当请求完成（即使 HTTP 状态为 400 或 500 等），并且响应已完全下载。
    //即只到onreadystatechange的状态4时才调用，2和3不调用

    xhr.onerror = function() {};	// 仅在根本无法发出请求时触发

    xhr.onprogress = function(event) { // 定期触发
      // event.loaded —— 已经下载了多少字节
      // event.lengthComputable = true，当服务器发送了 Content-Length header 时
      // event.total —— 总字节数（如果 lengthComputable 为 true）
    };

    xhr.response	//请求的body

同步异步