异步请求，局部更新页面------Ajax

异步请求，局部更新页面------Ajax

Ajax 是什么

1. AJAX 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML)

2. Ajax 是一种浏览器异步发起请求(指定发哪些数据)，局部更新页面的技术

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bo93tJcu-1683678483930)(C:\Users\w’y’x’n’l’c\AppData\Roaming\Typora\typora-user-images\image-20230510075226804.png)]

1.浏览器发出http请求（携带数据）。

2.服务器接收数据，并进行处理。

3.通过http响应，把数据返回给浏览器。

缺点

1.请求把数据全部提交给服务端，数据大，没有意义。

2.在服务端没有响应前，浏览器发出请求的页面处于等待状态。

3.不能进行局部刷新，而是刷新整个页面。

使用Ajax就可以解决传统方式无法指定传送数据，只能整体更新的现象。

Ajax 原理示意图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-12k79f0d-1683678483931)(C:\Users\w’y’x’n’l’c\AppData\Roaming\Typora\typora-user-images\image-20230510080722273.png)]

1.可以通过XHLHttpRequest对象,发送指定数据，速度快

2.XHLHttpRequest是异步发送，在服务端没有响应前，浏览器不需要等待，用户可以完成其他操作

Ajax 经典应用场景

1. 搜索引擎自动提示检索关键字
2. 动态加载数据，按需取得数据【历史记录、联动菜单…】
3. 改善用户体验。【输入内容提示、进度条显示上传进度…】
4. 电子商务应用。 【购物车、邮件订阅…】
5. 访问第三方服务。【访问搜索服务、rss 阅读器】
6. 页面局部刷新。

不记得Ajax如何使用，可以查询Ajax在线文档：

https://www.w3school.com.cn/js/js_ajax_intro.asp

JQuery 的 Ajax 请求

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w4rgBHsX-1683678483931)(C:\Users\w’y’x’n’l’c\AppData\Roaming\Typora\typora-user-images\image-20230510081715865.png)]

$.ajax 方法常用参数

● url： 请求的地址

● type : 请求的方式 get 或 post

● data : 发送到服务器的数据。将自动转换为请求字符串格式

● success: 成功的回调函数

● error: 失败后的回调函数

● dataType: 返回的数据类型 常用 json 或 text

所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

$.get 和 $.post 常用参数

1.url: 请求的 URL 地址

2.data: 请求发送到服务器的数据

3.success: 成功时回调函数

4.type: 返回内容格式，xml, html, script, json, text

$.get 和 $.post底层还是使用$.ajax()方法来实现异步请求

$.getJSON 常用参数

url: 请求发送的哪个 URL

data: 请求发送到服务器的数据

$.ajax()方法来实现异步请求

$.getJSON 常用参数

url: 请求发送的哪个 URL

data: 请求发送到服务器的数据

success: 请求成功时运行的函数