Comment est apparu l’Ajax ? Comment est développé ajax ? (Résumé)

Cet article présente principalement la définition de base de ajax, ainsi qu'un résumé de l'utilisation personnelle d'ajax. Examinons maintenant cet article ensemble

Cet article a le contenu suivant. :

• Qu'est-ce qu'AJAX

• Le contexte d'AJAX

• Le principe d'AJAX

• Définition d'AJAX

• Étapes de développement AJAX

• Une démo simple

• Avantages et inconvénients de la technologie AJAX

  Qu'est-ce qu'AJAX ?

  En consultant Wikipédia on peut voir ce passage :
AJAX signifie « Asynchronous JavaScript and XML » (technologie JavaScript et XML asynchrone), qui fait référence à un ensemble de technologies de développement Web côté navigateur qui combinent plusieurs technologies.

 Donc, maintenant nous avons une impression générale, AJAX=JavaScript+XML. Nous devrions tous être familiers avec js et xml.
  Contexte de l'émergence d'AJAX
  Retour sur notre parcours de développement, dans le processus de développement original utilisant Servlet+JSP+JavaBean, notre application Web permettait aux utilisateurs de remplir et de soumettre des formulaires sur le page web (Formulaire) pour envoyer une requête (Request) au serveur web. Le serveur reçoit la demande, traite le formulaire entrant et renvoie une réponse (Réponse). Une fois que le navigateur a obtenu la réponse, il affiche la page sur le navigateur par analyse, complétant ainsi une interaction entre l'utilisateur et le serveur.
  Cependant, ce modèle présente quelques problèmes. Regardez maintenant cet exemple : le navigateur affiche l'interface de connexion de l'utilisateur. Lorsque l'utilisateur saisit le nom d'utilisateur, le mot de passe et le code de vérification, les données sont envoyées au serveur. Supposons que nous traitions la demande dans le servlet et constatons que le nom d'utilisateur et le mot de passe le font. ne correspond pas. Nous Quelle est la prochaine étape ?
Nous renverrons à nouveau la page et la réponse du message d'erreur au navigateur. Le navigateur affichera les informations après avoir analysé la réponse, quelle que soit la perfection de la mise en œuvre commerciale, il y aura certains problèmes inhérents :
 Tout d’abord, gaspiller de la bande passante. À l'exception de la partie qui affiche le message d'erreur, tous les autres éléments des deux pages sont identiques.
  Deuxièmement, L'expérience utilisateur est médiocre. Supposons que l'utilisateur entre accidentellement un mauvais nom d'utilisateur dans le formulaire. Après avoir soumis le formulaire, la page sera actualisée après un certain temps et indiquera que le nom d'utilisateur est incorrect. De cette façon, l'utilisateur devra le saisir à nouveau. le nom d'utilisateur et le mot de passe, l'expérience est extrêmement peu conviviale. Lorsque la vitesse Internet de l’utilisateur est relativement lente, l’expérience utilisateur sera encore pire.
 Alors, y a-t-il un moyen de résoudre ce problème ? Autrement dit, pouvons-nous obtenir des commentaires lorsque l'utilisateur saisit simplement son nom d'utilisateur ?
 L'idée générale d'AJAX
  Il n'y avait aucun moyen avant l'apparition de l'objet XMLHttpRequest de js, mais après son apparition, les prédécesseurs ont pensé à une meilleure solution, à savoir : utiliser XMLHttpRequest L'objet sert d'agent pour envoyer des requêtes au serveur et l'utilise pour recevoir les données renvoyées par le serveur. De cette manière, l'interaction des données peut être effectuée sans accéder à la page et seule une petite quantité de données nécessaires doit être transmise. les exigences en matière de vitesse du réseau sont donc également inférieures.
 Cependant, il reste encore deux problèmes qui n'ont pas été résolus :
 1. Comment changer dynamiquement la page en fonction des données renvoyées par le serveur pour obtenir une interaction avec l'utilisateur ?
 2.Comment préciser le format des données renvoyées par le serveur pour le rendre plus polyvalent et réduire au maximum la quantité de transmission ?
Concernant le point 1 : les prédécesseurs ont choisi d'utiliser JavaScript. Je comprends personnellement qu'il y a deux raisons à cela. Premièrement, JavaScript est assez populaire et presque tous les navigateurs grand public prennent en charge JavaScript. Deuxièmement, JavaScript peut passer par le DOM par programme. modifier le contenu des pages Web de manière dynamique.
Pour 2 : Les prédécesseurs ont choisi XML, je pense que c'est peut-être parce que sa syntaxe est assez stricte, que la sémantique est claire et qu'il est plus polyvalent. Mais je pense que le format des données transmises n'a aucun impact sur l'utilisation d'AJAX. Par exemple, nous pouvons choisir de transmettre Json pour transmettre moins de données, ou même choisir de transmettre une chaîne significative, à condition que les développeurs côté serveur et côté navigateur soient d'accord sur le format.
  Définition d'AJAX
   Maintenant, nous pouvons définir AJAX : AJAX est une technologie permettant de créer des pages Web rapides et dynamiques. AJAX permet aux pages Web de se mettre à jour de manière asynchrone en échangeant de petites quantités de données avec le serveur en arrière-plan. Cela signifie que certaines parties d'une page Web peuvent être mises à jour sans recharger la page entière.
  Étapes de développement de la technologie AJAX
  Grâce à l'introduction ci-dessus, nous connaissons les idées pour résoudre le problème traditionnel du gaspillage des ressources. Voyons maintenant comment y parvenir !
À propos de l'implémentation d'AJAX, vous pouvez consulter l'introduction de W3School à AJAX
  Voici mon bref résumé des étapes d'implémentation d'AJAX :
  1. Nous avons besoin d'un objet XMLHttpRequest. (Nous savons tous que de nombreux standards des navigateurs IE de version inférieure sont incompatibles avec les standards traditionnels. Malheureusement, il en va de même pour l'objet XMLHttpRequest...)
  Par conséquent, le processus d'acquisition d'un objet XMLHttpRequest est le suivant :

    var httpXml = null;    if(window.XMLHttpRequest){
        httpXml = new XMLHttpRequest();  //针对现代浏览器，IE7及以上版本
    }else if(window.ActiveXObject){
        httpXml = new ActiveXObject("Microsoft.XMLHTTP");  //针对IE5,IE6版本
    }

2. Nous devons enregistrer l'opération qu'il souhaite effectuer pour cet objet XMLHttpRequest (via un rappel), et vérifier l'état du message en fonction de l'état de la demande renvoyé et du code d'état HTTP, et déterminer sous dans quelles circonstances nous voulons Quelle opération effectuer. (Si vous souhaitez en savoir plus, rendez-vous sur le site Web PHP chinois Colonne Manuel de développement AJAX pour en savoir)

  Ce processus est comme ceci :

    //为XMLHttpRequest对象的onreadystatechange属性注册
    httpXml.onreadystatechange=function(){
        //  在回调函数中根据请求状态与返回的HTTP状态码来选择相应的操作处理数据
        if(httpXml.readyState==4&&httpXml.status==200){
            alert(httpXml.responseText);
        }
    };

  3. Nous devons définir les paramètres d'envoi de la demande.
 Le processus est le suivant :

    //函数原型：open(method,url,async,username,password)    //method            --->请求方式:GET,POST或HEAD    //url               --->请求的地址  GET提交方式可以在后面加上参数    //async             --->请求是否异步执行，true---异步，false---同步   默认为true
    //username,password --->可选，为url所需的授权提供认证资格。如果不为空，会覆盖掉url中指定的资格
    httpXml.open("GET","http://localhost:8080/aaa/MyServlet",true);

 

  4. Il est temps d'envoyer la demande !

    //  参数为请求参数,POST提交内容格式为--->"username=taffy&password=666",GET为----->空
    //  注意：若为POST请求方式，还需设置一个http请求头(应该位于open之后,send之前)
    // 即 setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");    标志form表单的enctype属性
        httpXml.send(null);

  这样，一个简单的AJAX过程就完成了。
  一些没有介绍的小知识点：

    //XMLHttpRequest属性
    responseText   得到返回的文本信息
    responseXML    得到返回的XML信息    //XMLHttpRequest的方法
    getResponseHeader()   得到指定头部信息    getAllResponseHeaders() 将 HTTP响应头部作为未解析的字符串返回    //XMLHttpRequest的控制方法
    abort()    取消当前响应，关闭连接，将readyState置0

  下面是我做的一个简单的Demo：

register.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">

    <!-->onload:页面加载完成后调用 <-->
    window.onload = function(){
        var user = document.getElementById("my_user");        //获取XMLHttpRequest对象
        var httpXml = null;        if(window.XMLHttpRequest){
            httpXml = new XMLHttpRequest(); //针对现代浏览器，IE7及以上版本}else if(window.ActiveXObject){
            httpXml = new ActiveXObject("Microsoft.XMLHTTP"); //针对IE5,IE6版本
        }
        user.onblur=function(){
            httpXml.onreadystatechange=function(){
                if(httpXml.readyState==4&&httpXml.status==200){                    if(httpXml.responseText!="true"){
                        alert("用户名不存在");
                    }
                }
            };
            httpXml.open("GET","http://localhost:8080/aaa/MyServlet?user="+user.value,true);
            httpXml.send(null);
        }</script></head><body>
        <form action="http://localhost:8080/aaa/AnotherServlet">
            <input type="text" name="username" id="my_user">
            <input type="text" name="password" id="my_pass">
            <input type="submit" value="提交">
        </form></body></html>

MyServlet.java

import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/**
 * Servlet implementation class MyServlet
 */@WebServlet("/MyServlet")public class MyServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;    /**
     * @see HttpServlet#HttpServlet()
     */
      public MyServlet() {        super();
    }    @override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        String username = request.getParameter("user");        if (username!=null&&!username.equals("")) {            if (username.equals("admin")) {
                out.write("true");
            }else {
                out.write("false");
            }
        }else {
            out.write("false");
        }
        out.close();
    }    @override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

* 下面对AJAX的优缺点进行一下总结：*
  优点：
  能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。
  缺点：
  1.它可能破坏浏览器的后退功能。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面（现代浏览器一般都可以解决这个问题）；
  2.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。

本篇文章到这就结束了（想看更多就到PHP中文网AJAX使用手册栏目中学习），有问题的可以在下方留言提问。

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!