AJAX知识回顾

76 阅读2分钟

XMLHttpRequest的两个事件

1. onload事件 : 接收服务器响应的数(一次请求,只会执行一次)
2. onreadystatechang事件 : 作用与onload事件一致(一次请求,会执行多次)                                   
XMLHttpRequest对象的状态码 (xhr.readyState)       
0: 请求未建立 (创建了xhr对象,但是还没调用open)       
1: 服务器连接已建立                                   
2. 请求已接收 (send之后,服务器已经接收了请求)         
3. 请求处理中                                         
4. 请求已完成,且响应已就绪 ( 4状态码等同于onload事件 )
<script>
      //(1).实例化ajax对象
      let xhr = new XMLHttpRequest()
      console.log(xhr.readyState)
      
      //(2).设置请求方法和地址
      xhr.open("post", "http://www.liulongbin.top:3009/api/login")
      
      //(3).设置请求头(post请求才需要设置)
      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
      console.log(xhr.readyState)
      
      //(4).发送请求 : 参数格式  'key=value'
      xhr.send("username=admin&password=123456")
      
      //(5).注册回调函数
      //a. onload 是新式浏览器才支持的
      //b. 如果要兼容更早的浏览器,可以使用 onreadystatechange
      //c. onreadystatechange触发时机 : xhr.readState状态变化
      // xhr.onload = function() {};

      xhr.onreadystatechange = function() {
        console.log(xhr.readyState)
        //onreadystatechange会触发多次,一般需要判断xhr.readState == 4 才获取响应数据
        if (xhr.readyState == 4) {
          console.log(xhr.responseText)
        }
      }
    </script>

Ajax全称Asynchronous Javascript And XML(异步的js与xml)

* 用js发送异步的网络请求
    * A :  Asynchronous  异步
        * 同步 : 指的是代码按照从上往下顺序执行
        * 异步 : 代码不会立即执行,而是要等一会儿执行
        * 目前我们学过的ECMAScript只有两个语法是异步的:  定时器 与  ajax
        * DOM事件也是属于异步的,但是这个是属于DOM的执行机制。所以一般在讨论js同步和异步的时候,主要以js为主,DOM一般不讨论。
    * J:Javascript
    * A :And
    * X :  XML 与 XMLHttpRequest
        * XML : 解决跨平台数据传输。
        * 在JSON没有出来以前, 网络传输主要以XML格式数据为主。  后来JSON问世,逐渐取代XML。 但是由于ajax技术出来的比json早,因此xml这个称呼一直保留至今

get和post的区别

* 1.传参方式不同
        * get在url后面拼接(请求行)
        * post在请求体传参
    * 2.大小限制不同
        * get有大小限制,不同浏览器大小限制不同。 一般2-5 MB
        * post没有大小限制
    * 3.安全性不同
        * get参数直接暴露在url,不安全(一般查询类数据都是get)
        * post参数在请求体中,更加安全(一般登录注册必须是post)
    * 4.传输速度不同
        * get传输速度快
        * post传输速度慢