AJAX异步调用与局部刷新的实现步骤详解

    var xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

    var xmlHttpRequest = new XMLHttpRequest();

<html>
   <head>
      <title>创建XMLHttpRequest对象</title>
      <script language = "javascript" type = "text/javascript">
      <!--
      var xmlHttpRequest;  //定义一个变量,用于存放XMLHttpRequest对象
      function createXMLHttpRequest()    //创建XMLHttpRequest对象的方法
      {
	      if(window.ActiveXObject)   //判断是否是IE浏览器
	      {
	         xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");  //创建IE浏览器中的XMLHttpRequest对象
	      }
	      else if(window.XMLHttpRequest)    //判断是否是Netscape等其他支持XMLHttpRequest组件的浏览器
	      {
	          xmlHttpRequest = new XMLHttpRequest();  //创建其他浏览器上的XMLHttpRequest对象
	      }
	    }
       -->
      </script>
      createXMLHttpRequst();   //调用创建对象的方法
    </head>
<body>
</body>

</html>

XMLHttpRequest.open(method,URL,flag,name,password)

xmlHttpRequest.open("get","http://www.aspxfans.com/BookSupport/JavaScript/ajax.htm",true);

xmlHttpRequest.open("get","ajax.htm",true);

//设置当XMLHttpRequest对象状态改变时调用的函数，注意函数名后面不要添加小括号
xmlHttpRequest.onreadystatechange = getData;
//定义函数
function getData()
{
   //判断XMLHttpRequest对象的readyState属性值是否为4，如果为4表示异步调用完成
   if(xmlHttpRequest.readyState == 4)
   {
   /设置获取数据的语句
   }
}

if(xmlHttpRequst.status == 200)
  {
     //使用以下语句将返回结果以字符串形式输出
     document.write(xmlHttpRequest.responseText);
     //或者使用以下语句将返回结果以XML形式输出
     //document.write(xmlHttpRequest.responseXML);
  }	

//设置当XMLHttpRequest对象状态改变时调用的函数，注意函数名后面不要添加小括号
xmlHttpRequest.onreadystatechange = getData;
//定义函数
  function getData()
  {
    //判断XMLHttpRequest对象的readyState属性值是否为4，如果为4表示异步调用完成
    if(xmlHttpRequest.readyState==4)
    {
       //设置获取数据的语句
       if(xmlHttpRequest.status == 200 || xmlHttpRequest.status == 0)
       {
          //使用以下语句将返回结果以字符串形式输出
          document.write(xmlHttpRequest.responseText);
          //或者使用以下语句将返回结果以XML形式输出
          //docunment.write(xmlHttpRequest.responseXML);
       }
     }
  }

XMLHttpRequest.send(data)

name=myName&value=myValue

FormObject.value = "新数值"

 <html>
  <head>
  <title>局部更新</title>
  <script language = "javascript" type = "text/javascript">
  <!--
  function changeData()
  {
     document.myForm.myText.value = "更新后的数据"
  }
  -->
  </head>
  <body>
     <form name = "myForm">
     <input type = "text" value = "原数据" name = "myText">
     <input type = "button" value = "更新数据" onclick = "changeData()">
     </form>
   </body>
</html>

<p>文字</p>
<span>文字</span>
<div>文字</div>
<label>文字</label>
<b>文字</b>
<i>文字</i>

<html>
<head>
<title>局部更新</title>
<script language = "javascript" type = "text/javascript">
    <!--
    function changeData()
    {
       myDiv.innerText = "更新后的数据";
    }
                                  -->
</script>
</head>

<body>
   <div id = "myDive">原数据</div>
   <input type = "button" value = "更新数据" onclick = "changeData()">
</body>
</html>

<div id = "myDiv">原数据</div>

var node = document.getElementById("myDiv");

node.firstChild

<html>
<head>
<title>局部更新</title>
<script language = "javascript" type = "text/javascript">
<!--
  function changeData()
  {
  //查找标签（节点）
  var node = document.getElementById("myDiv");
  //在DOM中标签中的文字被认为是标签中的子节点
  //节点的firstChild属性为该节点下的第1个子节点
  //nodeValue属性为节点的值，也就是标签中的文本值
  node.firstChild.nodeValue = "更新后的数据";
  }
  -->
</script>
</head>
</html>

<html>
<head>
<title>AJAX实例</title>
<script language="javascript" type="text/javascript">    
         <!--

          var xmlHttpRequest;  //定义一个变量用于存放XMLHttpRequest对象
          //定义一个用于创建XMLHttpRequest对象的函数
          function createXMLHttpRequest()
          {
          if(window.ActiveXObject)
          {
          //IE浏览器的创建方式
          xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
         }else if(windew.XMLHttpRequest)
         {
         //Netscape浏览器中的创建方式
         xmlHttpRequest = new XMLHttpRequest();
         }
         }
         //响应HTTP请求状态变化的函数
         function httpStateChange()
         {
         //判断异步调用是否完成
         if(xmlHttpRequest.readyState == 4)
         {
         //判断异步调用是否成功,如果成功开始局部更新数据
         if(xmlHttpRequest.status == 200||xmlHttpRequest.status == 0)
         {
         //查找节点
         var node = document.getElementById("myDIv");

         //更新数据

          node.firstChild.nodeValue = xmlHttpRequest .responseText;
         }
         else
         {
          //如果异步调用未成功,弹出警告框,并显示出错信息
          alert("异步调用出错/n返回的HTTP状态码为:"+xmlHttpRequest.status + "/n返回的HTTP状态信息为:" + xmlHttpRequest.statusText);
        }
       }
       }
       //异步调用服务器段数据
       function getData(name,value)
      {                   
      //创建XMLHttpRequest对象
      createXMLHttpRequest();
      if(xmlHttpRequest!=null)
      {
      //创建HTTP请求
      xmlHttpRequest.open("get","ajax.text",true)
      //设置HTTP请求状态变化的函数
      xmlHttpRequest.onreadystatechange = httpStateChange;
      //发送请求
      xmlHttpRequest.send(null);
      }
   }
   -->
   </script>
</head>

<body>
   <div id="myDiv">原数据</div>
   <input type = "button" value = "更新数据" onclick = "getData()">
</body>
</html>