AJAX异步传输，原理是利用JS的XMLHttpRequest对象，直接和服务器通信，局部重载。在WEB设计中，交互性更强！


1  创建XMLHttpRequest对象

    由于不同浏览器，XMLHttpRequest对象的创建方式不同，所以浏览器判断或者创建成功与否的判断，就十分必要！

2  使用XMLHttpRequest对象创建异步HTTP请求

2.1  onreadystatechange属性服务器响应的函数；

2.2  readystate属性存有服务器响应的状态信息，每当它改变时，onreadystatechange函数就回执行；

2.3  responseText属性，用于取回服务器返回的数据。

2.4  open()方法功能在服务器端执行脚本，send()方法向服务器发送请求

3  实例

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030" />
<title>AJAX Test</title>
<script type="text/javascript" >
function ajaxFunction(){
  var xmlHttp;
  try{
    xmlHttp=new XMLHttpRequest();
  } 
  catch(e) {
    try{
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    } 
    catch(e) {
      try{
	xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      } 
      catch(e) {
	alert("Your Browser does not support AJAX!");
	return false;
      }
    }
  }
 
  xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==4){
      document.getElementById("time").value = xmlHttp.responseText;
      //document.myForm.time.value=xmlHttp.responseText;
    }
  }
  xmlHttp.open("GET","ajax.php",true);
  xmlHttp.send(null);
}
</script>
</head>
<body>
 
<form name="myForm">
UserName: <input type="text" name="userName" onKeyup="ajaxFunction()" />
Time: <input type="text" name="time" id="time"/>
</form>
</body>
</html>

使用 XMLHttp=new XMLHttpRequest() 来创建此对象。这条语句针对 Firefox、Opera 以及 Safari 浏览器。假如失败，则尝试针对 Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”)，假如也不成功，则尝试针对 Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”)。

ajax.php 

1

echo date('Y-m-d H:i:s');