小白学AJAX-02-原理

Posted hetianhe

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小白学AJAX-02-原理相关的知识,希望对你有一定的参考价值。

基本原理

原理很简单

  1. new XHR
  2. xhr.onreadystatechange
  3. xhr.open(method, url, async)
  4. xhr.send()

创建xhr对象

兼容一下ie6,参考司徒正美大大的写法:

var xhr = new (window.XMLHttpRequest||ActiveXObject)(‘Microsoft.XMLHTTP‘)

XHR创建请求

xhr.open(method, url, async)是创建请求,并接收三个参数:

  1. 发送请求的类型,主要是"GET"和"POST";
  2. 请求的url,如果为GET,data参数拼接在url后面,
    如何为POST,xhr.send(data),并且设置header;
  3. async是否异步,默认为true表示异步,false表示同步。

XHR响应请求

onreadychange对象有个readyState属性,其值有5个

0:未初始化。尚未调用open()方法

1:启动。已经调用open()方法,但尚未调用send()方法

2:发送。已经调用send()方法,但尚未接收到响应

3:接收。已经接受到部分响应数据

4:完成。已经接受到全部响应数据,并且可以在客户端使用

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
      var status = xhr.status;
      if (status >= 200 & status < 300 || status === 304) {
          console.log(xhr.responseText)
      }
  }
}

发送请求

xhr.send(data),data的格式为‘param1=value1&param2=value2‘;

需要注意一点,类型为post时,setRequestHeader要放在xhr.open()之后。

 


以上是关于小白学AJAX-02-原理的主要内容,如果未能解决你的问题,请参考以下文章

一起来学PHP代码审计 | 新手入门篇

小白学AJAX-01-介绍

小白学算法12. 排序算法-选择排序

本科生学深度学习-史上最容易懂的RNN文章,小白也能看得懂

易优CMS:小白学代码之notempty

#盲盒+码##跟着小白一起学鸿蒙#如何编译OpenHarmony自带APP