AJAX快速入门-GET(PROJECT02_DAY01_01)

2. AJAX快速入门

2.1 AJAX请求响应过程分析

所有的 AJAX请求都会基于DOM(HTML元素)事件，通过XHR（XMLHttpRequest）对象实现与服务端异步通讯局部更新，如图-4所示：

图-4

2.2 AJAX编程基本步骤分析

第一步：基于dom事件创建XHR对象(XMLHttpRequest对象)
第二步：注册XHR对象状态监听，通过回调函数处理状态信息
第三步：创建与服务端的连接
第四步：发送异步请求实现与服务端的通讯
第五步：通过回调（callback）函数，获得响应结果并进行数据更新.(非阻塞)

• Controller 层代码:

//http://localhost/activity/activity_list 
@RequestMapping("activity_list") 
public String doActivityListUI(){ 
	return "activity_list"; 
}

并通过@ResponseBody 注解对方法进行描述，用于告诉 SpringMVC 将方法返回值转换为 json 格式的字符串。

//http://localhost/activity/doFindActivitys
@RequestMapping("doFindActivitys")
@ResponseBody //告诉 spring mvc 将返回值转换 json 格式字符串
public List<Activity> doFindActivitys(){
	List<Activity> list=activityService.findActivitys(); 
	return list;
}

2.3 AJAX请求响应编程操作实践

2.3.1 AJAX GET 请求操作实现

课堂练习：基于时序图分析，进行代码设计和实现，如图-5所示：

图-5

图-5中涉及到的相关代码参考如下：
基于 AJAX技术中的 XMLHttpRequest 对象，向服务端发起异步 GET请求，关键代码分析如下：

function doAjaxGet(url,params,callback){//没有参数可以不写
     //1.创建XmlHttpRequest对象
     var xhr=new XMLHttpRequest();
     //2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程(例如连接是否建立，请求是否在处理，响应是否已产生)
     xhr.onreadystatechange=function(){//监听函数
         //基于xhr对象获取的通讯状态，对响应数据进行处理
         if(xhr.readyState==4&&xhr.status==200){//4 表示通讯结束,200表示服务端响应ok
        	//服务端响应的结果会传递给XHR对象，我们可以借助responseText获取响应结果
            callback(xhr.responseText);
         }
     }
    //3.创建与服务端的连接
    xhr.open("GET",url+"?"+params,true);//true表示异步
    //4.发送请求
    xhr.send(null); //Get请求，send方法不传内容
    //5.对响应结果进行处理(在回调函数中处理)。
}

向服务端发送异步请求获取数据

//通过如下函数向服务端发送异步请求获取activity数据并更新到页面上
<script type="text/javascript">
function doGetActivitys() {
	//1.定义请求参数
	var params = "";
	//2.定义请求的url
	var url = "doFindActivitys";//没有加/,因为是相对路径
	//3.发送异步请求获取服务端资源并更新到页面上
	doAjaxGet(url, params, function(result) {
		//在浏览器控制台输出 result
		//console.log(result);
		doHandleResponseResult(result);
	});
}
doGetActivitys();
</script>

因为从后台传来的数据为字符串,并不能获取其中数据,所以需要将其转为对象, 转为对象后才能够获取其中数据:

通过 doHandleResponseResult 方法将 AJAX 获得的响应结果呈现在页面上。

 function doHandleResponseResult(result){
       //1.将json格式字符串转换为json格式的JS对象(字符串无法直接提取内容)
       var jsonObj=JSON.parse(result);//JSON为JS中的一个类
       //2.将json对象中的数据更新到页面上
       //2.1 迭代jsonObj对象中的数据，并将数据拼接到tr字符串中
       var trs="";
       for (var i=0;i<jsonObj.length;i++) {
				trs += "<tr>" + 
				"<td>" + jsonObj[i].id + "</td>" + 
				"<td>" + jsonObj[i].title + "</td>" + 
				"<td>" + jsonObj[i].category + "</td>" + 
				"<td>" + new Date(jsonObj[i].startTime).toLocaleString() + "</td>" + 
				"<td>" + new Date(jsonObj[i].endTime).toLocaleString() + "</td>" + 
				"<td>" + (jsonObj[i].state ? "进行中" : "已结束") + "</td>" + 
				"<td>delete</td>" +
				"</tr>"
			}
			//2.2将字符串以html的形式更新到tbody的位置上
			var tBody =document.getElementById("tbodyId");
			tBody.innerHTML=trs;
   }