原生态Ajax写法异步提交，巧妙利用innerHTML实现不清空原来内容追加请求结果

一、Ajax核心代码解析

            Ajax的调用方法可以通过onclick、onchange等鼠标和键盘的事件来触发。此处不做叙述。直接看Ajax的核心代码。

    <SCRIPT LANGUAGE="JavaScript">
    function showInfo(){
          var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");      

          xmlHttp.open("get","show",true);

     xmlHttp.onreadystatechange=function(){ 
    if(xmlHttp.readyState == 4){ 
    document.getElementById("infoDiv").innerHTML = xmlHttp.responseText; 
    }
     } 
    xmlHttp.send();
    }
    </SCRIPT>

 Msxml2.XMLHTTP是IE浏览器的内置的对象，该对象具有一步提交数据和获取结果的功能。

    如果不是IE浏览器，实例化方法如下。

<SCRIPT LANGUAGE="JavaScript">
          var xmlHttp = new XMLHttpRequest();
    </SCRIPT>

 如果需要在网页载入时运行该函数，可以使用JS的

  window.onload = function(){
          //.........
    }

 方法去加载Ajax。

xmlHttp.open("get","show",true);

//此处三个参数，get表示请求方式，有get、post两种选择。show是请求的目标 true表示使用异步提交,false是同步

 xmlHttp.onreadystatechange=function(){//.....}

//是回调函数，4代表完成状态，数据全部接收完成。

document.getElementById("infoDiv").innerHTML

此语句可以将内容写入到id为infoDiv的标签内，innerHTML会清空原来的内容。

xmlHttp.responseText

    此语句是请求的结果，表示xmlHttp从提交目标中得到的输出的文本内容。xmlHttp除了responseText属性外，还有一个属性：responseXml，表示从提交目标得到的xml个数的数据。

    infoDiv除了具有innerHTML属性外，还有innerText属性，表示显示内容时，不考虑其中的HTML标签，即将内容原样显示。

xmlHttp.send();

//是发送请求  如果是get方式，send可以没有参数,如果是post方式提交，参数通过send发送，不过即使是以post方式，也可以将参数附加在url后面进行请求。

    二、使用Ajax请求，很多时候想要保留标签原来内容，但innerHTML会把原来内容清空，怎么办呢？

    其实很简单，看这句话：

 document.getElementById("infoDiv").innerHTML = xmlHttp.responseText;

 这句话是把请求结果写入到infoDiv标签内，那么我们可不可以简单的把它看成一条赋值语句，然后修改为下面这样：

 document.getElementById("infoDiv").innerHTML =  document.getElementById("infoDiv").innerHTML + xmlHttp.responseText;

    事实上，是可以的，这样就可以保留以前的内容还在。请求的结果将显示在infoDiv标签的最后。

    那有时候我们需要对数据进行排序，请求的结果需要放最上边，这样又怎么办呢？

    这时候相信你的思路已经打开了。我们可以将加法顺序颠倒，这样就可以将结果追加的标签最上方。如这样：

 document.getElementById("infoDiv").innerHTML = xmlHttp.responseText + document.getElementById("infoDiv").innerHTML;

以上是本人学习Ajax的初期总结，本人是菜鸟，请各位大牛指教。