Ajax原生态

 

var rep;

function showDatas()
 {
  if(window.XMLHttpRequest){//firefox,safari
   req = new XMLHttpRequest();
  }else if(window.ActiveXObject){//IE
   try{
    req = new ActiveXObject("Microsoft.XMLHTTP");
   }catch(e){
    req = new ActiveXObject("Msxml2.XMLHTTP");
   }
  }
  req.onreadystatechange = callExec;//指定回调函数callExec
  req.open("post","<%=basePath %>indexAction!findDatas.action");//创建一个get请求
  req.send(null);//发送请求
 }
 //请求响应回来后,将响应信息显示到页面上
 function callExec(){
  if(req.readyState == 4){
   //alert(req.responseText);
   $("#divId").html(req.responseText);  }

 }

 

 

其中后台的findDatas方法返回一个重组的div串(代码大体如下)：

 

StringBuffer buffer = new StringBuffer();

buffer.append("<div class='goodNum_body'>");

buffer.append(...);
buffer.append("</div>");

response.setContentType("text/html;charset=utf-8");
out = response.getWriter();
out.print(buffer.toString());
out.flush();

 

----------------------------------以下为原生态ajax运用模版-----------------------------------------

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = OK
    // ...our code here...
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}
</script>