Heim > Artikel > Web-Frontend > Lernen Sie Ajax kennen
Lernen Sie Ajax kennen
- coldplay.xixinach vorne
- 2020-09-18 17:37:461970Durchsuche
Empfohlene verwandte Artikel: Ajax-Video-Tutorial
1.1 Was ist Ajax?:
Ajax ist „Asynchronous Javascript And XML“ (Asynchronous JavaScript). XML) bezieht sich auf Eine Webentwicklungstechnologie zum Erstellen interaktiver Webanwendungen. Ajax = Asynchrones JavaScript und XML (eine Teilmenge der Standard Universal Markup Language). Ajax kann Webseiten verwenden, um asynchrone Aktualisierungen zu erreichen, indem im Hintergrund eine kleine Datenmenge mit dem Server ausgetauscht wird.
- Das bedeutet, dass Teile der Webseite aktualisiert werden können, ohne dass die gesamte Webseite neu geladen werden muss (keine Aktualisierungstechnologie) . Herkömmliche Webseiten (die kein Ajax verwenden) müssen die gesamte Webseite neu laden, wenn der Inhalt aktualisiert werden muss.
1.2 Ajax-Anwendungsszenarien :
1.2.1 Überprüfen Sie, ob der Benutzername registriert wurde: Die Registrierungsseiten vieler Websites verfügen über benutzerfreundliche Eingabeaufforderungen, um automatisch zu erkennen, ob der Benutzername vorhanden ist Die Funktion funktioniert nicht. Es erfolgt keine Aktualisierung, Sie können jedoch weiterhin asynchron Daten mit dem Server austauschen und abfragen, ob der vom Benutzer eingegebene Benutzername in der Datenbank vorhanden ist.
1.3 Der Unterschied zwischen synchronen und asynchronen Methoden :
Senden Sie eine Anfrage im synchronen Verfahren: Senden eine Anfrage, die Sie benötigen um auf die Antwort zu warten, bevor Sie die nächste Anfrage senden können. Wenn keine Antwort auf die Anfrage erfolgt, können Sie die nächste Anfrage nicht senden und der Client befindet sich immer im Warteprozess.
- Eine Anfrage asynchron senden: Senden Sie eine Anfrage, ohne auf die Antwort zu warten. Sie können die nächste Anfrage jederzeit senden, das heißt, Sie müssen nicht warten. 1.4 Ajax-Prinzipanalyse
- :
Verwenden Sie JavaScript, um Holen Sie sich die integrierte AJAX-Engine des Browsers (XMLHttpRequest-Objekt). 
Der Server empfängt Die Ajax-Engine Die Anforderung wird verarbeitet
:
- Der Server erhält die AnforderungsparameterdatenDer Server verarbeitet das Anforderungsgeschäft (Aufruf des Business-Layer-Codes)Der Server antwortet mit Daten an die Ajax-Engine
- Die Ajax-Engine ruft die Server-Antwortdaten ab. Aktualisieren Sie die Daten an den spezifischen Ort der Browserseite, indem Sie die JavaScript-Rückruffunktion ausführen.
- :
- Erhalten Sie die Server-Antwortdaten, indem Sie die Rückruffunktion auf Ajax setzen Engine Verwenden Sie JavaScript, um die Antwortdaten an der angegebenen Stelle anzuzeigen. Auf diese Weise können die Daten der Seite teilweise geändert werden, um den Zweck einer teilweisen Aktualisierung zu erreichen.
- 2.1js natives Ajax
:- js natives Ajax-Entwicklungsschritte:
- Erstellen Sie ein
AjaxEngine-Objekt
Binden Sie das Abhören des Ajax-Engine-Objekts (der lauschende Server hat die Daten an die Engine geantwortet)
Bind-Übermittlungsadresse
Anfrage senden.
Überwachung Die Antwortdaten werden im Inneren verarbeitet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css"></style>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
//同步请求点击事件
function sendRequest() {
//js刷地址栏请求服务器端
location.href = "Ajax1Servlet?name=admin&password=123abc";
}
//异步请求点击事件
function sendAsynRequest() {
//1.创建ajax引擎对象
var xmlHttp = new XMLHttpRequest();
//2.设置回调函数，目的是处理服务器完全返回的数据
xmlHttp.onreadystatechange = function () {
/**
* 这个回调函数什么调用呢？是ajax引擎对象与服务器通信状态码改变的时候调用
* ajax引擎对象与服务器通信状态码xmlHttp.readystate，范围0~4
* 0：请求未初始化
* 1：服务器连接已建立
* 2：请求已接收
* 3：请求处理中
* 4：请求已完成，且响应已就绪
* 这个回调函数一共被调用4次，但只有状态码4的时候才代表服务器响应完成数据完成。
* ajax引擎通信转态码为4和http通信转态码为200
*/
if(xmlHttp.readyState==4 && xmlHttp.status==200){
//获取响应数据
var content = xmlHttp.responseText;
alert(content);
}
}
//3.设置请求路径和请求参数
/**
* xmlHttp.open(method,url)
* method,请求方法，get或post请求
* url：请求路径
*/
xmlHttp.open("get","Ajax1Servlet?name=admin&psw=abc123");
//4.发送请求
xmlHttp.send();
}
</script>
</head>
<body>
<input type="button" value="发送同步请求" onclick="sendRequest();"/>
<input type="button" value="发送异步请求" onclick="sendAsynRequest();"/>
</body>
</html>package com.sunny.web;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet(name = "Ajax1Servlet", urlPatterns = "/Ajax1Servlet")
public class Ajax1Servlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取请求参数
String name = request.getParameter("name");
String password = request.getParameter("password");
//打印出来
System.out.println("name="+name);
System.out.println("password="+password);
//输出数据前端
response.getWriter().write("hello js ajax");
}
}2.2 Ajax-Engine-Verbindungsstatus bereitStatuswert 0~4 Änderungsprozess:
- Der Status von XMLHttpRequest wird gespeichert. Wechselt von 0 auf 4.
- 0: Die Anfrage ist nicht initialisiert
- 1: Die Serververbindung wurde hergestellt
- 2: Die Anfrage wurde empfangen
- 3: Die Anfrage wird verarbeitet
- 4: Die Anfrage wurde abgeschlossen und die Antwort ist bereit
Der Statuswert beträgt hier nur 4. Dies kann bedeuten, dass die Antwort des Servers empfangen wurde und die Verarbeitung der Ajax-Anfrage abgeschlossen ist. Dies bedeutet jedoch nicht, dass die Antwort des Servers korrekt erhalten wurde. Es ist erforderlich muss mit dem http-Statuscode 200 abgeglichen werdenzwei Bedingungen, um zu zeigen, dass die Serverantwort korrekt erhalten wurde. Nur wenn diese beiden Bedingungen erfüllt sind, kann xmlhttp.responseText die richtigen Antwortdaten erhalten.
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
alert("响应数据" + xmlhttp.responseText);
}
}
};Verwandte Lernempfehlungen: Javascript-Lerntutorial
Das obige ist der detaillierte Inhalt vonLernen Sie Ajax kennen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Ist Ihr Websystem mithilfe der JS-Erkennung wirklich sicher?Nächster Artikel：Ist Ihr Websystem mithilfe der JS-Erkennung wirklich sicher?