<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
function loadXMLDoc(){
var xmlhttp,xmlDoc;
var txt,x;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//指定onreadystatechange 事件中的就绪函数
xmlhttp.onreadystatechange=function(){
//readyState 0: 请求未初始化
//
1: 服务器连接已建立
//
2: 请求已接收
//
3: 请求处理中
//
4: 请求已完成,且响应已就绪
//status
200: "OK"
//
404: 未找到页面
if(xmlhttp.readyState==4 && xmlhttp.status==200){
//这里的responseText获得来自服务器的字符串响应数据
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
//这里的responseXml 获得来自服务器的xml形式的响应数据,这时候要对数据进行解析
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementByTagName("****");
for(i =0;i<x.length;i++){
txt=txt+x[i].childNode[0].nodeValue+"<br/>";
}
document.getElementById("myDiv").innerHTML=txt;
}
}
//open("str1","str2",true/flase)str1,指定处理请求的是get还是post
//str2处理请求的文件的位置,true:同步/false:异步时候,可以不用、、//onreadystatechange 只需要在把代码放到send后即可。
xmlhttp.open("GET","/ajax/demo_get.asp",true);
//还可以添加参数如
xmlhttp.open("GET","*******?name=bill&value=17",true);
xmlhttp.send("name=bill&value=17")//放到send中也可以
//可以设置请求的header通过setRequestHeader(header,value)
//header 指头的名称,value指定头的值。
xmlhttp.setRequestHeader("Content-type","application/x-")
xmlhttp.send();
}
function showHint(str){
var xmlhttp;
if(str.length==0){
document.getElementById("txtHint").innerHTML="";
return;
}
if(window.XMLHttpRequest){
xml=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if(xml.readyState==4 && xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","*****",true);
xmlhttp.send();
}
function showCustomer(str){
var xmlhttp;
if(str==""){
document.getElementById("txtHint").innerHTML="";
return;
}
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.Status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","******",true);
xmlhttp.send();
}
function loadXMLDoc(url){
var xmlhttp;
var txt,x,xx,i;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById('T1').innerHTML=xmlhttp.responseText;
}else{
alert("Problem retrieving data:"+xmlhttp.statusText);
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
<title> New Document </title>
</head>
<body onload="loadXMLDoc('')">
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
<h3>请输入字母(A-Z):</h3>
<form action="">
姓氏:<input type="text" id="text" onkeyup="showHint(this.value)"/>
</form>
<p>建议:<span id="txtHint"></span></p>
<form action="" style="margin-top:15px;">
<label>请选择一位客户:
<select name="customer" onchange="showCustomer(this.value)" style="font-family:Verdana,
Arial,Helvetica,sans-self;">
<option value="APPLE">Apple Computer, Inc.</option>
<option value="BAIDU ">BAIDU, Inc</option>
<option value="Canon">Canon USA, Inc.</option>
<option value="Google">Google, Inc.</option>
<option value="Nokia">Nokia Corporation</option>
<option value="SONY">Sony Corporation of America</option>
</select>
</label>
</form>
<div id="txtHint">客户信息将在此处列出 ...</div>
<div id="T1" style="border:1px solid black;height:40;width:300;padding:5"></div><br/>
<button onclick="loadXMLDoc('/')">Click</button>
</body>
</html>