我们需要以异步、按需加载的方式从服务端获取数据并及时刷新,来提高用户体验,于是Ajax技术诞生。
Ajax (Asynchronous JavaScript and XML) 是一种Web应用客户端技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯(可以有多个线程同时与服务器交互),并且按需获取服务端数据以后,可以进行局部刷新,进而提高数据的响应和渲染速度。
Ajax原理
客户端把请求发送给ajax引擎,这个引擎属于浏览器内置的,这个引擎提供了一个线程池,当这个引擎接收到请求的时候,会启用一个线程来进行处理(帮我们发送请求)。
Ajax
优势:底层异步,然后局部刷新,仅向服务器发送并取回必要的数据,并在客户端采用JavaScript处理来自服务器的响应。这样在服务器和浏览器之间交换的数据大量减少,服务器响应的速度就更快了;
劣势:是不能直接进行跨域访问;
Ajax 编码的基本步骤
POST请求
function doAjaxPost() {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 & xhr.status == 200) {
document.getElementById("result").innerHTML = xhr.responseText;
}
}
xhr.open("POST", "http://localhost/doAjaxPost", true)
//post请求必须要设置请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
//发送请求
xhr.send("id=102&city=shenzhen")//post请求可以将参数放到send方法内部
}
POST请求json格式
function doAjaxPostJson() {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 & xhr.status == 200) {
document.getElementById("result").innerHTML = xhr.responseText;
}
}
xhr.open("POST", "http://localhost/doAjaxPostJson", true)
//post请求必须要设置请求头
xhr.setRequestHeader("Content-Type", "application/json")
//发送请求
let param={id:103,city:"nanjing"};
xhr.send(JSON.stringify(param))//post请求可以将参数放到send方法内部
}
在实际编程过程中我们发现ajax的基本步骤中有模板代码,这时我们通常会封装代码共性,提取代码特性.然后来提高代码的可重用性。这里我们可以用回调函数来对模板代码进行封装。
首先我们先了解下什么是回调函数:当把一个函数作为实际参数传递给另一个函数时,这个被传递的函数就是回调函数。
借由回调函数对ajax模板代码进行封装的实现
JS文件中的代码
封装成更通用的既能处理get请求也可以处理post请求
Jquery中对ajax代码所做的封装:
首先先引入js库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<h1>The Jquery Ajax 01 Page</h1>
<button onclick="doAjax()">$.ajax(...)</button>
<button onclick="doGet()">$.get(...)</button>
<button onclick="doPost()">$.post(...)</button>
<button onclick="doLoad()">$().load("...")</button>
</div>
<div id="result"></div>
</body>
<script src="/js/jquery.min.js"></script>
<script>
function doLoad() {
let url = "/doAjaxGet";
//load函数会在指定位置通过ajax方法加载数据,并将数据更新到这个位置
$("#result").load(url, function () {//可选
console.log("==load complete==");//加载完成以后执行
});
}
function doAjax() {
let url = "/doAjaxGet";
let params = "";
//$符号在这里代码jquery对象
//ajax({})为jquery中的一种ajax函数,底层封装了ajax请求过程
$.ajax({
url: url,//key必须为url
data: params,
method: "get",//可以省略,默认为get请求
dataType: "text",//服务端响应到客户端的数据格式,默认为json
async: true,//默认异步
contentType: "application/json",//假如需要向服务端传递json串
success: function (result) {//callback回调函数
//js原生写法
//document.querySelector("#result").innerHTML = result;
//jquery中封装的简化写法
$("#result").html(result);
}//这里的result默认情况在这个ajax()内部被转换成json格式的对象,已经不是字符串了
})//假如服务端响应到客户端的数据为json格式字符串,底层默认将其转换为json对象
}
function doGet() {
let url = "/doAjaxGet";
let params = "";
$.get(url, params, function (result) {
$("#result").html(JSON.stringify(result));
})
}
function doPost() {
let url = "/doAjaxPost";
let params = "id=107&city=hebei";
$.post(url, params, function (result) {
$("#result").html(JSON.stringify(result));
})
}
</script>
</html>