Eine einfache kleine Demo von AJAX basierend auf JavaScript

AJAX

AJAX = Asynchrones JavaScript und XML.

AJAX ist keine neue Programmiersprache, sondern eine neue Art, bestehende Standards zu nutzen.

AJAX ist die Kunst, Daten mit einem Server auszutauschen und Teile einer Webseite zu aktualisieren, ohne die gesamte Seite neu zu laden.

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;
   }
 }
}

Rufen Sie zuerst die entsprechende Überprüfungsmethode und die Ajax-Übermittlungsmethode über das Übermittlungsereignis des Formulars auf. Wenn die Ajax-Übermittlung fehlschlägt, geben Sie „false“ zurück. normal senden

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;//代表函数执行完毕
}

Sehen wir uns Schritt für Schritt an, was getan wurde

Erstens ein Anforderungsobjekt erhalten

Zweitens die Anzeigemethode aufrufen um den Artikel von der Seite zu löschen Alle Elemente unter und fügen Sie die Ladeanimation ein

Die dritte Anforderung zum Erstellen der URL-Codierung verwendet ein Array zum Speichern eines Elements mit Namen und URL-Escape-Wert und verbindet dann jedes Element über & um ein vollständiges Zeichen zu bilden.

Die vierte besteht darin, die grundlegenden Attribute der Anforderung festzulegen, z. B. die Benennung der Zieladress-Header-Datei.

Die fünfte besteht darin, ein Abhörprogramm zur Überwachung zu erstellen Wenn die Anfrage erfolgreich ist, geben Sie den Antwort-HTML-Code in den Zielartikel ein.
Die sechste formelle Anfrage wurde erfolgreich gesendet und gibt true zurück.

Das Obige ist eine einfache kleine Demo von JavaScript Basic AJAX, die vom Herausgeber I eingeführt wurde Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht. Der Herausgeber wird allen rechtzeitig antworten.

Weitere Artikel zur einfachen einfachen JavaScript-AJAX-Demo finden Sie auf der chinesischen PHP-Website!