recherche

Maison >interface Web >js tutoriel >Brève analyse et fonctionnement pratique d'Ajax

Brève analyse et fonctionnement pratique d'Ajax

一个新手
一个新手original
2017-09-09 10:39:471353parcourir

Ces mots au début

Objectif

Tout d'abord, je suis un gestionnaire d'informations et j'ai étudié le développement Java backend du framework SSH en tant qu'étudiant de premier cycle (j'étais en désordre). Habituellement, lors du développement de projets Web, JSP est utilisé pour afficher directement la page, puis divers formulaires sont soumis et les actions sautent. En conséquence, une fois que les données doivent être mises à jour, la page doit être actualisée, même en petite partie. est très gênant et affecte l'expérience utilisateur. J'ai toujours voulu utiliser une technologie pour résoudre ce problème. Donc, après avoir lutté pendant un moment en privé, j'ai regardé ajax et j'ai découvert que struts2 supportait parfaitement ajax, j'ai donc écrit cet article pour référence par les personnes qui ont eu la même histoire que moi ! (ps : j'ai l'habitude que des camarades de classe me posent cette question en privé après le travail, donc je l'ai juste réglé pour référence !)

Préparez-vous à l'avance

Cet article parle principalement des applications ajax dans l'environnement struts2 . Vous devez donc importer à l'avance tous les packages jar associés de struts2 dans votre projet Web. Quiconque a appris cela sait que je n'entrerai pas dans les détails ici. De plus, vous devez importer un package jar supplémentaire pour prendre en charge les données json. format. Je vais envoyer le package jar en pièce jointe. En gros, une fois que vous avez fait cela, vous êtes prêt à commencer !

Implémentation spécifique

Je vais vous donner deux exemples spécifiques, l'un est utilisé pour décrire le processus spécifique de requête ajax et l'autre est lié à l'application réelle - renvoyant le correspondant selon les données des paramètres.

Code de la page (HTML+CSS+JS)

Poster le code 1 en premier (pour plus de commodité, je n'ai pas posté le code jsp. En fait, il s'agit simplement de balises certains éléments de configuration .Les lecteurs peuvent le copier vous-même) 

<!DOCTYPE html><html lang="zh-CN"><head>
  <meta charset="UTF-8">
  <title>XHR</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <style>
    form, .box {      
    margin: 50px;      
    padding: 20px;    
    }

    form p {      
    margin: 20px 0;    
    }

    .box {      
    background-color: rgba(0, 0, 0, 0.2);      
    height: 40px;      
    width: 300px;    
    }
  </style></head><body>
  <form id="form">
    <p><label for="nick">昵称：</label> <input value="jero" name="nick" id="nick" type="text" required></p>
    <p><label for="love">爱好：</label> <input value="coding" name="love" id="love" type="text" required></p>
    <p>
      <button type="button" name="get">Get 提交</button>
      <button type="button" name="post">Post 提交</button>
    </p>
  </form>
  <p id="box" class="box"></p>
  <script>

    var byId = (id) => document.getElementById(id); // ES6 箭头函数
    var form = byId(&#39;form&#39;);    var box = byId(&#39;box&#39;);    /**
     * 表单的数据收集起来
     */
    function getData(type) {
      var result = [];      
      var isFill = false;      // 都是文本框的 name
      [&#39;nick&#39;, &#39;love&#39;].forEach((fieldName) => {        
      var v = form[fieldName].value;        
      var obj = {};        
      if (v) {
         obj[fieldName] = v;
          result.push(obj);
          isFill = true;
        } else {
          isFill = false;
        }
      });      if (!isFill) { // 没填的话要返回没填的结果 false
        return false;
      }
      result = JSON.stringify(result);
      result = "info" + &#39;=&#39; + encodeURIComponent(result) 
      return result;
    }    function request(type, callback) {
      var data = getData(type);      
      if (!data) { // 没填的话直接警告
        return alert("完成表单！");
      }      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = () => {        
      if (xhr.readyState === 4) {
          callback(JSON.parse(xhr.responseText), xhr);
        } else {
          console.log(xhr.status);
        }
      }

      xhr.open(type, &#39;./xhr&#39; + (type === &#39;get&#39; ? `?${data}` : &#39;&#39;)); // get 的参数直接拼在 url 的末尾

      // 模拟 post 请求，必须设置个请求头
      if (type === &#39;post&#39;) {
        xhr.setRequestHeader(&#39;Content-Type&#39;, &#39;application/x-www-form-urlencoded&#39;)//可以自己根据实际情况改变取值
      }

      xhr.send(type === &#39;get&#39; ? null : data);
    }    /**
     * 绑定事件抽象下
     */
    function click(btn, callback) {
      btn.addEventListener(&#39;click&#39;, () => {
        request(btn.name, (data) => {         
        var data = JSON.parse(data);
          box.innerHTML = `success by ${data[0].type} method!<br>
         ${data[0].infoStr}`;
         console.log(data);
        });
      });
    }

    // 绑定事件，代码可以从这里看
    click(form.get);
    click(form.post)  </script></body></html>

L'effet d'exécution de page
Brève analyse et fonctionnement pratique dAjax
Il y a plusieurs points dans le code ci-dessus dont je vais parler ici. 1.encodeURIComponent（）Cette fonction est utilisée pour convertir des variables en chaînes dans les adresses URL afin d'éviter les caractères tronqués lors de la transmission de valeurs. 2. Lorsque nous utilisons var form = document.getElementById('form') pour obtenir le nœud du formulaire, nous pouvons utiliser directement form.nick ou form[nick] pour obtenir directement le nœud de la boîte de saisie du surnom. Bien sûr, le principe est que l'élément du formulaire a le <.> ensemble d'attributs. nameConcentrons-nous ensuite sur l'interprétation de ce code : 

function request(type, callback) {      var data = getData(type);//参数列表字符串

      if (!data) { // 没填的话直接警告
        return alert(&#39;完成表单！&#39;);
      }      var xhr = new XMLHttpRequest();//生成XHR对象

      xhr.onreadystatechange = () => {        if (xhr.readyState === 4) {
          callback(JSON.parse(xhr.responseText), xhr);//数据成功接收后的回调函数
        } else {
          console.log(xhr.status);
        }
      }

      xhr.open(type, &#39;./xhr&#39; + (type === &#39;get&#39; ? `?${data}` : &#39;&#39;)); // get 的参数直接拼在 url 的末尾

      // 模拟 post 请求，必须设置个请求头
      if (type === &#39;post&#39;) {
        xhr.setRequestHeader(&#39;Content-Type&#39;, &#39;application/x-www-form-urlencoded&#39;)//可以自己根据实际情况改变取值
      }

      xhr.send(type === &#39;get&#39; ? null : data);
    }
Tout d'abord, précisons que la fonction de cette fonction est d'envoyer une requête ajax ici j'utilise l'objet XHR natif pour l'implémenter ; la requête ajax. Le but est de permettre à chacun de comprendre en profondeur ce qu'est ajax ; de manière générale, l'envoi d'une requête ajax est divisé en quatre étapes :

1. Créer un objet XHR

IE7 et supérieur et désormais les navigateurs grand public Tous prennent en charge les objets XHR natifs, nous pouvons donc utiliser directement

pour créer des objets XHR et utiliser certaines méthodes encapsulées par les objets XHR pour implémenter les requêtes ajax. Quant au cancer en dessous de IE7, je n'y penserai jamais ! Si vous insistez pour le rendre compatible avec IE7 ou version antérieure, vous pouvez vous référer au chapitre ajax du livre rouge js. Il est créé via des objets ActiveX !

var xhr = new XMLHttpRequest();2. Lier la fonction d'écoute

L'étape dans laquelle le processus de réponse à la demande de surveillance est mis en œuvre. Principalement via l'attribut

de la Méthode) xhr.onreadystatechange2-Envoyer (appeler la méthode send(), mais aucune réponse ni donnée n'est reçue) readyState3-Recevoir (recevoir une partie des données)
4 -Complete (obtenir toutes les données de réponse)
Chaque fois que la valeur de l'attribut change, l'événement readystatechange est déclenché. Nous pouvons donc utiliser la valeur de cet attribut pour déterminer si les données dont nous avons besoin sont prêtes. Afin de restituer les données que nous avons demandées sur la page en temps opportun.
et
renvoient le code d'état de la requête HTTP (les étudiants qui ont étudié les réseaux devraient tous le savoir), ce qui nous permet de détecter plus facilement si la requête a réussi ou de déterminer la raison de l'échec de la requête. .

C'est la fonction de rappel à exécuter lorsque nous recevons toutes les données. Elle est principalement utilisée pour traiter les données reçues et restituer la page. Vous pouvez le suivre dans l'application réelle. L'accent est mis sur l'écriture de la fonction de rappel dans la fonction de liaison. Vous devez l'écrire en fonction des besoins réels.
xhr.status3. Démarrez la requête
callback(JSON.parse(xhr.responseText), xhr);

Le premier paramètre définit principalement si la requête utilise la méthode get ou la méthode post (ps : un article récent disait qu'il n'y a pas de différence entre. les deux. Ici, nous suivons l'ancienne routine pour le moment), et la seconde est l'adresse cible de la requête. Une opération ternaire est utilisée pour distinguer get et post car les paramètres de la méthode get sont envoyés en arrière-plan. en mettant les paramètres dans l'URL, nous devons donc concaténer les chaînes ; et la publication est transmise via les données du formulaire dans l'en-tête de la requête, comme indiqué ci-dessous : 

xhr.open(type, &#39;./xhr&#39; + (type === &#39;get&#39; ??${data}: &#39;&#39;));

四、发送请求

xhr.send(type === &#39;get&#39; ? null : data);最后一个环节，上面说到的post传参就要在这传入，get则不用，所以在这里同样用了一个三目运算。

基本上，原生的XHR对象实现ajax请求就如上所说；是不是觉得有点复杂？那么不用慌，喜欢“偷懒”的高端程序猿已经帮我们实现了封装；没错就是当初影响世界的jQuery。话不多说，直接上代码：

$.ajax(function() {
    url: &#39;xhr&#39;,
    type: &#39;get&#39;,
    dataType: &#39;json&#39;,//返回数据类型
    data: {info: data},//传参
    success: function(data) {
        /***/
    },
    error: function() {
        console.log(&#39;error!&#39;);
    }
});

jQuery提供了很多种写法，包括更简单的$.getJSON()；至于我为什么要推荐这种写法，大家可以理解成我很笨，但是其中的含义大家用过就明白了！（吹个小牛皮）

后台代码(action+struts.xml)

上面说了这么多，一是让大家了解原生的是怎样的一个东西，二是因为上述部分是学习后台同学没有接触过的，所以尽可能的讲清楚点；这部分，我想代码一贴出来，大家都懂了！
action

package com.testforajax.demo.action;import java.util.ArrayList;import java.util.HashMap;import java.util.Map;import org.apache.struts2.ServletActionContext;import net.sf.json.JSONArray;import net.sf.json.JSONObject;import com.opensymphony.xwork2.ActionSupport;public class AjaxDemo extends ActionSupport {
    private String info;    public String getInfo() {        return info;
    }    public void setInfo(String info) {        this.info = info;
    }    public String execute() throws Exception {
        String method = ServletActionContext.getRequest().getMethod();
        HashMap<String, String> map = new HashMap<String, String>();
        String name;
        String love;
        JSONArray json = JSONArray.fromObject(info);
        name = json.getJSONObject(0).getString("nick");
        love = json.getJSONObject(1).getString("love");
        json.clear();
        String result = name + " very love " + love;
        map.put("type", method);
        map.put("infoStr", result);
        json.add(map);
        info = json.toString();
        System.out.println(this.info);        return "success";
    }
}

struts.xml

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd"><struts>
    <!-- XHR演示 -->
    <package name="xhrTest" extends="json-default, struts-default">
        <action name="xhr" class="com.testforajax.demo.action.AjaxDemo">
            <result type="json">
                <param name="root">info</param>
            </result>
        </action>
        <!--
        <action name="newxhr" class="com.testforajax.demo.action.AjaxDemo2">
            <result type="json">
                <param name="root">queryId</param>
            </result>
        </action>
        -->
    </package></struts>

在这里只强调一点，struts2的自动打包传值，一定要保证参数名一致！即你在前台封装json数据格式时，对应的key值要和struts.xml配置文件中<param name="root">info一致，同时在action类中也要有对应的属性，以及getter和setter。
还有，在使用json数据格式时要做到传参时记得JSON.stringify(),渲染响应数据时记得JSON.parse()。封装时，一定要按照标准格式，后台封装的话，推荐我写的那种先用map做处理。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Une façon d'écrire une méthode de vérification des e-mails jsArticle suivant：Une façon d'écrire une méthode de vérification des e-mails js

Articles Liés

Voir plus