1回答

芝芝兰兰

2019-05-05

已采纳

同学你好。这次课程的代码，核心就是news.html和NewsListServlet。目的是使用ajax来请求NewsListServlet，获取json串以后进行组装，展示在页面上。

        //1. 创建XmlHttpRequest
	var xmlhttp;
	if(window.XMLHttpRequest){
		xmlhttp = new XMLHttpRequest();
	}else{
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	//2. 发送Ajax请求
	//true 代表异步执行  false代表同步执行
	xmlhttp.open("GET" , "/ajax/news_list" , true);
	xmlhttp.send();
	console.log("请求发送完成");
	//3. 处理服务器响应
	 xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
			var text = xmlhttp.responseText;
			console.log(text);
			var json = JSON.parse(text);
			console.log(json);
			var html = "";
			for(var i = 0 ; i < json.length ; i++){
				var news = json[i];
				html = html + "<h1>" + news.title + "</h1>";
				html = html + "<h2>" + news.date + "&nbsp;" + news.source +"</h2>"
				html = html + "<hr/>"
			}
			document.getElementById("container").innerHTML = html;
		}
	}

页面一加载便创建XmlHttpRequest对象xmlhttp。这之后，open设置了请求的细节，send向服务器发送了请求。服务器根据请求细节找到NewsListServlet，执行doGet中的代码。最后一句向response中书写了json字符串，状态改变，进入if(xmlhttp.readyState == 4 && xmlhttp.status == 200)，用text获取responseText中的json字符串，将其转换为js的json对象，组装成html元素。将它放入container中。

如果解答了同学的疑问，望采纳~

祝学习愉快~

0