Wie ist Ajax entstanden? Wie wird Ajax entwickelt? (Zusammenfassung)-js-Tutorial-php.cn

Dieser Artikel stellt hauptsächlich die Hintergrunddefinition von Ajax sowie eine Zusammenfassung der persönlichen Verwendung von Ajax vor. Schauen wir uns nun gemeinsam diesen Artikel an

Dieser Artikel hat den folgenden Inhalt :

Was ist AJAX
Der Hintergrund von AJAX
Das Prinzip von AJAX
Definition von AJAX
AJAX-Entwicklungsschritte
Eine einfache Demo
Vor- und Nachteile der AJAX-Technologie

Was ist AJAX?

Wenn wir Wikipedia konsultieren, können wir diese Passage sehen:
AJAX steht für „Asynchronous JavaScript and XML“ (asynchrone JavaScript- und XML-Technologie) und bezieht sich auf eine Reihe browserseitiger Webentwicklungstechnologien, die mehrere Technologien kombinieren.

So, jetzt haben wir einen allgemeinen Eindruck: AJAX=JavaScript+XML. Wir sollten alle mit js und xml vertraut sein.
Der Hintergrund der Entstehung von AJAX
Rückblickend auf unsere Entwicklungsreise: Während des ursprünglichen Entwicklungsprozesses mit Servlet+JSP+JavaBean ermöglichte unsere Webanwendung Benutzern das Ausfüllen und Senden von Formularen die Webseite (Formular), um eine Anfrage (Request) an den Webserver zu senden. Der Server empfängt die Anfrage, verarbeitet das eingehende Formular und gibt eine Antwort (Antwort) zurück. Nachdem der Browser die Antwort erhalten hat, zeigt er die Seite im Browser durch Parsen an und schließt so eine Interaktion zwischen dem Benutzer und dem Server ab.
Es gibt jedoch einige Probleme mit diesem Modell. Schauen Sie sich nun dieses Beispiel an: Der Browser zeigt die Benutzeranmeldeschnittstelle an. Wenn der Benutzer den Benutzernamen, das Kennwort und den Bestätigungscode eingibt, werden die Daten an den Server gesendet. Angenommen, wir verarbeiten die Anforderung im Servlet und stellen fest, dass der Benutzername und das Kennwort vorhanden sind nicht übereinstimmen. Was kommt als nächstes?
Wir geben die Seite und die Antwort auf die Fehlermeldung erneut an den Browser zurück. Bei Verwendung dieses Entwicklungsprozesses treten einige inhärente Probleme auf:
Zuallererst Verschwendung von Bandbreite. Mit Ausnahme des Teils, in dem die Fehlermeldung angezeigt wird, sind alle anderen Elemente auf den beiden Seiten gleich.
Zweitens: Die Benutzererfahrung ist schlecht. Angenommen, der Benutzer gibt versehentlich den falschen Benutzernamen in das Formular ein. Nach dem Absenden des Formulars wird die Seite nach einiger Zeit aktualisiert und weist darauf hin, dass der Benutzername falsch ist Benutzername und Passwort, die Erfahrung ist äußerst unfreundlich. Wenn die Internetgeschwindigkeit des Benutzers relativ langsam ist, wird das Benutzererlebnis noch schlechter.
Gibt es also eine Möglichkeit, dieses Problem zu lösen? Können wir also Feedback erhalten, wenn der Benutzer nur seinen Benutzernamen eingibt?
Die allgemeine Idee von AJAX
Es gab keine Möglichkeit, bevor das XMLHttpRequest-Objekt von js erschien, aber nachdem es erschien, dachten die Vorgänger über eine bessere Lösung nach, nämlich: Verwenden Sie XMLHttpRequest Das Objekt dient als Agent zum Senden von Anforderungen an den Server und verwendet ihn zum Empfangen der vom Server zurückgegebenen Daten. Auf diese Weise kann die Dateninteraktion abgeschlossen werden, ohne zur Seite zu springen, und es muss nur eine kleine Menge erforderlicher Daten übertragen werden. Daher sind auch die Anforderungen an die Netzwerkgeschwindigkeit geringer.
Es gibt jedoch noch zwei Probleme, die nicht gelöst wurden:
1. Wie kann die Seite basierend auf den vom Server zurückgegebenen Daten dynamisch geändert werden, um eine Interaktion mit dem Benutzer zu erreichen?
2. Wie kann das vom Server zurückgesendete Datenformat angegeben werden, um es vielseitiger zu machen und den Übertragungsumfang so weit wie möglich zu reduzieren?
Zu 1: Die Vorgänger haben sich für die Verwendung von JavaScript entschieden. Ich persönlich verstehe, dass es dafür zwei Gründe gibt: Erstens ist JavaScript recht beliebt und fast alle Mainstream-Browser bieten Unterstützung für JavaScript Ändern Sie den Inhalt von Webseiten dynamisch.
Zu 2: Die Vorgänger haben sich für XML entschieden. Ich denke, das liegt möglicherweise daran, dass die Syntax streng genug, die Semantik klar und vielseitiger ist. Aber ich denke, das übertragene Datenformat hat keinen Einfluss auf die Verwendung von AJAX. Beispielsweise können wir uns für die Übertragung von JSON entscheiden, um weniger Daten zu übertragen, oder sogar für die Übertragung einer aussagekräftigen Zeichenfolge, sofern sich die serverseitigen und browserseitigen Entwickler über das Format einig sind.
AJAX-Definition
Jetzt können wir AJAX definieren: AJAX ist eine Technologie zum Erstellen schneller und dynamischer Webseiten. AJAX ermöglicht die asynchrone Aktualisierung von Webseiten, indem im Hintergrund kleine Datenmengen mit dem Server ausgetauscht werden. Das bedeutet, dass Teile einer Webseite aktualisiert werden können, ohne dass die gesamte Seite neu geladen werden muss.
Entwicklungsschritte der AJAX-Technologie
Durch die obige Einführung kennen wir die Ideen zur Lösung des traditionellen Problems der Ressourcenverschwendung. Schauen wir uns nun an, wie wir dies erreichen können!
Bezüglich der Implementierung von AJAX können Sie sich die Einführung von W3School in AJAX ansehen.
Das Folgende ist meine kurze Zusammenfassung der AJAX-Implementierungsschritte:
1. Wir benötigen ein XMLHttpRequest-Objekt. (Wir alle wissen, dass viele der Standards niedrigerer IE-Browser nicht mit den Mainstream-Standards kompatibel sind. Leider gilt das Gleiche auch für das XMLHttpRequest-Objekt...)
Daher ist der Erfassungsprozess eines XMLHttpRequest-Objekts wie folgt:

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

Nach dem Login kopieren

2. Wir müssen den Vorgang registrieren, den es für dieses XMLHttpRequest-Objekt ausführen möchte (durch Rückruf), und den Status der Nachricht basierend auf dem zurückgegebenen Anforderungsstatus und dem HTTP-Statuscode überprüfen und bestimmen, was wir wollen unter welchen Umständen durchgeführt werden soll. (Wenn Sie mehr erfahren möchten, besuchen Sie die Spalte AJAX-Entwicklungshandbuch der PHP Chinese-Website, um mehr zu erfahren)

Dieser Prozess sieht folgendermaßen aus:

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

Nach dem Login kopieren

Wie ist Ajax entstanden? Wie wird Ajax entwickelt? (Zusammenfassung)

3. Wir müssen die Parameter für das Senden der Anfrage festlegen.
Dieser Vorgang sieht folgendermaßen aus:

    //函数原型：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);

Nach dem Login kopieren

4. Es ist Zeit, die Anfrage tatsächlich zu senden!

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

Nach dem Login kopieren

Wie ist Ajax entstanden? Wie wird Ajax entwickelt? (Zusammenfassung) 这样，一个简单的AJAX过程就完成了。
一些没有介绍的小知识点：

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

Nach dem Login kopieren

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

<!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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

Das obige ist der detaillierte Inhalt vonWie ist Ajax entstanden? Wie wird Ajax entwickelt? (Zusammenfassung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!