Hi,Ajax

迈不过友情╰ 2023-01-05 14:11 118阅读 0赞

# ajax #

## ajax是什么 ##

ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，实现局部更新

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b1gvHPZ3-1610459016755)(D:\\Downloads\\images\\ajax请求过程.jpg)\]][img-b1gvHPZ3-1610459016755_D_Downloads_images_ajax_.jpg]

# 区别一般http请求与ajax请求 #

1.  ajax请求是一种特别的http请求
2.  对服务器端来说，没有任何区别，区别在浏览器端
3.  浏览器端发请求：只有XHR或fetch发出的才是ajax请求，其他的所有请求都是非ajax请求
4.  浏览器端接收到响应
5.  (1) 一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面
    
    (2) ajax 请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调 函数并传入响应相关数

## ajax同步 ##

一件事做完才能做另一件事

## ajax异步 ##

是一种并行处理的方式，不必等待一个程序执行完，可以执行其它的任务。

## ajax实现原理 ##

对于浏览器而言， 主要有xmlHttpRequest和fetch两个请求api。使用js获得浏览器内置的ajax引擎（XMLHttpRequest对象），xml是浏览器的原生对象

## ajax的对象XMLHttpRequest(简称XML)的相关API ##

1.  XMLHttpRequest():创建XHR对象的构造函数
2.  status: 响应状态码值，比如200，404
3.  statusText: 响应状态文本
4.  readyState: 标识请求状态的只读属性
    
     *  0: 初始
     *  1: open()之后
     *  2: send()之后
     *  3: 请求中
     *  4: 请求完成
5.  onreadystatechange: 绑定readyState改变监听
6.  responseType: 指定相应数据，如果是’json’,得到响应后自动解析响应体数据
7.  response: 响应体数据，类型取决于responseType的指定
8.  timeout: 指定请求超时时间，默认为0代表没限制
9.  ontimeout: 绑定超时的监听
10. onerror: 绑定请求网络错误的监听
11. open(): 初始化一个请求, 参数为: (method, url\[, async\])
12. send(data): 发送请求
13. abort(): 中断请求
14. getResponseHeader(name): 获取指定名称的响应头值
15. getAllResponseHeaders(): 获取所有响应头组成的字符串16. setRequestHeader(name, value): 设置请求头

# GET请求 与 POST请求 #

*  GET请求

GET请求用于**获取数据**，有时候我们需要获取的数据需要通过“查询参数”进行定位，在这种情况下，我们会将查询参数追加到URL的末尾，令服务器解析。

查询参数是指一个由`?`号起始，由`&`符号分割的包含相应键值对的字符串。用来告知浏览器所要查询的特定资源。

const query = "example.php?name=tom&age=24" // "?name=tom&age=24"即是一个查询参数

*  POST请求

POST请求用于**向服务器发送应该被保存的数据**，因此POST请求天然比GET请求多需要一份**需要被保存的数据**。那么这些数据应该放在何处呢？毕竟，我们的`.open()`方法接收的三个参数都没有合适的位置。

答案是需要发送的数据会作为`.send()`方法的参数最终被发往服务器，该数据可以是任意大小，任意类型。

这里需要注意以下两点：

1.  `.send()`方法的参数是不可为空的，也就是说，对于不需要发送任何数据的GET请求，也需要在调用`.send()`方法时，向其传入`null`值；
2.  目前为止，我们知道了两种向服务器发送数据的方式：**表单提交**以及**发送POST请求**，要注意服务器对待这两种方式并不一视同仁，这意味着服务器需要有相应的代码专门处理POST请求发送来的原始数据。

但好在我们可以通过POST请求模拟表单提交，只需要简单两步：

1.  设置请求头参数：`Content-Type: application/x-www-form-urlencoded`（表单提交时的内容类型）；
2.  将表单数据序列化为查询字符串形式，传入`.send()`方法；

## 为什么ajax要用xml ##

XHR为向服务端发送请求和解析服务器响应提供了流畅的接口，能够咦异步从服务器获取得更多信息，然后通过DOM将新数据插入到页面中。

## Ajax请求数据流程 ##

![img][]

## 请求报文和响应报文 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 2]

# 对于跨域问题ajax的解决方案(利用XML对象) #

1.  ### Jsonp 方案 ###
2.  服务器端代理请求方案
3.  CORS 方案
    
    [详细点击这里][Link 1]

[img-b1gvHPZ3-1610459016755_D_Downloads_images_ajax_.jpg]: /images/20221119/1e394b36a01e4e21bdd582234e201caa.png
[img]: /images/20221119/abee15533abd4e0dbece1f40f22b0e70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210112214528978.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210112215238139.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210112215217525.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg==,size_16,color_FFFFFF,t_70
[Link 1]: https://juejin.cn/post/6844904067383164935#heading-7

Hi,Ajax

发表评论取消回复

还没有评论，来说两句吧...

相关阅读