使用Ajax与后台Servlet异步通信
function createXmlHttpRequest(){var oXmlHttp;if(window.XMLHttpRequest){//非IE浏览器oXmlHttp = new XMLHttpRequest();if(oXmlHttp.overrideMimeType){//针对于FireFox浏览器，传参数出现的问题，设置MimeTypeoXmlHttp.overrideMimeType('text/xml');}return oXmlHttp;}else if(window.ActiveXObject){var aVersions = ["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];for(var i in aVersions){try{oXmlHttp = new ActiveXObject(aVersions);return oXmlHttp;}catch(oError){}}}return null;}/* * Function:向服务器发出异步请求 * @param:url 服务器地址(包括用post方法提交的参数) * @param:param 向服务器提交的内容 * 当header值为null时，设置了application/x-www-form-urlencoded后， * 可以通过Form进行Post提交，在后台用getParameter方法接收参数 * 当header值不为null时，采用字符流传递参数，使用getReader方法获得参数， * 此方式扩展后可以用来文件上传，使用getInputStream方法获得文件流 */function SendHttpAync(url, param, callbackfunc, header){if (navigator.onLine == false){return "Off Line!"}var xmlhttp = createXmlHttpRequest();if(callbackfunc != null ){//异步调用，open方法的第三个参数为truexmlhttp.open("post", url, true);if(callbackfunc instanceof AjaxCallBackModule){xmlhttp.onreadystatechange = function(){callbackfunc.firstEvent(xmlhttp);};}else{xmlhttp.onreadystatechange = function(){callbackfunc(xmlhttp);};}}if(header == null){// 设置了application/x-www-form-urlencoded后，可以通过form进行post提交，// 在后台使用getParameter方法获得参数，否则需要使用getReader方法获得参数// 可以扩展后进行文件上传，使用getInputStream方法获得文件流xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");}try{//向服务器发送数据xmlhttp.send(param);}catch (exception){alert(xmlhttp.parseError.reason);}}/* * Function:异步调用返回函数 * @param:sfunc 返回成功函数 * @param:ffunc 返回失败函数 */function AjaxCallBackModule(sfunc,ffunc){if(sfunc != null){//存在成功函数this.onSuccess = sfunc;}else{//不存在成功函数，自定义一个成功函数（仅打印一个字符串，以示展示）this.onSuccess = function(xmlhttp){alert("Request Successful. Result:[" + xmlhttp.responseText + "]");};}if(ffunc != null){//存在失败函数this.onFail = ffunc;}else{//不存在失败函数，自定义一个失败函数（仅打印一个字符串，以示展示）this.onFail = function(xmlhttp){alert("Request Failed.");};}this.firstEvent = function(xmlhttp){if(xmlhttp.readyState == 4){if(xmlhttp.status == 200){alert("default success function");setTimeout(this.onSuccess,5000)//this.onSuccess(xmlhttp);}else{alert("default failed function");this.onFail(xmlhttp);}}};}function SendAyncByCallBackModule(){var param = "{\"hreflist\":[{\"maxpage\":7,\"pageid\":1}]}";var myData = JSON.parse(param);//另一种解析JSON的方法//var myData = eval("("+param+")");var url = "http://" + location.host + "/ajaxapp/initAction.do?pageid=1";//创建CallBack函数var module = new AjaxCallBackModule(moduleSuccess,moduleFailed);//异步调用，用模板方法返回SendHttpAync(url, JSON.stringify(myData), module, "");}function SendAyncByCallBackCustomed(){var param = "{\"hreflist\":[{\"maxpage\":7,\"pageid\":1}]}";var myData = JSON.parse(param);//另一种解析JSON的方法//var myData = eval("("+param+")");var url = "http://" + location.host + "/ajaxapp/initAction.do?pageid=1";//异步调用，用自定义方法返回SendHttpAync(url, JSON.stringify(myData), myfunc, "");}// 自定义CallBack函数var myfunc = function(xmlhttp){if(xmlhttp.readyState == 4){if(xmlhttp.status == 200){alert("自定义成功方法");}else{alert("自定义失败方法");}}}function moduleSuccess(){alert("模板成功方法");}function moduleFailed(){alert("模板失败方法");}
页:
[1]