Analyse der Zusammensetzung und Kernprinzipien der Ajax-Technologie
In diesem Artikel werden hauptsächlich die Leistungsoptimierungsfunktionen Throttle (Throttle) und Debounce (Debounce) vorgestellt.
Dieser Artikel analysiert hauptsächlich die Ajax-Technologie. Das Kompositionsprinzip dient als Referenz . Der spezifische Inhalt ist wie folgt:
1. Ajax
Funktionen: Teilweise Aktualisierung zur Verbesserung der Benutzererfahrung, Daten werden von geladen der Serveranbieter
2. Die technische Zusammensetzung von AJax
ist keine neue Technologie, sondern die Integration früherer Technologien
Ajax: Asynchronous Javascript And Xml (asynchronous JavaScript). und XML)
Enthaltene Technologien: JavaScript, XML, CSS, XMLHttpRequest
Asynchron: Nach dem Absenden der Anfrage wird das Ergebnis von der Callback-Funktion verarbeitet.
JavaScript: Senden Sie eine Anfrage an den Server, rufen Sie das zurückgegebene Ergebnis ab und aktualisieren Sie die Seite
XML: Wird zum Kapseln von Daten verwendet
3. Ajax-Kernprinzipien
XMLHttpRequst-Objekt: Senden Sie über dieses Objekt eine Anfrage an den Server.
Es handelt sich um eine asynchrone Anforderungstechnologie, die von allen modernen Browsern (Chrome, IE5+) unterstützt wird
1) XMLHttpReuest-Objekt erstellen
Nicht-IE-Browser (Mozilla/Safari) ： var xhr=new XMLHttpRequest();
IE:xhr=new ActiveXObject("Msxml2.XMLHTTP");
Untere Version IE:xhr=new ActiveXObject("Microsfot.XMLHTTP");
2) Attribute und Methoden des XMLHttpRequest-Objekts
a) Methode: open("GET/POST",URL,true/false): wird zum Herstellen einer Verbindung zum Server verwendet
hat drei Parameter:
Parameter 1: Übermittlungsmethode, Post oder Get
Parameter 2: angeforderte URL
Parameter 3: zeigt synchrone oder asynchrone Anfrage an, true: zeigt asynchrone Anfrage an
false: zeigt synchrone Anfrage an
send(data) :Anfrage senden
Parameter: Eingereichter Inhalt.
POST-Methode: Daten sind der übermittelte Parameter, send(username=root&password=abc123);
GET-Methode: send(null)
b) Attribut:
onreadystatechange: Einstellung Die Rückruffunktion, wenn sich der Status ändert. Die Rückruffunktion wird verwendet, um Serverdaten abzurufen.
onreadystatechange=function(){
｝
readyState: Serverstatusantwort
Statuscode:
0: Nicht initialisiert
1: Wird geladen
2: Laden abgeschlossen
3: Anfrage in Bearbeitung
4: Anfrage abgeschlossen
responseText: Vom Server zurückgegebene Daten (Textformat)
responseXML: Vom Server zurückgegebene Daten Server (XML-Format)
Zusammenfassung:
Schritte zur Verwendung von XMLHttpRequest:
1) Erstellen Sie ein XMLHttpRequest-Objekt
2) Legen Sie die Anforderungsmethode und die URL fest
xhr. open("GET/POST","url",true/false), true bedeutet asynchrone Anfrage, false bedeutet synchrone Anfrage
3) Legen Sie die Rückruffunktion fest, wenn sich der Status ändert
xhr.onreadystatechange=function( ){}
0: Nicht initialisiert
1: Laden
2: Laden abgeschlossen
3: Anfrage in Bearbeitung
4: Anfrage abgeschlossen
4) Anfrage senden
xhr. send( data),
Bei der Übermittlung zur Veröffentlichung handelt es sich bei den Daten um die übermittelten Daten. Bei der Übermittlung zur Übermittlung ist der Parameter null.
Bestimmen Sie die HTML-Seite, auf der sich der Benutzer angemeldet hat:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>登录</title>
</head>
<body>
用户名：<input type="text" name="username" id="username"><br>
密码:<input type="password" name="password" id="password">
<a href="javascript:chkUser();">登录</a>
<p id="res"></p>
</body>
<script type="text/javascript">
var xhr;
/**
* 创建XMLHttpRequest对象
*/
function createXMLHttpRequest(){
//1、创建XMLHttpRequest对象
if(window.XMLHttpRequest){
//非IE内核浏览器
xhr=new XMLHttpRequest();
}else{
//IE浏览器
try{
xhr=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
//IE低版本
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
/**
* 发送请求，用来检查用户名、密码是否正确
*/
function chkUser(){
//1、创建XMLHttpRequest
createXMLHttpRequest();
//2、获得用户名、密码
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
//3、与服务器建立连接：open
var url="login?username="+username+"&password="+password;
//方式1：get提交
//xhr.open("GET",url,true);
//方式2：post提交
var url2="login";
xhr.open("POST",url2,true);
//4、设置回调函数，获得服务器响应的数据
xhr.onreadystatechange=function(){
/*
readyState状态码：
0：未初始化
1：正在加载
2：加载完成
3：请求进行中
4：请求完成
*/
if(xhr.readyState==4){
//status,200表示响应正常
if(xhr.status==200){
//alert("从服务器返回的值为："+xhr.responseText);
var res=xhr.responseText;
if(res=='0'){
document.getElementById("res").innerHTML="登录成功";
}else{
document.getElementById("res").innerHTML="<font color='red'>登录失败</font>";
}
}else{
alert("出现在了异常:"+xhr.response.Text);
}
}
}
//5、发送请求
//方式1：get方式
//xhr.send(null);
//方式2:post方式：
//Post提交需要设置http请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("username="+username+"&password="+password);
}
</script>
</html>Servercode:
package com.newer.login.web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.newer.login.bean.User;
import com.newer.login.service.UserService;
/**
* Servlet implementation class LoginServlet
*/
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
UserService userService = new UserService();
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// 1、获得页面参数
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println("获得请求的参数username:"+username);
System.out.println("获得请求的参数password:"+password);
// 2、封装User对象
User user = new User();
user.setUsername(username);
user.setPassword(password);
// 3、调用服务类，完成用户名、密码的校验
User u = userService.login(user);
/*
* 传统方式 if(u!=null){ //表示登录成功 request.setAttribute("user", user);
* //跳转至首页... }else{ //登录失败，跳转登录页面
*
* }
*/
// ajax响应
PrintWriter out = response.getWriter();
if (u != null) {
//0成功，1失败
out.print(0);
}else{
out.print(1);
}
out.close();
}
}Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.
Verwandte Artikel:
Ajax-Methode zur synchronen Überprüfung, ob die Bestellnummer vorhanden ist
Ajax-Implementierungsmethode, um Daten abzurufen und sie dann auf der Seite anzuzeigen
Das obige ist der detaillierte Inhalt vonAnalyse der Zusammensetzung und Kernprinzipien der Ajax-Technologie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Analyse der Funktion und des Prinzips von Nohup
Mar 25, 2024 pm 03:24 PM
Analyse der Rolle und des Prinzips von nohup In Unix und Unix-ähnlichen Betriebssystemen ist nohup ein häufig verwendeter Befehl, mit dem Befehle im Hintergrund ausgeführt werden können. Selbst wenn der Benutzer die aktuelle Sitzung verlässt oder das Terminalfenster schließt, kann der Befehl ausgeführt werden werden weiterhin ausgeführt. In diesem Artikel werden wir die Funktion und das Prinzip des Nohup-Befehls im Detail analysieren. 1. Die Rolle von Nohup: Befehle im Hintergrund ausführen: Mit dem Befehl Nohup können wir Befehle mit langer Laufzeit weiterhin im Hintergrund ausführen lassen, ohne dass dies dadurch beeinträchtigt wird, dass der Benutzer die Terminalsitzung verlässt. Dies muss ausgeführt werden
So beheben Sie den 403-Fehler, der bei einer jQuery-AJAX-Anfrage auftritt
Feb 20, 2024 am 10:07 AM
Titel: Methoden und Codebeispiele zur Behebung von 403-Fehlern in jQuery-AJAX-Anfragen. Der 403-Fehler bezieht sich auf eine Anfrage, dass der Server den Zugriff auf eine Ressource verbietet. Dieser Fehler tritt normalerweise auf, weil der Anfrage die Berechtigungen fehlen oder sie vom Server abgelehnt wird. Wenn Sie jQueryAJAX-Anfragen stellen, stoßen Sie manchmal auf diese Situation. In diesem Artikel wird erläutert, wie dieses Problem gelöst werden kann, und es werden Codebeispiele bereitgestellt. Lösung: Berechtigungen prüfen: Stellen Sie zunächst sicher, dass die angeforderte URL-Adresse korrekt ist und stellen Sie sicher, dass Sie über ausreichende Berechtigungen für den Zugriff auf die Ressource verfügen.
So beheben Sie den Fehler 403 der jQuery AJAX-Anfrage
Feb 19, 2024 pm 05:55 PM
jQuery ist eine beliebte JavaScript-Bibliothek zur Vereinfachung der clientseitigen Entwicklung. AJAX ist eine Technologie, die asynchrone Anfragen sendet und mit dem Server interagiert, ohne die gesamte Webseite neu zu laden. Wenn Sie jedoch jQuery zum Senden von AJAX-Anfragen verwenden, treten manchmal 403-Fehler auf. Bei 403-Fehlern handelt es sich in der Regel um vom Server verweigerte Zugriffsfehler, möglicherweise aufgrund von Sicherheitsrichtlinien oder Berechtigungsproblemen. In diesem Artikel besprechen wir, wie Sie bei einer jQueryAJAX-Anfrage den Fehler 403 beheben können
Ausführliche Diskussion der Prinzipien und Praktiken des Struts-Frameworks
Feb 18, 2024 pm 06:10 PM
Prinzipielle Analyse und praktische Erkundung des Struts-Frameworks. Als häufig verwendetes MVC-Framework in der JavaWeb-Entwicklung verfügt das Struts-Framework über gute Entwurfsmuster und Skalierbarkeit und wird häufig in der Anwendungsentwicklung auf Unternehmensebene verwendet. In diesem Artikel werden die Prinzipien des Struts-Frameworks analysiert und anhand tatsächlicher Codebeispiele untersucht, um den Lesern zu helfen, das Framework besser zu verstehen und anzuwenden. 1. Analyse der Prinzipien des Struts-Frameworks 1. MVC-Architektur Das Struts-Framework basiert auf MVC (Model-View-Con
Vertiefendes Verständnis des Batch-Insert-Implementierungsprinzips in MyBatis
Feb 21, 2024 pm 04:42 PM
MyBatis ist ein beliebtes Java-Persistenzschicht-Framework, das in verschiedenen Java-Projekten häufig verwendet wird. Unter diesen ist das Einfügen von Stapeln ein häufiger Vorgang, der die Leistung von Datenbankvorgängen effektiv verbessern kann. In diesem Artikel wird das Implementierungsprinzip von Batch Insert in MyBatis eingehend untersucht und anhand spezifischer Codebeispiele detailliert analysiert. Batch-Einfügung in MyBatis In MyBatis werden Batch-Einfügungsvorgänge normalerweise mit dynamischem SQL implementiert. Durch Konstruieren eines S, das mehrere eingefügte Werte enthält
Wie erhalte ich Variablen aus der PHP-Methode mit Ajax?
Mar 09, 2024 pm 05:36 PM
Die Verwendung von Ajax zum Abrufen von Variablen aus PHP-Methoden ist ein häufiges Szenario in der Webentwicklung. Durch Ajax kann die Seite dynamisch abgerufen werden, ohne dass die Daten aktualisiert werden müssen. In diesem Artikel stellen wir vor, wie man Ajax verwendet, um Variablen aus PHP-Methoden abzurufen, und stellen spezifische Codebeispiele bereit. Zuerst müssen wir eine PHP-Datei schreiben, um die Ajax-Anfrage zu verarbeiten und die erforderlichen Variablen zurückzugeben. Hier ist ein Beispielcode für eine einfache PHP-Datei getData.php:
Ausführliche Erläuterung des Prinzips des MyBatis-Paging-Plug-Ins
Feb 22, 2024 pm 03:42 PM
MyBatis ist ein hervorragendes Persistenzschicht-Framework, das Datenbankoperationen basierend auf XML und Anmerkungen unterstützt. Es ist einfach und benutzerfreundlich und bietet außerdem einen umfangreichen Plug-In-Mechanismus. Unter diesen ist das Paging-Plugin eines der am häufigsten verwendeten Plug-Ins. Dieser Artikel befasst sich mit den Prinzipien des MyBatis-Paging-Plug-Ins und veranschaulicht es anhand konkreter Codebeispiele. 1. Paging-Plug-In-Prinzip MyBatis selbst bietet keine native Paging-Funktion, Sie können jedoch Plug-Ins verwenden, um Paging-Abfragen zu implementieren. Das Prinzip des Paging-Plug-Ins besteht hauptsächlich darin, MyBatis abzufangen
Wie kann das Problem des jQuery AJAX-Fehlers 403 gelöst werden?
Feb 23, 2024 pm 04:27 PM
Wie kann das Problem des jQueryAJAX-Fehlers 403 gelöst werden? Bei der Entwicklung von Webanwendungen wird jQuery häufig zum Senden asynchroner Anfragen verwendet. Allerdings kann bei der Verwendung von jQueryAJAX manchmal der Fehlercode 403 auftreten, der darauf hinweist, dass der Zugriff vom Server verboten ist. Dies wird normalerweise durch serverseitige Sicherheitseinstellungen verursacht, es gibt jedoch Möglichkeiten, das Problem zu beheben. In diesem Artikel wird erläutert, wie Sie das Problem des jQueryAJAX-Fehlers 403 lösen können, und es werden spezifische Codebeispiele bereitgestellt. 1. machen
