咱们须要以异步、按需加载的形式从服务端获取数据并及时刷新，来进步用户体验，于是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>