原生态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的初期总结，本人是菜鸟，请各位大牛指教。