异步请求,局部更新页面------Ajax
Ajax 是什么
- AJAX 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML)
- Ajax 是一种浏览器异步发起请求(指定发哪些数据),局部更新页面的技术
1.浏览器发出http请求(携带数据)。
2.服务器接收数据,并进行处理。
3.通过http响应,把数据返回给浏览器。
缺点
1.请求把数据全部提交给服务端,数据大,没有意义。
2.在服务端没有响应前,浏览器发出请求的页面处于等待状态。
3.不能进行局部刷新,而是刷新整个页面。
使用Ajax就可以解决传统方式无法指定传送数据,只能整体更新的现象。
Ajax 原理示意图
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 请求
$.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: 请求成功时运行的函数