AJAX详细教程

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事件

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事件

数据交换格式

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

经常交换的格式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);
            }
    })