Analysis of Ajax technology composition and core principles, and core principles of ajax technology
This article mainly analyzes the composition principles of Ajax technology for your reference. The specific content is as follows:
1. Ajax
Features:Partial refresh to improve user experience and load data from server vendors
2. Technical composition of AJax
It is not a new technology, but the integration of previous technologies.
Ajax: Asynchronous Javascript And Xml; (Asynchronous JavaScript And XML)
Technologies included: JavaScript, XML, CSS, XMLHttpRequest
Asynchronous: after a request is sent, it does not wait for the result to be processed by the callback function.
JavaScript: send a request to the server, obtain the returned results, and update the page.
XML: Used to encapsulate data
3. Core Ajax principles
XMLHttpRequst object: sends a request to the server through this object.
It is an asynchronous request technology that is supported by all modern browsers (Chrome, IE5 +)
1) Create an XMLHttpReuest object
Non-IE browser (Mozilla/Safari): var xhr = new XMLHttpRequest ();
IE: xhr = new ActiveXObject ("Msxml2.XMLHTTP ");
Earlier IE: xhr = new ActiveXObject ("Microsfot. XMLHTTP ");
2) attributes and methods of the 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: request URL
Parameter 3: synchronous or asynchronous request; true: asynchronous request
False: Synchronous request
Send (data): send a request
Parameter: Submitted content.
POST method: data is the submitted parameter, send (username = root & password = abc123 );
GET method: send (null)
B) attributes:
Onreadystatechange: Set the callback function when the status changes. The callback function is used to obtain server data.
Onreadystatechange = function (){
}
ReadyState: Server Status response
Status Code:
0: not initialized
1: Loading
2: Loading completed
3: request in progress
4: request completed
ResponseText: data returned by the server (in text format)
ResponseXML: The data returned by the server (in XML format)
Summary:
To use XMLHttpRequest, follow these steps:
1) Create an XMLHttpRequest object
2) set the Request Method and URL
Xhr. open ("GET/POST", "url", true/false), true indicates asynchronous requests, and false indicates synchronous requests
3) set the callback function when the status changes
Xhr. onreadystatechange = function (){}
0: not initialized
1: Loading
2: Loading completed
3: request in progress
4: request completed
4) send a request
Xhr. send (data ),
If it is post, data is submitted. If it is get, the parameter is null.
Determine the HTML page for user login:
<% @ 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> 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 (HttpServletReque St request, HttpServletResponse * response) */protected void doPost (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// 1. Obtain the page parameter String username = request. getParameter ("username"); String password = request. getParameter ("password"); System. out. println ("GET request parameter username:" + username); System. out. println ("GET request parameter password:" + password); // 2. encapsulate the User Object User u Ser = new User (); user. setUsername (username); user. setPassword (password); // 3. Call the service class to verify the User name and password. login (user);/** traditional if (u! = Null) {// indicates that the Logon request is successful. setAttribute ("user", user); * // jump to the home page ...} else {// Logon Failed, jump to the logon page **} * // ajax response PrintWriter out = response. getWriter (); if (u! = Null) {// 0 success, 1 failure out. print (0) ;}else {out. print (1) ;}out. close ();}}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
