Maison >interface Web >js tutoriel >Une analyse incontournable des composants technologiques Ajax et des principes de base pour les débutants
Une analyse incontournable des composants technologiques Ajax et des principes de base pour les débutants
- php中世界最好的语言original
- 2018-04-03 16:34:321650parcourir
Cette fois, je vais vous présenter une analyse incontournable des composants technologiques et des principes fondamentaux d'Ajax pour les débutants. Quelles sont les Notes que les novices doivent lire sur la composition de la technologie Ajax et l'analyse des principes fondamentaux. Voici des informations pratiques. cas. Jetons un coup d'oeil.
Cet article analyse principalement les principes de composition de la technologie Ajax pour votre référence. Le contenu spécifique est le suivant
1. Caractéristiques :
Actualisation partielle pour améliorer l'expérience utilisateur, les données sont chargées depuis 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
Javascript asynchrone et 🎜>Fonction de rappeltraitement.
JavaScript : envoyer une requête au serveur, obtenir le résultat renvoyé et mettre à jour la page XML : utilisé pour encapsuler les données
3. Principe de base d'Ajax Objet XMLHttpRequst : Utilisez cet objet pour envoyer des données au serveur Envoyez une demande. Il s'agit d'une technologie de requête asynchrone, prise en charge par tous les navigateurs modernes (Chrome, IE5+)
Navigateur nonIE (Mozilla / Safari) : var xhr=new XMLHttpRequest();
IE:xhr=new ActiveXObject("Msxml2.XMLHTTP");
2) Propriétés et méthodes de l'objet XMLHttpRequesta) Méthode : open("GET/POST",URL,true/false) : utilisée pour établir une connexion au serveura 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 synchroneenvoyer(données) :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 : défini lorsque l'état changements 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é
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é :
1) Créer un objet XMLHttpRequest
2) Définir la méthode de requête et l'URL
3) Définir la fonction de rappel lorsque l'état change xhr.onreadystatechange=function(){} 0 : Pas d'initialisation
1 : Chargement
2 : Chargement terminé
3 : Demande en cours
4 : Demande terminée
4) Envoyer la demande
xhr.send(data) ,
Si soumis pour publication, les données sont les données soumises. Si soumis pour obtenir, le paramètre est nul.
Juge
Connexion utilisateur
Page HTML :
Code serveur :
<%@ 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>
Explication détaillée de l'utilisation du chargement asynchrone Ajaxpackage 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();
}
}
Utilisez ajax pour vérifier si l'utilisateur enregistré le nom existeCe 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!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript