第一个Ajax实例-CSDN博客

本文链接：https://blog.csdn.net/yanchegnxiaotubao/article/details/83441263

工作中，经常涉及到一些棘手的问题：可以使用Ajax轻松搞定。

但是由于本人不了解Ajax技术，所以没有贸然将Ajax技术添加到项目中。

通过一些其他手段，实现了相仿的功能，显然：走了很多的弯路。

最近，比较清闲，就通过卓越亚马逊，订购一本《DWR实践》。

开始了，Ajax学习之旅... ...

在此申明：

我的随笔中，绝大多数的代码，摘录之《DWR实践》一书。

通过摘录于此，绝无商业侵权之意，纯粹是个人学习的需要。

下面是第一个Ajax实例：

不用通过Web 服务器，简单实现Ajax效果，可以清晰地了解到Ajax的实现原理

index.html

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>一个简单的不涉及服务器的Ajax实例</title>
		
		<script type="text/javascript">
			//this is a reference to an XMLHttpRequest object
			var xhr = null;
			
			//this function is called any time a selection is made in the first
			function updateCharacters(){
				var selectShow = document.getElementById("selShow").value;
				if(selectShow == ""){
					document.getElementById("divCharacters").innerHTML = "";
					return ;
				}
				
				//instantiate an XMLHttpRequest object
				if(window.XMLHttpRequest){
					// Non-IE
					xhr = new XMLHttpRequest();
				}else{
					//IE
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xhr.onreadystatechange = callbackHandler;
				
				url = selectShow + ".html";
				xhr.open("post", url, true);
				xhr.send(null);
			}	
			
			//this is the function that will repeatedly be called by our 
			//XMLHttpRequest object during the life cycle of request
			function callbackHandler(){
				if(xhr.readyState == 4){
					document.getElementById("divCharacters").innerHTML = xhr.responseText;
				}
			}			
		</script>
	</head>
	<body>
		我们的第一个Ajax实例
		<br></br>
		
		选择一个名著：
		<br>
		<select οnchange="updateCharacters();" id="selShow">
			<option value=""></option>
			<option value="xyj">西游记</option>
			<option value="hlm">红楼梦</option>
			<option value="shz">水浒传</option>
			<option value="sgyy">三国演义</option>
		</select>
		
		<br></br>
		
		返回，名著中主要任务：
		<br>
		
		<div id="divCharacters">
			<select>
			</select>
		</div>
	</body>
</html>

xyj.html

<select>
		<option>唐僧</option>
		<option>孙悟空</option>
		<option>猪八戒</option>
		<option>唐僧</option>
		<option>观音姐姐</option>
		<option>西天如来</option>
</select>

hlm.html

<select>
		<option>贾宝玉</option>
		<option>林黛玉</option>
		<option>薛宝钗</option>
</select>

shz.html

<select>
		<option>林冲</option>
		<option>李逵</option>
		<option>宋江</option>
		<option>时迁</option>
</select>

sgyy.html

<select>
		<option>刘备</option>
		<option>关羽</option>
		<option>张飞</option>
		<option>曹操</option>
		<option>小乔</option>
		<option>诸葛亮</option>
</select>