1.Ajax 简介
1.1Ajax 是什么？
Ajax (Asynchronous JavaScript and XML) 是一种Web应用技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯，获取服务端数据以后,可以进行局部刷新。进而提高数据的响应和渲染速度。
- 传统Web应用中简易的同步模型分析
- 基于Ajax技术的异步请求响应模型分析
1.2Ajax 技术应用场景
- Ajax技术最大的优势就是底层异步,然后局部刷新,进而提高用户体验,这种技术现在在很多项目中都有很好的应用。
- AJAX可以仅向服务器发送并取回必须的数据，并在客户端采用JavaScript处理来自服务器的响应。这样在服务器和浏览器之间交换的数据大量减少，服务器响应的速度就更快了。但Ajax技术也有劣势，最大劣势是不能直接进行跨域访问。
1.3Ajax 技术时序模型分析
- 传统Web应用中的，同步请求应用时序模型分析
客户端向服务端向服务端发送请求需要等待服务端的响应结果，服务端返回数据以后，客户端可以继续发送请求。 - 基于Ajax技术的Web异步请求响应模型
客户端可以向服务端发送异步请求，客户端无需等待服务端的响应结果，可以不断向服务端发送请求。
2.Ajax 快速入门
2.1 Ajax 请求响应过程分析
所有的Ajax 请求都会基于DOM(HTML元素)事件，通过XHR（XMLHttpRequest）对象实现与服务端异步通讯局部更新
2.2 Ajax 编程基本步骤分析
第一步：基于dom事件创建XHR对象(XMLHttpRequest对象)
第二步：注册XHR对象状态监听，通过回调函数(callback)处理状态信息。
第三步：创建与服务端的连接
第四步：发送异步请求实现与服务端的通讯
第五步：通过回调（callback）函数，获得响应结果并进行数据更新.(非阻塞
2.3 Ajax 请求响应编程操作实践
2.3.1 Ajax Get 请求操作实现
基于ajax技术中的XMLHttpRequest对象，向服务端发起异步Get请求，关键代码分析
function doAjaxGet(url,params,callback){
//1.创建XmlHttpRequest对象
var xhr=new XMLHttpRequest();
//2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程(例如连接是否建立，请求是否在处理，响应是否已产生)
xhr.onreadystatechange=function(){//callback(回调函数)
//基于xhr对象获取的通讯状态，对响应数据进行处理
if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了
//服务端响应的结果会传递给XHR对象，我们可以借助responseText获取响应结果
callback(xhr.responseText);
}
}
//3.创建与服务端的连接
xhr.open("GET",url+"?"+params,true);//true表示异步
//4.发送请求
xhr.send(null); //Get请求，send方法不传内容
//5.对响应结果进行处理(在回调函数中处理)。
}
- 基于时序图分析
涉及到的相关代码参考如下：
服务端控制层关键代码实现：在控制层的doFindGoods方法中，通过业务层获取商品信息，并通过@ResponseBody注解对方法进行描述，用于告诉SpringMVC将方法返回值转换为json格式的字符串。
@RequestMapping("doFindGoods")
@ResponseBody
public List<Goods> doFindGoods(String name)throws Exception{
List<Goods> list=goodsService.findGoods(name);
return list;
}
客户端关键代码实现：在客户端页面通过doFindGoods方法，基于ajax技术异步获取商品信息，并将获取的商品信息更新到页面上。
function doFindGoods(){
//1.定义请求url
var url="doFindGoods";
//2.定义请求参数
var params="";
//3.发送异步请求
doAjaxGet(url,params,function(result){//callback
//将服务端响应的结果输出到控制台
console.log("result",result);//jsonStr
//处理响应结果(将响应结果更新到页面上)
doHandleResponseResult(result);
})
}
通过doHandleResponseResult方法将ajax获得的响应结果呈现在页面上。
function doHandleResponseResult(result){
//1.将json格式字符串转换为json格式的JS对象(字符串无法直接提取内容)
var jsonObj=JSON.parse(result);//JSON为JS中的一个类
//2.迭代jsonObj数组对象，并将内容呈现在tbody中
//2.1 将每一行内容封装到tr对象中
var trs=""
for(var i=0;i<jsonObj.length;i++){//循环一次取一行
trs+="<tr>"+
"<td>"+jsonObj[i].id+"</td>"+
"<td>"+jsonObj[i].name+"</td>"+
"<td>"+jsonObj[i].remark+"</td>"+
"<td>"+ new Date(jsonObj[i].createdTime).toLocaleString()+
"</td>"+
"<td>delete</td>"+
"</tr>"
}
//2.2将所有的tr添加到tbody中
var tBody=document.getElementById("tbodyId");
tBody.innerHTML=trs;
}
优化
(function(){
var url="/activity/findActivity"
//启动ajax技术，基于GET请求方式获取服务端json数据
$.getJSON(url,function (result) {
console.log("result",result);
var tBody=$("#tbodyId");
tBody.empty();//清空原有tbody内容
for (var i=0;i<result.length;i++){//循环一次迭代一行
//将每一行的内容都追加到tbody中
var tr=`<tr>
<td>${result[i].id}</td>
<td>${result[i].title}</td>
<td>${result[i].category}</td>
<td>${result[i].startTime}</td>
<td>${result[i].endTime}</td>
<td>${result[i].remark}</td>
<td>${result[i].state==1?'活动中':'已过期'}</td>
<td>${result[i].createdTime}</td>
<td>${result[i].createdUser}</td>
<td>
<button class="btn btn-danger btn-sm" id=${result[i].id} " οnclick="doDeleteById(${result[i].id})">delete</button>
</td>
<td>
<button class="btn btn-danger btn-sm" onclick="doUpdateById(${result[i].id})">update</button>
</td>
</tr>`
tBody.append(tr);
}
});
})()
2.3.2 Ajax Post 请求操作实现
基于ajax中XMLHttpRequest对象，向服务端发起异步Post请求。对于post请求在发送请求执行需要设置请求头,见红色代码部分。
function doAjaxPost(url,params,callback){
//1.创建XmlHttpRequest对象
var xhr=new XMLHttpRequest();
//2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程.
xhr.onreadystatechange=function(){//callback(回调函数)
//基于xhr对象获取的通讯状态，对响应数据进行处理
if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了
//服务端响应的结果会传递给XHR对象，
//我们可以借助xhr.responseText获取响应结果
callback(xhr.responseText);
}
}
//3.创建与服务端的连接
xhr.open("POST",url,true);//true表示异步
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//4.发送请求
xhr.send(params); //post请求将参数写到send方法
//5.对响应结果进行处理(在回调函数中处理)。
}
基于时序图分析，进行代码设计和实现
服务端控制层关键代码实现：在控制层的doSaveGoods方法中，通过业务层获取商品信息，并通过@ResponseBody注解对方法进行描述，用于告诉SpringMVC将方法返回值转换为json格式的字符串。
@RequestMapping("doSaveGoods")
@ResponseBody
public String doSaveGoods(Goods goods)throws Exception{
goodsService.saveGoods(goods);
return “save ok”;
}
客户端关键代码实现：在客户端页面中，通过doSaveGoods方法，基于ajax技术异步提交商品信息到服务端，由服务端对象方法将数据写入到数据库。
function doSaveGoods(){
//1.定义请求url
var url="doSaveGoods";
//2.定义请求参数
var nameObj=document.getElementById("nameId");
var remarkObj=document.getElementById("remarkId");
var params="name="+nameObj.value+"&remark="+remarkObj.value+;
//3.发送异步请求
doAjaxPost(url,params,function(result){//callback
alert(result)；
})
}
2.4 Ajax 编程框架基本实现
我们在实际的js编程中经常会以面向对象的方式进行实现
(function(){
//定义一个函数，可以将其连接为java中的类
var ajax=function(){}
//在变量ajax指向的类中添加成员，例如doAjaxGet函数，doAjaxPost函数
ajax.prototype={
doAjaxGet:function(url,params,callback){
//创建XMLHttpRequest对象，基于此对象发送请求
var xhr=new XMLHttpRequest();
//设置状态监听(监听客户端与服务端通讯的状态)
xhr.onreadystatechange=function(){//回调函数，事件处理函数
if(xhr.readyState==4&&xhr.status==200){
//console.log(xhr.responseText);
callback(xhr.responseText);//jsonStr
}
};
//建立连接(请求方式为Get,请求url,异步还是同步-true表示异步)
xhr.open("GET",url+"?"+params,true);
//发送请求
xhr.send(null);//GET请求send方法不写内容
},
doAjaxPost:function(url,params,callback){
//创建XMLHttpRequest对象，基于此对象发送请求
var xhr=new XMLHttpRequest();
//设置状态监听(监听客户端与服务端通讯的状态)
xhr.onreadystatechange=function(){//回调函数，事件处理函数
if(xhr.readyState==4&&xhr.status==200){
//console.log(xhr.responseText);
callback(xhr.responseText);//jsonStr
}
};
//建立连接(请求方式为POST,请求url,异步还是同步-true表示异步)
xhr.open("POST",url,true);
//post请求传参时必须设置此请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送请求
xhr.send(params);//post请求send方法中传递参数
}
}
window.Ajax=new ajax();
})()
3.Ajax 技术在Jquery中应用
3.1Jquery 简介
jQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
3.2Jquery 中常用Ajax 函数
jQuery中基于标准的ajax api 提供了丰富的Ajax函数应用，基于这些函数可以编写少量代码，便可以快速实现Ajax操作。常用函数有：
ajax(…)
get(…)
getJSON(…)
post(…)
package com.cy.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@RequestMapping("/jquery/")
public class JqueryController {
@RequestMapping("doJqueryUI")
public String doJqueryUI() {
return "jquery-ajax1";
}
@ResponseBody
@RequestMapping("doAjaxGet")
public String doAjaxGet(String msg) {
System.out.println(msg + "srk66666doAjaxGet");
return "66T6get9T99";
}
@ResponseBody
@RequestMapping("doAjaxPost")
public String doAjaxPost(String msg) {
System.out.println(msg + "srk66666doAjaxPost");
return "66T6post9T99";
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery中的ajax函数</title>
</head>
<body>
<h1>JQuery中的ajax函数</h1>
<div>
<button onclick="doGet()">$.get</button>
<button onclick="doPost()">$.post</button>
<button onclick="doAjax()">$.ajax</button>
<button onclick="doLoad()">$("").load</button>
</div>
<br>
<fieldset>
<legend>响应结果区</legend>
<div id="result">
loading...
</div>
</fieldset>
<script type="text/javascript" src="/jquery/jquery.min.js"></script>
<script type="text/javascript">
function doGet() {
var url = "doAjaxGet";
var params = "msg=hello srk ===doAjaxGet===";
$.get(url, params, function (result) {
// document.getElementById("result").innerHTML=result; //这个等于下面那个
$("#result").html(result);
}, "text"); //返回的数据类型
}
function doPost() {
var url = "doAjaxPost";
var params = "msg=hello srk ===doAjaxPost===";
$.post(url, params, function (result) {
// document.getElementById("result").innerHTML=result; //这个等于下面那个
$("#result").html(result);
}, "text"); //返回的数据类型
}
function doAjax() {
var url = "doAjaxPost";
var params = "msg=-----srk Ajax-----";
$.ajax({
type: "POST",
url: url,
data: params,
success: function (result) {
$("#result").html(result);
}
});
}
function doLoad() {
var url = "doAjaxGet";
var params = "msg=hello srk ===doLoad===";
$("#result").load(url, params, function () {
console.log("doLoad");
});
//$("#result").load(url); //假如不向服务端传值，不需要处理load完以后的结果还可以这样写
}
</script>
</body>
</html>
说明:jquery 中ajax相关函数的语法可参考官网(jquery.com).
4.Ajax 章节总结
4.1重难点分析
客户端与服务端通讯时的请求响应模型?(同步,异步)
Ajax编程的基本步骤(入口对象-XMLHttpRequest),Ajax应用场景？
JQuery框架中ajax函数的基本应用？(ajax(),get(),getJSON(…)…)
JS代码编写过程中断点(debugger)的应用方式？
4.2FAQ分析
Ajax技术有什么优势,劣势?(优势:按需异步加载,局部更新,改善用户体验)
Ajax技术中最核心对象?(XMLHttpRequest-入口对象)
客户端JS问题如何调试?(打桩console.log(),debugger,排除法)
对于一些js框架你是如何学习？官网(，demo，实践-浏览器测试，搜索引擎)