自己封裝的Ajax架構——myAjax.js,ajax架構myajax.js
以下是myAjax.js檔案的全部內容,用法都在注釋中,請查看。 封裝的不好,請各位批評指正~~
/**
* myAjax.js file is used by created Ajax in Web page. 這個檔案是封裝好的Ajax包,可以直接調用
* @Author: Alvin Xing 邢**
* @Param: servlet: It is servlet that deal with this Ajax. 需要處理的servlet(或者jsp或其他html)
* changeDiv: It is the div ID that need changed by Ajax in JSP. 結果需要在這個Div裡顯示
* waiting: It is a waiting things, which could let user feel good. It could be a img Tag. 等待載入的資訊,可以穿圖片,e.g:'<img src="a.jpg">'
* params: It is the parameters you need send to servlet. 提交給servlet的參數
* Tiptop: All parameters are String. you could use '',if you want to use it in "".
* 注 意: 所有參數均為字串,需加''或者"". 如果在""中使用,可以選擇''.例如:onclick="ajaxFunction('servlet','Div001','正在載入','a=10')".
*/
function ajaxFunction(servlet,changeDiv,waiting,params){
//Create the Ajax
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//Define the method to deal with the result.
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var result = xmlhttp.responseText;
document.getElementById(changeDiv).innerHTML = result;
} else {
document.getElementById(changeDiv).innerHTML = waiting; //<img src="wait.jpg">
}
}
//Open and Send the Ajax
// xmlhttp.open("GET","Ajax.html?way=get",true); //Get方式的Ajax請求
// xmlhttp.send(null);
xmlhttp.open("Post", servlet, true); //Post方式的Ajax請求
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(params);
}