Une simple petite démo d'AJAX basée sur JavaScript

AJAX

AJAX = JavaScript et XML asynchrones.

AJAX n'est pas un nouveau langage de programmation, mais une nouvelle façon d'utiliser les standards existants.

AJAX est l'art d'échanger des données avec un serveur et de mettre à jour des parties d'une page Web sans recharger la page entière.

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

Appelez d'abord la méthode de vérification correspondante et la méthode de soumission ajax via l'événement de soumission du formulaire. Si la soumission ajax réussit, retournez false. Si ajax échoue, soumettre normalement

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

Voyons étape par étape ce qui a été fait

Tout d'abord, obtenez un objet de requête

Deuxièmement, appelez la méthode d'affichage pour supprimer l'article de la page Tous les éléments en dessous et placer l'animation de chargement

La troisième demande de création d'encodage d'URL utilise un tableau pour stocker un élément contenant le nom et la valeur d'échappement de l'URL, puis connecte chaque élément via & pour former un caractère complet.

La quatrième consiste à définir les attributs de base de la requête, tels que nommer le fichier d'en-tête de l'adresse cible

La cinquième consiste à créer un programme d'écoute pour surveiller le demande. En cas de succès, remplissez la réponse html dans l'article cible
La sixième demande formelle est envoyée avec succès et renvoie vrai

Ce qui précède est une simple petite démo de JavaScript de base AJAX présentée par l'éditeur I. j'espère que cela vous sera utile. Si vous avez des questions, laissez-moi un message, l'éditeur répondra à tout le monde à temps !

Pour plus d'articles liés à la démo simple de base de JavaScript AJAX, veuillez faire attention au site Web PHP chinois !