咱们须要以异步、按需加载的形式从服务端获取数据并及时刷新，来进步用户体验，于是Ajax技术诞生。
Ajax (Asynchronous JavaScript and XML) 是一种Web利用客户端技术,能够借助客户端脚本(javascript)与服务端利用进行异步通信(能够有多个线程同时与服务器交互)，并且按需获取服务端数据当前,能够进行部分刷新,进而进步数据的响应和渲染速度。
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>
发表回复