AJAX学习

function RequestAjax(serverurl){
    var loader = this;
    var xmlHttpRequest = null;  //XMLHttpRequest对象
    var eventMap = new Array();  //绑定回调函数
    
    this.serverUrl = serverurl;  //服务的连接
    this.isAsyn = true;  //是否使用异步的方式
    this.responseText = null;

    /**
      *创建XMLHttpRequest实例
      */
    this.createXMLHttpRequest = function(){
        if(window.ActiveXObject){
            return new ActiveXObject("Microsoft.XMLHttp");
        }else if(window.XMLHttpRequest){
            return new XMLHttpRequest();
        }else{
            return null;
        }
    };
    xmlHttpRequest = loader.createXMLHttpRequest();  //当createXMLHttpRequest函数编译后才能调用，所以该句放在下面
    
    /**
      *返回要查询的URL字符串
      */
    this.createQueryString = function(queryArray){
        var queryString = null;
        for(var i=-1;queryArray!=null&&i<queryArray.length;i++){
            if(i == -1){
                queryString = "timeStamp=" + new Date().getTime();  //避免由于queryString的相同导致取缓存
            }else if(queryArray[i] != null){
                queryString = queryString + "&" + encodeURIComponent(queryArray[i][0]) + "=" + encodeURIComponent(queryArray[i][1]);
            }
        }
        return queryString.replace(/%20/g, "+");
    };
    
    /**
      *用get查询
      */
    this.doRequestUsingGet = function(queryArray){
        if(this.xmlHttpRequest == null){
            return;
        }
        
        var queryString = loader.createQueryString(queryArray);
        
        xmlHttpRequest.onreadystatechange = function(){
            handleStateChange.call(loader);
        };
        xmlHttpRequest.open("GET",loader.serverUrl+"?"+queryString,loader.isAsyn);
        xmlHttpRequest.send(null);
    };
    
    /**
      *用post查询
      */
    this.doRequestUsingPost = function(queryArray){
        if(xmlHttpRequest == null){
            return;
        }
        
        var queryString = loader.createQueryString(queryArray);
        
        xmlHttpRequest.open("POST",loader.serverUrl,loader.isAsyn);
        xmlHttpRequest.setRequestHeader("Content-Length",queryString.length);  
        xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xmlHttpRequest.onreadystatechange = function(){
            handleStateChange.call(loader);
        };
        xmlHttpRequest.send(queryString);
        
    };
    /**
     * 绑定回调函数
     */
   this.attachEvent = function(eventName,customFunc){
       eventMap[eventName] = customFunc;
   };
   /**
     *检查XMLHttpRequest的readyState属性的状态值，
     *根据flag的值来选择相应的函数操作
     * 1 创建树时生成根节点
     */
   var handleStateChange = function(){
       if(xmlHttpRequest!=null){
           if(xmlHttpRequest.readyState == 4){  //有5个可取值：0 未初始化 1 正在加载 2 已加载 3 交互中 4 完成 
               if(xmlHttpRequest.status == 200){  //http状态，如404表示页面不存在,200表示请求成功
                   loader.responseText = xmlHttpRequest.responseText;
                   var customFunc = eventMap["onRequestComplete"];
                   if(customFunc != null){
                       customFunc(loader.responseText);  //将服务器返回的响应字符串传给自定义的回调函数
                   }
               }
           }
       }
   };
};

1、把上述代码保存成一个JS文件，如:ajax.js。

2、在需要实现ajax调用的地方引用ajax.js文件。

<script type="text/javascript" src="ajax.js"></script>

3、书写具体的JS调用函数，实现AJAX调用，并发送请求。

//发送请求
         function addUnitResults(){
  			var ret = window.showModalDialog('parentSelect.jsp');
  			if(ret==null || ret==undefined || ret.length==0){
  				return;
  			}else{
  				var url = "requestServer.do";
  		     	var requestObj = new RequestAjax(url);
  		     	requestObj.isAsyn = true;
  		     	requestObj.attachEvent("onRequestComplete",onFinishSave);
  		     	var unitCode = ["unitCode",ret]; 
  		     	var actionType = ["actionType","insert"]; 
  		     	var requestParameters = new Array(unitCode,actionType);
  		     	requestObj.doRequestUsingPost(requestParameters);
  			}
  		}
  		//回调函数
  		function onFinishSave(returnText){
		 	jsonReturnObj = eval('(' + returnText + ')');
			if(jsonReturnObj.isSuccess){
				alert("操作成功!");
				window.location.reload();
			}else{
				alert(jsonReturnObj.errMsg);
			}
		 }

requestObj.attachEvent("onRequestComplete",onFinishSave); //onRequestComplete是一个变量名，固定。另外一个参数是AJAX回调函数名称。即服务器在处理请求过程中，会根据状态回调该JS函数。

var requestParameters = new Array(unitCode,actionType); //传输的参数

requestObj.doRequestUsingPost(requestParameters); //发送请求。



4、服务器端处理业务逻辑，并返回处理信息。
JSONObject jsonReturnObj = new JSONObject();
	//这行很重要
	out.clear();
	boolean isSuccess = false;
	try{
		//业务处理逻辑
		isSuccess = service.deleteUnitResults(unitCode);
		jsonReturnObj.put("isSuccess", new Boolean(isSuccess));
	}catch(Exception e){
		jsonReturnObj.put("isSuccess", new Boolean(isSuccess));
		jsonReturnObj.put("errMsg", "失败"+e.getMessage());
	}
	out.println(jsonReturnObj);
本初需要引入json应用包。这个可以在网络上下载得到。

jsonReturnObj.put("isSuccess", new Boolean(isSuccess));
 "isSuccess" 是返回变量名称，在AJAX请求端的回调JS函数中，可以世界引用，并获取得到结果。