AJAX基础

说明：

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

 

例子：

<html> 
<head> 
<script type="text/javascript"> 
function loadXMLDoc() 
{ 
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{

//创建XMLHttpRequest对象，XMLHttpRequest对象是AJAX基础 
var xmlhttp; 
/*为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject */

if (window.XMLHttpRequest) 
  {// code for IE7+, Firefox, Chrome, Opera, Safari 
  xmlhttp=new XMLHttpRequest(); 
  } 
else 
  {// code for IE6, IE5 
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
  } 
/*当请求被发送到服务器时，我们需要执行一些基于响应的任务。<P>每当 readyState 改变时，就会触发 onreadystatechange 事件。*/ 
xmlhttp.onreadystatechange=function() 
  {

/*readyState和status都是XMLHttpRequest的属性，readyState是表示状态信息：0：服务器未初始化；1: 服务器连接已建立；2: 请求已接收；3: 请求处理中；4: 请求已完成，且响应已就绪。status：200：“OK”，404：“未找到页面”*/ 
  if (xmlhttp.readyState==4 && xmlhttp.status==200) 
   { 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText；

/*以上一句↑↑是JavaScript中的语句，作用是获取当前页面中id标识的对象 
如:  
<input type="text" value="123" id="username" name="username" />  
document.getElementById("userName").value就等于123

<div id="mydiv"><span style="color:#F00;">gfdsgfd</span></div>  
document.getElementById("mydiv").innerHTML就是 <span style="color:#F00;">gfdsgfd</span>

其中innerHTML作用是:获取位于对象起始和结束标签内的HTML。

而xmlhttp.responseText则是获取字符串形式的相应数据。

（因为这些代码的功能是改变界面的的字符串，并不是XML响应，如果是XML，则需要用responseXML)

*/

    } 
  }                                                                                                                    

 /*

将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send()                                                                  

 方法：open():

               open(method,url,async) 中的属性：method：请求的类型；GET 或 POST。

                                                                                url：文件在服务器上的位置。

                                                                                async：true（异步）或 false（同步） 

                send():将请求发送到服务器。    

 */ 
xmlhttp.open("GET","/ajax/demo_get2.asp?fname=Bill&lname=Gates",true);

xmlhttp.send(); 
} 
</script> 
</head> 
<body> 
 
<h2>AJAX</h2> 
<button type="button" onclick="loadXMLDoc()">请求数据</button> 
<div id="myDiv"></div> 
</body> 
</html>  
                                                                

解释详见代码注释。

 

结果如图：

图1：

               

图2：单击“请求按钮”之后：

 

 

所以：

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。