概念
- ASynchronous JavaScript And XML:异步的JavaScript和XML
- 同步和异步:客户端和服务器端相互通信的基础上。同步——客户端在等待服务器端的响期间不能做任何其他操作;异步——服务器处理请求的过程中,客户端可以进行其他的操作。
- 传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面
- Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
优缺点
优点:
- 局部刷新,异步通信,效率更高,用户体验上升
- 按需取数据,减少了冗余请求,减轻了服务器负担
- 标准化,广泛使用且不需要插件
缺点:
- 局部刷新,因此后退按钮失效
- 依赖JavaScript和Ajax引擎,需要考虑兼容性问题
- 安全问题,Ajax会暴露出与服务器交互的更多细节
原生JS实现
function fun() {
//1.创建核心对象
var xmlhttp = new XMLHttpRequest();
//2.建立连接
/* 参数:请求方式(GET/POST),URL,异步/同步(true/false) */
xmlhttp.open("GET", "AjaxServlet?username=Alice", true);
//3.发送请求
/* 参数:GET方式的话请求参数已经拼接在URL中,这里空参;POST方式的话请求参数写在send()中 */
xmlhttp.send();
//4.接受并处理来自服务器的响应
/* 逻辑:当xmlhttp就绪状态改变时触发事件:如果就绪状态码为4且响应状态码为200,就可以获取服务器的响应结果了 */
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
}
JQuery实现
-------------------------------------------- $.ajax()实现 -------------------------------------------------
function fun() {
//使用$.ajax()发送异步请求
$.ajax({
url: "AjaxServlet", // 请求路径
type: "POST", // 请求方式
// data: "username=Alice&age=12", // 请求参数
data: {"username": "Alice", "age": 12}, // 请求参数(推荐写法)
success: function (data) {}, // 回调函数(data是用来接收response响应数据的)
error: function () {}, // 出错时执行的回调函数
dataType: "json", // 设置接收到的response响应数据的格式
});
}
---------------------------------------- $.get()/$.post()实现 ---------------------------------------------
function fun() {
$.get(url, [data], [callback], [type])
$.post(url, [data], [callback], [type])
// 参数:$.get(请求路径, [请求参数], [回调函数], [响应结果的类型])
}
结束之前,再读三遍:局部刷新,异步通信,按需取数据!!
End ♬
by a Lolicon ✪