异步请求,局部更新页面------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 和 . p o s t 底层还是使用 .post 底层还是使用 .post底层还是使用.ajax()方法来实现异步请求

$.getJSON 常用参数

url: 请求发送的哪个 URL

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

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

$.getJSON 常用参数

url: 请求发送的哪个 URL

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

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晨犀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值