About the technical composition and core principles of Ajax, the core principles of ajax
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 versions:
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:
1 <% @ page language = "java" contentType = "text/html; charset = UTF-8" 2 pageEncoding = "UTF-8" %> 3 <! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" http://www.w3.org/TR/html4/loose.dtd "> 4 1 package com. newer. login. web; 2 3 import java. io. IOException; 4 import java. io. printWriter; 5 6 import javax. servlet. servletException; 7 import javax. servlet. http. httpServlet; 8 import javax. servlet. http. httpServletRequest; 9 import javax. servlet. http. httpServletResponse; 10 11 import com. newer. login. bean. user; 12 import com. newer. login. service. userService; 13 14/** 15 * Servlet implementation class LoginServlet16 */17 public class LoginServlet extends HttpServlet {18 private static final long serialVersionUID = 1L; 19 20 UserService userService = new UserService (); 21 22/** 23 * @ see HttpServlet # doGet (HttpServletRequest request, HttpServletResponse24 * response) 25 */26 protected void doGet (HttpServletRequest request, 27 HttpServletResponse response) throws ServletException, IOException {28 doPo St (request, response); 29 30} 31 32/** 33 * @ see HttpServlet # doPost (HttpServletRequest request, HttpServletResponse34 * response) 35 */36 protected void doPost (HttpServletRequest request, 37 HttpServletResponse response) throws ServletException, IOException {38 // 1. Get the page parameter 39 String username = request. getParameter ("username"); 40 String password = request. getParameter ("password"); 41 42 System. out. printl N ("GET request parameter username:" + username); 43 System. out. println ("GET request parameter password:" + password); 44 // 2. encapsulate the User object 45 User user = new User (); 46 user. setUsername (username); 47 user. setPassword (password); 48 49 // 3. Call the service class to verify the User name and password. 50 User u = userService. login (user); 51 52/* 53 * traditional if (u! = Null) {// indicates that the Logon request is successful. setAttribute ("user", user); 54 * // jump to the home page ...} else {// Logon Failed, jump to logon page 55*56 *} 57 */
58 // ajax response 59 60 PrintWriter out = response. getWriter (); 61 62 if (u! = Null) {63 // 0 success, 1 failure 64 out. print (0); 65} else {66 out. print (1); 67} 68 out. close (); 69 70} 71 72}