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;      }    }  }}

请求的状态（readyState）

变量，此属性只读，状态用长度为4的整型表示.定义如下：

0 （未初始化）

对象已建立，但是尚未初始化（尚未调用open方法）

1 （初始化）

对象已建立，尚未调用send方法

2 （发送数据）

send方法已调用，但是当前的状态及http头未知

3 （数据传送中）

已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

4 （完成）

数据接收完毕，此时可以通过通过responseBody和responseText获取完整的回应数据

//组织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;}