ajax原理

进程和线程

进程:一边听音乐一边敲代码

线程：js属于单线程

同步和异步

javascript是一门单线程执行的编程语言，也就是同一个时间只能做一件事情

问题: 前一个任务非常耗时，后续的任务就不得不一直等待，导致 程序假死问题

JavaScript把执行的任务分为两类：

同步任务

又叫做非耗时的任务，在主线程上排队执行的任务

只有前一个任务执行完毕，才能执行后一个任务

异步任务

叫做耗时任务，由JavaScript 委托给宿主环境进行执行

当异步任务执行完毕后，会通知JavaScript 主线程执行异步任务的回调函数

同步任务和异步任务执行过程

同步任务由JavaScript主线程按次序执行
异步任务委托给宿主环境执行
已完成的异步任务对应的回调函数，会被加入到任务队列中等待执行
JavaScript主线程的执行栈被清空后，会读取任务队列中的回调函数依次执行
主线程不断重复以上4个步骤

什么是Ajax

全称 AsynchronousJavaScript+XML（异步JavaScript和XML）

在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax

为什么要学Ajax

Ajax可以让我们轻松的实现 网页和服务器之间的数据交互

XMLHttpRequest使用

XMLHttpRequest是浏览器提供的js对象，通过它，可以请求服务器上的数据资源

XMLHTTPRequest是ajax的核心机制，是一种支持异步请求的方式

使用xhr发起GET请求

创建xhr对象
调用xhr.open函数
调用xhr.send函数
监听xhr.onreadystatechange事件

<script>
      // 1创建xhr对象
      var xhr = new XMLHttpRequest()
      // 2调用open函数
      xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks')
      // 3 调用send函数
      xhr.send()
      // 4 监听onreadystatechange事件
      xhr.onreadystatechange = function () {
        // 监听xhr的请求状态  服务器响应的状态
        if (xhr.readyState === 4 && xhr.status === 200) {
          // 打印服务器响应回来的数据
          console.log(xhr.responseText)
        }
      }
    </script>

xhr的readyState属性

XMLHttpRequest对象的readyState属性，用来表示当前Ajax请求所处的状态，每个Ajax请求必然处于以下状态中的一个

0  UNSEND   XMLHttpRequest对象创建，但尚未调用open方法
1  OPENED   open方法已经被调用
2  HEADERS_RECEIVED  send方法已经被调用，响应头已经被接收
3   LOADING   数据接收中，此时response属性中已经包含部分数据
4    DONE    Ajax请求完成，数据传播已经彻底完成或失败

使用xhr发起带参数的GET请求

xhr对象发起带参数的GET请求时，只需在调用xhr.open期间，为URL地址指定参数即可

xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks?id=1')

这种在URL地址后面拼接的参数，叫做查询字符串

查询字符串

查询字符串指在URL的末尾加上用于向服务器发送信息的字符串(变量)

格式：将英文的?放在URL的末尾，然后再加上参数=值，想加上多个参数的话，使用 & 进行分隔。以这个形式，可以将想要发送给服务器的数据添加到URL中

//带有多个参数的URL地址
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记
//带有1个参数的URL地址
http://www.liulongbin.top:3006/api/getbooks?id=1
//不带参数
http://www.liulongbin.top:3006/api/getbooks

GET请求携带参数的本质

xhr对象发起GET请求，当需要携带参数的时候，本质上，就是直接将参数以查询字符串的形式，追加到URL地址的后面，发送到服务器的

URL编码

URL地址中，只允许出现英文相关的字母，标点符号，数字，因此，在URL地址中不允许出现中文字符

如果URL中需要包含中文这样的字符，则必须对中文字符进行编码

URL编码的规则:使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示哪些不安全的字符

用英文字符去表示非英文字符

http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记

//经过URL编码之后，URL地址变成了如下格式
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=%E8%A5%BF%E6%B8%B8%E8%AE%B0

浏览器会自动对URL地址进行编码操作，大多数情况下，不需要关心URL地址的编码和解码操作

使用xhr发起POST请求

创建xhr对象
调用xhr.open函数
设置 Content-Type属性(固定写法)
调用xhr.send函数，同时指定要发送的数据
监听xhr.onreadystatechange事件

 <script>
      // 1 创建xhr对象
      var xhr = new XMLHttpRequest()
      // 2 调用open
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
      // 3设置Content-Type属性 固定写法
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
      // 4 调用send 同时将数据以查询字符串的形式，提交给服务器
      xhr.send('bookname=js编程&author=丁鹿学堂学员&publisher=北京出版社')
      // 5监听onreadystatechange事件
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.responseText)
        }
      }
    </script>

Ajax的原理