Ajax的使用

Ajax代表的是一种开源风格，使用Ajax的异步模式，浏览器无须重新加载整个页面，就可以显示新的数据。Ajax可以减轻服务器和带宽的负担，提供更好的服务响应。

页面显示如图：

Ajax的例子：

<span style="font-size:18px;">/**
* 传递3个参数
  * 参数一：domId:表示表单中Form2的名称
  * 参数二：action:访问的URL地址
  * 参数三：sForm:表示表单中Form1的名称
*/
Pub.submitActionWithForm=function(domId,action,sForm){
  //创建Ajax引擎
  var req = Pub.newXMLHttpRequest();
  //处理Ajax的事件处理函数，接收服务器响应的数据
  var handlerFunction = Pub.getReadyStateHandler(req, domId,Pub.handleResponse);
  req.onreadystatechange = handlerFunction;
  //打开连接，false：同步，必须等待值加载完成之后，才往后执行，使用POST方式，必须要设置请求头部信息
  req.open("POST", action, false);
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
  //发送请求，向服务器发送数据(表单Form1中的数据)
  var str = Pub.getParams2Str(sForm); 
  req.send(str);
}</span>

<span style="font-size:18px;">
</span>

//创建Ajax引擎
Pub.newXMLHttpRequest=function newXMLHttpRequest() {
  var xmlreq = false;
  if (window.XMLHttpRequest) {
  
    xmlreq = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
     
    try {
      xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e1) {
      try {
        xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {   
        alert(e2);
      }
    }
  }
  return xmlreq;
}

/**
data:通过ajax的调用服务器响应的数据结果
eleid：表示表单Form2的名称
*/
Pub.handleResponse= function handleResponse(data,eleid){

      var ele =document.getElementById(eleid);
      //alert(data);
      ele.innerHTML = data;
    
}

/**
req:表示Ajax引擎
eleid:表示表单Form2的名称
responseXmlHandler:表示请求数据的方法体Pub.handleResponse
**/
Pub.getReadyStateHandler =function getReadyStateHandler(req, eleid,responseXmlHandler) {
  return function () {
    if (req.readyState == 4) {//readyState详情，请查看如下
      if (req.status == 200) {
        responseXmlHandler(req.responseText,eleid);
      } else {
        alert("HTTP error: "+req.status);
        return false;
      }
    }
  }
}

//组织Form1表单中的数据
Pub.getParams2Str=function getParams2Str(sForm){
 var strDiv="";   
 try {
    var objForm=document.forms[sForm];
  if (!objForm)
    return strDiv;
  var elt,sName,sValue;
  for (var fld = 0; fld < objForm.elements.length; fld++) {
      elt = objForm.elements[fld];    
      sName=elt.name;
      sValue=""+elt.value;
      if(fld==objForm.elements.length-1)
          strDiv=strDiv + sName+"="+sValue+"";
       else   
          strDiv=strDiv + sName+"="+sValue+"&";
   }
  //alert(strDiv);
  }
  catch (ex) {
    return strDiv;
	}
 
   return strDiv;
}