JavaScript基礎のAJAX簡単なデモ

AJAX
AJAX=Aynchronous 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メソッドを呼び出して、ページにarticaleの下のすべての要素を削除させて、ロードアニメーションを乗せる。
第三にURLコードを作成する要求は、行列でnameとURLにより変換されたvalueを保存してから、彼の各項目を&接続によって完全な文字列を構成します。
第4に、要求の基本的な属性を設定します。例えば、ネーミング先アドレスヘッダファイルです。
第五に、监聴プログラムの监聴要求を作成します。成功すれば、応答のファイルをターゲットアートに记入します。
第六正式送信要求成功はtureに戻ります。
以上は小编が绍介したJavaScript基础AJAXの简単なデモトです。皆さんに助けてほしいです。もし何か疑问があれば、メッセージをください。小编はすぐに返事します。