Ajax technical composition and core principles explained

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 serverThere 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 initialized1: 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"%>      
  用户名：
 密码: 登录 
   

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(); } }

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!