Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis on the composition and core principles of Ajax technology. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

1 、 Ajax

Features: local refresh, improve the user's experience, data is loaded from the server provider

2. The technical composition of AJax.

Not the new technology, but the integration of the previous technology.

Ajax: Asynchronous Javascript And Xml; (asynchronous JavaScript and XML)

Included technologies: JavaScript, XML, CSS, XMLHttpRequest

Async: after the request is sent, the result is not equal and is handled by the callback function.

_ JavaScript: send a request to the server, get the returned result, and 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, supported by all modern browsers (Chrome, IE5+)

1) create a XMLHttpReuest object

Non-IE browser (Mozilla/Safari): var xhr=new XMLHttpRequest ()

IE:xhr=new ActiveXObject ("Msxml2.XMLHTTP")

Lower version of IE:xhr=new ActiveXObject ("Microsfot.XMLHTTP")

2) the 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: synchronous or asynchronous request, true: asynchronous request

False: indicates a synchronization request

Send (data): send a request

Parameter: what is submitted.

POST method: data is the submitted parameter, send (username=root&password=abc123)

GET method: send (null)

B) attributes:

Onreadystatechange: sets the callback function when the state changes, and 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 completion

ResponseText: data returned by the server (in text format)

ResponseXML: data returned by the server (in XML format)

Summary:

To use XMLHttpRequest:

1) create a XMLHttpRequest object

2) the method of setting the request and URL

Xhr.open ("GET/POST", "url", true/false), true represents asynchronous request, false represents 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 completion

4) send a request

Xhr.send (data)

If it is submitted by post, data is the submitted data, and if it is submitted by get, the parameter is null.

Determine the HTML page to which the user is logged in:

Login user name:

Password: log in to var xhr; / * create XMLHttpRequest object * / function createXMLHttpRequest () {/ / 1, create XMLHttpRequest object if (window.XMLHttpRequest) {/ / non-IE kernel browser xhr=new XMLHttpRequest ();} else {/ / IE browser try {xhr=new ActiveXObject ("Msxml2.XMLHTTP") } catch (e) {/ / IE lower version xhr=new ActiveXObject ("Microsoft.XMLHTTP");} / * send a request to check whether the username and password are correct * / function chkUser () {/ / 1, create XMLHttpRequest createXMLHttpRequest (); / / 2, get the username and password var username=document.getElementById ("username") .value Var password=document.getElementById ("password"). Value; / / 3. Establish a connection with the server: open var url= "login?username=" + username+ "& password=" + password; / / 1:get submission / / xhr.open ("GET", url,true); / / 2:post submission var url2= "login"; xhr.open ("POST", url2,true) / / 4. Set callback function Xhr.onreadystatechange=function () {/ * readyState status code: 0: not initialized 1: loading 2: loading completed 3: request in progress 4: request completed * / if (xhr.readyState==4) {/ / status 200 indicates a normal if (xhr.status==200) {/ / alert ("the value returned from the server is:" + xhr.responseText) Var res=xhr.responseText; if (res=='0') {document.getElementById ("res") [xss_clean] = "login success";} else {document.getElementById ("res") [xss_clean] = "login failure";}} else {alert ("occurred in exception:" + xhr.response.Text) }} / / 5. Send request / / method 1:get / / xhr.send (null); / / method 2:post: / / Post request header xhr.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded"); xhr.send ("username=" + username+ "& password=" + password);}

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, get the page parameter String username = request.getParameter ("username") String password = request.getParameter ("password"); System.out.println ("get request parameters username:" + username); System.out.println ("get request parameters password:" + password); / / 2, encapsulate User object User user = new User (); user.setUsername (username); user.setPassword (password) / / 3. Call the service class to complete the verification of user name and password User u = userService.login (user); / * * traditional if (uplink null) {/ / indicates login success request.setAttribute ("user", user) * / / Jump to the home page.} else {/ / login failed, jump to login page * *} / ajax response PrintWriter out = response.getWriter (); if (u! = null) {/ / 0 succeeded, 1 failed out.print (0);} else {out.print (1);} out.close () }} this is the end of the article on "sample Analysis of the composition and Core principles of Ajax Technology". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.