ajax|AJAX详细教程 ajax|前端|前端

AJAX详细教程
文章目录

AJAX详细教程
- - - 请求方式
    - ajax原理
    - 同步和异步
    - - 同步任务
        
        异步任务
        
        同步任务和异步任务执行过程
    - 客户端和服务端
    - URL地址
    - - URL地址由三部分组成：
    - 客户端和服务端之间的通信过程
    - 服务器对外提供了那些资源
    - 资源请求方式
    - - get请求通常用于获取服务端资源，（向服务器要数据）
        
        post请求用于向服务器提交数据（往服务器发送资源）
Ajax
- - - 什么是Ajax
    - 为什么要学Ajax
    - XMLHttpRequest使用
使用xhr发起GET请求
- - - xhr的readyState属性
    - xhr的status 响应状态码
    - 使用xhr发起带参数的GET请求
    - **跨域**
    - 查询字符串
    - GET请求携带参数的本质
    - URL编码
使用xhr发起POST请求
- - - 数据交换格式
    - 封装请求

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个步骤

客户端和服务端服务端

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

客户端

【ajax|AJAX详细教程】上网过程中，用来获取和消费资源的电脑，叫做**客户端

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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请求必然处于以下状态中的一个

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

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

封装请求

> 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); } })