Ajax technology Composition and core principle analysis _ajax related

Source: Internet
Author: User
Tags http request

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

}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.