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

简介: 异步请求,局部更新页面------Ajax

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


Ajax 是什么


  1. AJAX 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML)
  2. 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: 请求成功时运行的函数

相关文章
|
21天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
18 0
|
5月前
|
存储 移动开发 JavaScript
【原生】sd.js帮助您简化繁重的获取数据、存储数据(CRUD)骚操作(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)
【原生】sd.js帮助您简化繁重的获取数据、存储数据(CRUD)骚操作(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)
|
6月前
ajax+json模拟一个页面多个统计图数据交互
ajax+json模拟一个页面多个统计图数据交互
24 1
|
6月前
|
前端开发
Ajax提交请求后台返回一个完整的html页面
Ajax提交请求后台返回一个完整的html页面
|
9月前
|
前端开发
如何对ajax请求的后台数据添加到swiper轮播图并展示到页面
如何对ajax请求的后台数据添加到swiper轮播图并展示到页面
99 0
|
9月前
|
前端开发 JavaScript Java
SSM框架用Ajax增删改查一个页面(简单易懂)
SSM框架用Ajax增删改查一个页面(简单易懂)
|
XML 存储 前端开发
【Ajax入门技术】原生AJAXexpress的基本使用,进行不刷新页面获取到数据
【Ajax入门技术】原生AJAXexpress的基本使用,进行不刷新页面获取到数据
85 0
【Ajax入门技术】原生AJAXexpress的基本使用,进行不刷新页面获取到数据
|
前端开发
使用AJAX做一个页面导航模糊匹配下拉框
绪论:使用AJAX页面导航模糊匹配下拉框
113 0
使用AJAX做一个页面导航模糊匹配下拉框
|
JavaScript 前端开发
JQuery 极致ajax局部和整体刷新
JQuery 极致ajax局部和整体刷新
95 0