ajax 学习记录

<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
// 定义全局的变量
var xmlhttp;
function loadXMLDoc(url,cfunc) {
	//var xmlhttp;
	if(window.XMLHttpRequest){
		xmlhttp = new XMLHttpRequest();
	}else{
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	/* 普通请求方式
	xmlhttp.onreadystatechange = function() {
		//if(xmlhttp.status==404){alert('404 error,file not found');return false;}
		//if(xmlhttp.readyState==0){alert('request did not connect!');}
		//if(xmlhttp.readyState==1){alert('request has been connected!');}
		//if(xmlhttp.readyState==2){alert('request has been received!');}
		//if(xmlhttp.readyState==3){alert('request is dealing...');}
		
		if(xmlhttp.readyState==4 && xmlhttp.status==200){
			//document.getElementById('myDiv').innerHTML=xmlhttp.responseXML;
			var docxml = xmlhttp.responseXML;
			var text="";
			var x = docxml.getElementsByTagName('title');
			for (var i = 0; i < x.length; i++) {
				text = text + x[i].childNodes[0].nodeValue + '</br>';
			}
			document.getElementById('myDiv').innerHTML=text;
		}

	}

	xmlhttp.open("get","books.xml",true);
	//xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//just using in post menthod!
	//xmlhttp.send("name=jackshally&age=27");
	xmlhttp.send();
*/

// 将onReadyStateChange行数的回调函数封装起来
	xmlhttp.onreadystatechange=cfunc;
	xmlhttp.open("GET",url,true);
	xmlhttp.send();
}


function dodo(url)
{
	loadXMLDoc(url,function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById('myDiv').innerHTML=xmlhttp.responseText;
		}
	});
}


//动态获取建议数据
function showHint(str){
	var url = "names.PHP?names="+str;
	//alert(url);
	loadXMLDoc(url,function(){
		if (str.length==0){
			document.getElementById('txtHint').innerHTML="";
			return;
		}
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
			//alert(xmlhttp.responseText);
			document.getElementById('txtHint').innerHTML = xmlhttp.responseText;
		}
	});
}

function fillme(str){
	document.getElementById('txt1').value=str;
}


function showCustomer(str){
	url='data.PHP?q='+str;
	//alert(url);
	loadXMLDoc(url,function(){
		//alert(url);
		if(xmlhttp.readyState==4 && xmlhttp.status==200){
			//alert(url);
			var text = "<table border='1' width='720px'><tr><th width=20%>NAME</th><th>PASS</th><th>ADDTIME</th></tr>";
			var xmldoc = xmlhttp.responseXML;
			var x = xmldoc.getElementsByTagName('user');
			for (var i = 0; i < x.length; i++) {
				text=text + "<tr><td>";
				text=text + x[i].getElementsByTagName('name')[0].childNodes[0].nodeValue+'</td>';

				text=text + "<td>";
				text=text + x[i].getElementsByTagName('pass')[0].childNodes[0].nodeValue+'</td>';

				text=text + "<td>";
				text = text + x[i].getElementsByTagName('addtime')[0].childNodes[0].nodeValue+'</td>';
				//alert(text);
			};
			document.getElementById('show1').innerHTML=text+'</tr></table>';
		}
	});
}






</script>
	
</head>
<body>

<div id="myDiv"><h3>Let AJAX change this text</h3></div>

<button type="button" onclick='dodo("ajax.PHP?name2=desmonde&age2=36")'>Change Content</button>
<button type="button" onclick='dodo("ajax.PHP?name2=jackshally&age2=38")'>Change another</button>

<h3>请在下面的输入框中键入字母（A - Z）：</h3>
<form action="names.PHP"> 
姓氏：<input type="text" id="txt1" onkeyup="showHint(this.value)" value=""/>
</form>
<p>建议[点击自动填写]：<span id="txtHint"></span></p>



<form action="data.PHP" style="margin-top:15px;"> 
<label>请选择一位客户：
<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana,Arial,Helvetica,sans-serif;">
<option value="10">选择10条数据</option>
<option value="100">选择100条数据</option>
<option value="1000">选择1000条数据</option>

</select>
</label>
</form>
<br />
<div id="show1">客户信息将在此处列出 ...</div>



</body>
</html>
原文链接：https://www.f2er.com/ajax/165815.html
猜你在找的Ajax相关文章
