This article mainly analyzes the Ajax technology composition principle, for everybody reference, the concrete content is as follows
1, Ajax
Features: local refresh, improve user experience, data from the server business load
2, the technical composition of Ajax
not the new technology, but the integration of the technologies before
ajax:asynchronous JavaScript and XML; (asynchronous JavaScript and XML)
Techniques included: JavaScript, XML, CSS, XMLHttpRequest
Asynchronous: After the request is sent, the result is not equal to the callback function.
JavaScript: Send a request to the server, get the return result, update the page
XML: Used to encapsulate data
3, the core principle of Ajax
Xmlhttprequst object: Sends a request to the server through this object.
It is an asynchronous request technology that all modern browsers support (Chrome, ie5+)
1) Create Xmlhttpreuest Object
Non IE browser (mozilla/safari): Var xhr=new xmlhttprequest ();
Ie:xhr=new ActiveXObject ("msxml2.xmlhttp");
Low version ie:xhr=new ActiveXObject ("microsfot.xmlhttp");
2) Properties and methods of XMLHttpRequest objects
a) Method: Open ("Get/post", Url,true/false): Used to establish a connection to the server
There are three parameters:
Parameter 1: Submit method, post or get
Parameter 2: The requested URL
Parameter 3: Synchronous or asynchronous request, true: represents an asynchronous request
False: Synchronous Request
Send (data): Sending request
Parameters: the content submitted.
Post mode: Data is the submitted parameter, send (username=root&password=abc123);
Get mode: Send (NULL)
B) Properties:
onReadyStateChange: Sets the callback function when the state changes, and the callback function is used to get the server data.
Onreadystatechange=function () {
}
ReadyState: Server State response
Status Code:
0: not initialized
1: Loading
2: Load Complete
3: Request in progress
4: Request Complete
ResponseText: Data returned by the server (text format)
Responsexml: Data returned by the server (in XML format)
Summarize:
Steps to use XMLHttpRequest:
1) Create XMLHttpRequest Object
2 Set the method and URL of the request
Xhr.open ("Get/post", "url", True/false), True indicates an asynchronous request, false indicates a synchronization request
3 Set the callback function when the state changes
Xhr.onreadystatechange=function () {}
0: not initialized
1: Loading
2: Load Complete
3: Request in progress
4: Request Complete
4) Send Request
Xhr.send (data),
If submitted for post, data is submitted and, if committed for get, the argument is null.
To determine which HTML page a user logs on to:
<%@ 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" >
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 FINA
L Long serialversionuid = 1L;
UserService userservice = new UserService (); /** * @see Httpservlet#doget (httpservletrequest request, HttpServletResponse * response) * * protected void do Get (HttpServletRequest request, httpservletresponse response) throws Servletexception, IOException {doPost (requ
Est,response); /** * @see Httpservlet#dopost (httpservletrequest request, HttpServletResponse * response)/protected V OID DoPost (httpservletrequest request, HttpServletResponse responsE) throws Servletexception, IOException {//1, get page parameter String username = request.getparameter ("username");
String Password = request.getparameter ("password");
SYSTEM.OUT.PRINTLN ("Obtain the requested parameter username:" +username);
SYSTEM.OUT.PRINTLN ("Obtain the requested parameter password:" +password);
2, encapsulating user Object user = new User ();
User.setusername (username);
User.setpassword (password);
3, invoke the service class, completes the user name, the password the checksum user U = userservice.login (user);
/* Traditional mode if (U!=null) {//means login success Request.setattribute ("user", user); *//Jump to homepage ...}
else{//Login failed, jump login Page * *///AJAX response PrintWriter out = Response.getwriter ();
if (U!= null) {//0 succeeded, 1 failed out.print (0);
}else{Out.print (1);
} out.close ();
}
}