JavaScript基礎之AJAX簡單的小demo
AJAX
成都創新互聯公司-專業網站定制、快速模板網站建設、高性價比蘭溪網站開發、企業建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式蘭溪網站制作公司更省心,省錢,快速模板網站建設找我們，業務覆蓋蘭溪地區。費用合理售后完善，10余年實體公司更值得信賴。
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。
AJAX 不是新的編程語言，而是一種使用現有標準的新方法。
AJAX 是與服務器交換數據并更新部分網頁的藝術，在不重新加載整個頁面的情況下。
function prepareForms() {
for(var j=0 ; j<document.forms.length ; j++){
var this_forms = document.forms[j];
resetFields(this_forms);
this_forms.onsubmit = function () {
if(!validateForm(this)) return false; //進行瀏覽器端表單驗證
var article = document.getElementsByTagName("article")[0];
if(submitFormWithAjax(this,article)) return false; //代表防止重復提交 實際的提交已經完成
return true;
}
}
}首先 通過表單的提交事件調用相應的驗證方法 和ajax提交方法 如果說ajax提交成功 返回false 攔截提交事件 如果ajax失敗 則正常提交
function displayAjaxLoading(element) {
while(element.hasChildNodes()){
element.removeChild(element.lastChild); //如果還有子節點 重復刪除 直到內部為空
}
var content = document.createElement("img");
content.setAttribute("src","images/loading.gif");
content.setAttribute("alt","loading....");
element.appendChild(content);
} //拿到元素 清空內部 并添加一個img
function submitFormWithAjax(whichform,thetarget) {
var request = getHTTPObject();
if(!request){return false ;}
displayAjaxLoading(thetarget);//調用加載方法
var dataParts = [];
var element; //提前創建要用的容器
for(var i=0 ; i<whichform.elements.length ; i++){
element = whichform.elements[i];
dataParts[i] = element.name + "=" +encodeURIComponent(element.value) //把元素的名字和值轉化成URL編碼放入容器中
}
var data = dataParts.join("&"); //把數組轉化成一串字符串 每個項目之間用&連接
request.open("post",whichform.getAttribute("action"),true); //向表單目標地址準備提出名為post的請求
request.setRequestHeader("content-type","application/x-www-form-urlencoded");//設置頭部信息
//獲取請求后就會調用一下的 方法 算是一個觸發器 服務器會執行以下內容
request.onreadystatechange = function () {
if(request.readyState == 4){
if(request.status == 200 || request.status == 0){
var matches = request.responseText.match(/<article>([\s\S]+)<\/article>/) //捕獲文本
if(matches.length>0){
thetarget.innerHTML = matches[1]; //正則表達式返回0為包含<article> 1為不包含的版本
}
else {
thetarget.innerHTML = "<p>sorry not find</p>";
}
}
else {
thetarget.innerHTML = "<p>" + request.statusText + "</p>";
}
}
}
request.send(data); //對目標服務器發送請求
return true;//代表函數執行完畢
}讓我們分步來查看具體做了什么事情
第一 獲取了一個請求對象
第二 調用display方法 讓頁面刪除article下的所有元素并放上load動畫
第三 創建URL編碼的請求 用數組存放 一項里面為name和被URL轉義的value 然后把他每項通過&連接 組成一個完整的字符串
第四 設置了請求的基本屬性 比如命名 目標地址 頭文件
第五 創建一個監聽程序 監聽請求 如果成功則把響應的html填入到目標article中
第六 正式發送請求 成功返回ture
以上所述是小編給大家介紹的JavaScript基礎 AJAX簡單的小demo ，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
網頁名稱：JavaScript基礎之AJAX簡單的小demo
網站路徑：http://newbst.com/article48/jhcehp.html
成都網站建設公司_創新互聯，為您提供動態網站、網站導航、小程序開發、網站排名、自適應網站、移動網站建設
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
