AJAX详细教程

Ajax是浏览器中的技术；用来实现客户端网页请求服务器的数据

Asynchronous JavaScript XML简称ajax

操作服务器上的数据除了要使用 URL地址， 还要指定 请求方式

请求方式

使用ajax请求数据5种方式：

 POST           向服务器增加数据
 GET            从服务器获取数据
 DELETE         删除服务器的数据
 PUT            更新服务器上的数据(侧重于完整的更新，更新用户信息)
 PATCH          更新服务器上的数据（侧重于部分更新）

ajax原理

通过XMLHTTPRequest对象向服务器发异步请求

从服务器获取数据， 【关键的一步】

然后用JavaScript来操作DOM并更新页码

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

同步和异步

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

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

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

同步任务

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

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

异步任务

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

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

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

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

客户端和服务端

服务端

上网过程中，负责存放和对外提供资源的电脑，叫做服务器

客户端

上网过程中，用来获取和消费资源的电脑，叫做**客户端

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eByrWNzr-1662194536020)(.\相册\ajax\客户端.png)]

URL地址

URL是统一资源定位符，标识互联网上资源的唯一存放位置

浏览器可以通过URL地址，能正确的定位资源的存放位置，从而成功的访问对应的资源

http://www.baidu.com
http://www.taobao.com

URL地址由三部分组成：

• 客户端和服务端之间的通信协议
• 存有该资源的服务器名称
• 资源在服务器上具体的存放位置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0xx6PR56-1662194536021)(.\相册\ajax\url地址.png)]

客户端和服务端之间的通信过程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UqzxCpX1-1662194536022)(.\相册\ajax\客户端和服务端之间的通信过程.png)]

服务器对外提供了那些资源

文字内容 image图片 Audio音频 Video视频

网页中的数据，也是服务器对外提供的资源

网页中如何请求数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qw2sEMfC-1662194536022)(.\media\网页中如何请求数据.png)]

资源请求方式

客户端请求服务器时，请求方式有很多，最常用两种请求方式是get和post请求

get请求通常用于获取服务端资源，（向服务器要数据）

根据url地址，从服务器获取HTML文件，css文件，js文件，图片文件 ，数据资源

post请求用于向服务器提交数据（往服务器发送资源）

登录时向服务器提交登录信息，注册时向服务器提交注册信息，添加用户时向服务器提交用户信息

Ajax

什么是Ajax

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

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

为什么要学Ajax

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

XMLHttpRequest使用

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

使用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的status 响应状态码

200 服务器响应成功 一切顺利

304 资源没有任何修改，服务器不会返回新的内容，浏览器用的缓存数据

404 服务器地址也没有找到

403 （forbidder）禁止访问（没有访问权限）

500 服务器内部出错

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

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

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

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

跨域

浏览器自带一个保护机制，不同域名之间发送请求，会被浏览器阻止。

1，把后端和前端地址放到统一的一个域名（发布项目）

2，请求代理（开发环境常用）

3，jsonp通过script标签发送请求，需要后端配置

查询字符串

查询字符串 指在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>

数据交换格式

服务器端与客户端之间进行数据传输与交换的格式

经常交换的格式JSON

封装请求

<script>
    myAajx({
        method:'GET',
        url:'http://www.liulongbin.top:3006/api/getbooks',
        data:{id:1,bookname:'西游记'},
        success:function(res){
            console.log(res);
        },
    })

    myAajx({
        method:'post',
        url:'http://www.liulongbin.top:3006/api/addbook',
        data:{
                bookname:'js图书',
                author:'hellow',
                publisher:'北京出版社'
            },
            success:function(res){
                console.log(res);
            }
    })