interface Web
js tutoriel
Analyse de la composition technologique et des principes fondamentaux d'Ajax
Analyse de la composition technologique et des principes fondamentaux d'Ajax
Cet article présente principalement la fonction d'optimisation des performances JavaScript (throttle) et la fonction anti-rebond (anti-rebond). Les amis intéressés peuvent s'y référer
Cet article analyse principalement la technologie Ajax pour tout le monde. Le principe de composition est pour votre référence. . Le contenu spécifique est le suivant
1 Ajax
Caractéristiques : Actualisation partielle pour améliorer l'expérience utilisateur, les données sont chargées à partir de. le fournisseur de serveur
2. La composition technique d'AJax
n'est pas une nouvelle technologie, mais l'intégration des technologies précédentes
Ajax : Javascript asynchrone et XML (JavaScript asynchrone ; et XML)
Technologies incluses : JavaScript, XML, CSS, XMLHttpRequest
Asynchrone : Après l'envoi de la requête, le résultat sera traité par la fonction de rappel.
JavaScript : envoyez une requête au serveur, obtenez le résultat renvoyé et mettez à jour la page
XML : utilisé pour encapsuler les données
Principes de base d'Ajax
3. Objet XMLHttpRequst : Envoie une requête au serveur via cet objet.
Il s'agit d'une technologie de requête asynchrone, prise en charge par tous les navigateurs modernes (Chrome, IE5+)
1) Créer un objet XMLHttpReuest
Navigateurs non-IE (Mozilla/Safari) ：var xhr=new XMLHttpRequest();
IE:xhr=new ActiveXObject("Msxml2.XMLHTTP");
Version inférieure IE:xhr=new ActiveXObject("Microsfot.XMLHTTP");
2) Attributs et méthodes de l'objet XMLHttpRequest
a) Méthode : open("GET/POST",URL,true/false) : utilisée pour établir une connexion au serveur
a trois paramètres :
Paramètre 1 : méthode de soumission, post ou get
Paramètre 2 : URL demandée
Paramètre 3 : indique une requête synchrone ou asynchrone, true : indique une requête asynchrone
false : indique une requête synchrone
send(data ) :Envoyer la demande
Paramètres : Contenu soumis.
Méthode POST : data est le paramètre soumis, send(username=root&password=abc123);
Méthode GET : send(null)
b) Attribut :
onreadystatechange : paramètre La fonction de rappel lorsque l'état change. La fonction de rappel est utilisée pour obtenir les données du serveur.
onreadystatechange=function(){
｝
readyState : Réponse d'état du serveur
Code d'état :
0 : Non initialisé
1 : Chargement
2 : Chargement terminé
3 : Requête en cours
4 : Requête terminée
responseText : Données renvoyées par le serveur (format texte)
responseXML : Données renvoyées par le serveur (format XML)
Résumé :
Étapes pour utiliser XMLHttpRequest :
1) Créer un objet XMLHttpRequest
2) Définir la méthode de requête et l'URL
xhr. open("GET/POST","url",true/false), true signifie requête asynchrone, false signifie requête synchrone
3) Définir la fonction de rappel lorsque l'état change
xhr.onreadystatechange=function( ){}
0 : Non initialisé
1 : Chargement
2 : Chargement terminé
3 : Demande en cours
4 : Demande terminée
4) Envoyer la demande
xhr. send( data),
Si soumis pour publication, data sont les données soumises. Si soumis pour get, le paramètre est nul.
Déterminez la page HTML à laquelle l'utilisateur s'est connecté :
<%@ 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>Code du serveur :
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();
}
}Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.
Articles associés :
Analyse de chargement asynchrone Ajax
Méthode Ajax pour vérifier de manière synchrone si le numéro de commande existe
Méthode d'implémentation Ajax pour obtenir des données puis les afficher sur la page
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Analyse de la fonction et du principe de nohup
Mar 25, 2024 pm 03:24 PM
Analyse du rôle et du principe de nohup Dans les systèmes d'exploitation Unix et de type Unix, nohup est une commande couramment utilisée pour exécuter des commandes en arrière-plan. Même si l'utilisateur quitte la session en cours ou ferme la fenêtre du terminal, la commande peut. continuent toujours à être exécutés. Dans cet article, nous analyserons en détail la fonction et le principe de la commande nohup. 1. Le rôle de nohup : Exécuter des commandes en arrière-plan : Grâce à la commande nohup, nous pouvons laisser les commandes de longue durée continuer à s'exécuter en arrière-plan sans être affectées par la sortie de l'utilisateur de la session du terminal. Cela doit être exécuté
Comment résoudre l'erreur 403 rencontrée par la requête jQuery AJAX
Feb 20, 2024 am 10:07 AM
Titre : Méthodes et exemples de code pour résoudre les erreurs 403 dans les requêtes jQuery AJAX L'erreur 403 fait référence à une demande selon laquelle le serveur interdit l'accès à une ressource. Cette erreur se produit généralement parce que la demande manque d'autorisations ou est rejetée par le serveur. Lorsque vous effectuez des requêtes jQueryAJAX, vous rencontrez parfois cette situation. Cet article explique comment résoudre ce problème et fournit des exemples de code. Solution : Vérifiez les autorisations : assurez-vous d'abord que l'adresse URL demandée est correcte et vérifiez que vous disposez des autorisations suffisantes pour accéder à la ressource.
Comment résoudre l'erreur 403 de la requête jQuery AJAX
Feb 19, 2024 pm 05:55 PM
jQuery est une bibliothèque JavaScript populaire utilisée pour simplifier le développement côté client. AJAX est une technologie qui envoie des requêtes asynchrones et interagit avec le serveur sans recharger la page Web entière. Cependant, lorsque vous utilisez jQuery pour effectuer des requêtes AJAX, vous rencontrez parfois des erreurs 403. Les erreurs 403 sont généralement des erreurs d'accès refusé par le serveur, probablement en raison de problèmes de politique de sécurité ou d'autorisation. Dans cet article, nous verrons comment résoudre la requête jQueryAJAX rencontrant une erreur 403.
Discussion approfondie sur les principes et les pratiques du cadre Struts
Feb 18, 2024 pm 06:10 PM
Analyse des principes et exploration pratique du framework Struts. En tant que framework MVC couramment utilisé dans le développement JavaWeb, le framework Struts a de bons modèles de conception et une bonne évolutivité et est largement utilisé dans le développement d'applications au niveau de l'entreprise. Cet article analysera les principes du framework Struts et l'explorera avec des exemples de code réels pour aider les lecteurs à mieux comprendre et appliquer le framework. 1. Analyse des principes du framework Struts 1. Architecture MVC Le framework Struts est basé sur MVC (Model-View-Con
Compréhension approfondie du principe d'implémentation de l'insertion par lots dans MyBatis
Feb 21, 2024 pm 04:42 PM
MyBatis est un framework de couche de persistance Java populaire qui est largement utilisé dans divers projets Java. Parmi elles, l'insertion par lots est une opération courante qui peut améliorer efficacement les performances des opérations de base de données. Cet article explorera en profondeur le principe de mise en œuvre de l'insertion par lots dans MyBatis et l'analysera en détail avec des exemples de code spécifiques. Insertion par lots dans MyBatis Dans MyBatis, les opérations d'insertion par lots sont généralement implémentées à l'aide de SQL dynamique. En construisant un S contenant plusieurs valeurs insérées
Comment obtenir des variables de la méthode PHP en utilisant Ajax ?
Mar 09, 2024 pm 05:36 PM
L'utilisation d'Ajax pour obtenir des variables à partir de méthodes PHP est un scénario courant dans le développement Web. Grâce à Ajax, la page peut être obtenue dynamiquement sans actualiser les données. Dans cet article, nous présenterons comment utiliser Ajax pour obtenir des variables à partir de méthodes PHP et fournirons des exemples de code spécifiques. Tout d’abord, nous devons écrire un fichier PHP pour gérer la requête Ajax et renvoyer les variables requises. Voici un exemple de code pour un simple fichier PHP getData.php :
Comment résoudre le problème de l'erreur 403 jQuery AJAX ?
Feb 23, 2024 pm 04:27 PM
Comment résoudre le problème de l’erreur 403 jQueryAJAX ? Lors du développement d'applications Web, jQuery est souvent utilisé pour envoyer des requêtes asynchrones. Cependant, vous pouvez parfois rencontrer le code d'erreur 403 lors de l'utilisation de jQueryAJAX, indiquant que l'accès est interdit par le serveur. Cela est généralement dû aux paramètres de sécurité côté serveur, mais il existe des moyens de résoudre le problème. Cet article explique comment résoudre le problème de l'erreur 403 jQueryAJAX et fournit des exemples de code spécifiques. 1. faire
Explication détaillée du principe du plug-in de pagination MyBatis
Feb 22, 2024 pm 03:42 PM
MyBatis est un excellent framework de couche de persistance. Il prend en charge les opérations de base de données basées sur XML et les annotations. Il est simple et facile à utiliser. Il fournit également un mécanisme de plug-in riche. Parmi eux, le plug-in de pagination est l'un des plug-ins les plus fréquemment utilisés. Cet article approfondira les principes du plug-in de pagination MyBatis et l'illustrera avec des exemples de code spécifiques. 1. Principe du plug-in de pagination MyBatis lui-même ne fournit pas de fonction de pagination native, mais vous pouvez utiliser des plug-ins pour implémenter des requêtes de pagination. Le principe du plug-in de pagination est principalement d'intercepter MyBatis
