This article mainly introduces function throttling (throttle) and function debounce (debounce) of JavaScript performance optimization. Interested friends can refer to it. I hope it can help everyone.
1. Ajax
Features: Partial refresh, improve user experience, data is loaded from the server provider
2. The technical composition of AJax
is not a new technology, but the integration of previous technologies
Ajax: Asynchronous Javascript And Xml; (asynchronous JavaScript and XML)
Included technologies : JavaScript, XML, CSS, XMLHttpRequest
Asynchronous: After sending the request, it will be processed by the callback function without waiting for the result.
JavaScript: Send a request to the server, obtain the return result, and update the page
XML: Used to encapsulate data
##3. Ajax core principle
XMLHttpRequst object : Send a request to the server through this object. It is an asynchronous request technology, supported by all modern browsers (Chrome, IE5+)
1) Create XMLHttpReuest object
Non-IE browsers (Mozilla/Safari) ：var xhr=new XMLHttpRequest();IE:xhr=new ActiveXObject("Msxml2.XMLHTTP");
Lower version IE:xhr=new ActiveXObject("Microsfot.XMLHTTP");
2) Properties and methods of XMLHttpRequest object
a) Method: open("GET/POST", URL, true/false): used to establish a connection to the server There are three parameters:
Parameter 1: Submission method, post or get
Parameter 2: Requested URL
Parameter 3: Indicates synchronous or asynchronous request, true: indicates asynchronous request
false: Indicates synchronous request
send(data) :Send request
Parameters: Submitted content.
POST method: data is the submitted parameter, send(username=root&password=abc123);
GET method: send(null)
onreadystatechange: setting The callback function when the status changes. The callback function is used to obtain server data.
onreadystatechange=function(){
｝
Status code:
0: Not initialized 1: Loading
2: Loading completed
3: Request in progress
4: Request completed
responseXML: Data returned by the server (XML format)
Summary: Steps to use XMLHttpRequest:
1) Create XMLHttpRequest object
2) Set the request method and URL
xhr. open("GET/POST","url",true/false), true represents an asynchronous request, false represents a synchronous request
3) Set the callback function when the state changes
xhr.onreadystatechange=function(){}
0: Not initialized
1: Loading
2: Loading completed
3: Request in progress
4: Request completed
4) Send request
xhr.send( data),
If submitted for post, data is the submitted data. If submitted for get, the parameter can be null.
##
<%@ 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>Server code:
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();
}
}Related recommendations: One of php’s closest friends ajax technologyHow jquery implements ajax technology 3: $. get()Recommend 5 AJAX introductory tutorials to easily learn to use ajax technology
The above is the detailed content of Ajax technical composition and core principles explained. For more information, please follow other related articles on the PHP Chinese website!
How does PHP identify a user's session?May 01, 2025 am 12:23 AMPHPidentifiesauser'ssessionusingsessioncookiesandsessionIDs.1)Whensession_start()iscalled,PHPgeneratesauniquesessionIDstoredinacookienamedPHPSESSIDontheuser'sbrowser.2)ThisIDallowsPHPtoretrievesessiondatafromtheserver.
What are some best practices for securing PHP sessions?May 01, 2025 am 12:22 AMThe security of PHP sessions can be achieved through the following measures: 1. Use session_regenerate_id() to regenerate the session ID when the user logs in or is an important operation. 2. Encrypt the transmission session ID through the HTTPS protocol. 3. Use session_save_path() to specify the secure directory to store session data and set permissions correctly.
Where are PHP session files stored by default?May 01, 2025 am 12:15 AMPHPsessionfilesarestoredinthedirectoryspecifiedbysession.save_path,typically/tmponUnix-likesystemsorC:\Windows\TemponWindows.Tocustomizethis:1)Usesession_save_path()tosetacustomdirectory,ensuringit'swritable;2)Verifythecustomdirectoryexistsandiswrita
How do you retrieve data from a PHP session?May 01, 2025 am 12:11 AMToretrievedatafromaPHPsession,startthesessionwithsession_start()andaccessvariablesinthe$_SESSIONarray.Forexample:1)Startthesession:session_start().2)Retrievedata:$username=$_SESSION['username'];echo"Welcome,".$username;.Sessionsareserver-si
How can you use sessions to implement a shopping cart?May 01, 2025 am 12:10 AMThe steps to build an efficient shopping cart system using sessions include: 1) Understand the definition and function of the session. The session is a server-side storage mechanism used to maintain user status across requests; 2) Implement basic session management, such as adding products to the shopping cart; 3) Expand to advanced usage, supporting product quantity management and deletion; 4) Optimize performance and security, by persisting session data and using secure session identifiers.
How do you create and use an interface in PHP?Apr 30, 2025 pm 03:40 PMThe article explains how to create, implement, and use interfaces in PHP, focusing on their benefits for code organization and maintainability.
What is the difference between crypt() and password_hash()?Apr 30, 2025 pm 03:39 PMThe article discusses the differences between crypt() and password_hash() in PHP for password hashing, focusing on their implementation, security, and suitability for modern web applications.
How can you prevent Cross-Site Scripting (XSS) in PHP?Apr 30, 2025 pm 03:38 PMArticle discusses preventing Cross-Site Scripting (XSS) in PHP through input validation, output encoding, and using tools like OWASP ESAPI and HTML Purifier.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
SublimeText3 Mac version
God-level code editing software (SublimeText3)
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
SublimeText3 Linux new version
SublimeText3 Linux latest version
Zend Studio 13.0.1
Powerful PHP integrated development environment
