Introduction of first-knowledge Ajax and XMLHttpRequest

AJAX AJAX= asynchronous JavaScript and XML.      Asynchronous JavaScript and XML.      Ajax is the technique of exchanging data and updating portions of a Web page without having to reload the entire page.        Traditional Web pages must reload the entire page if they need to be updated. Ajax has been used for years based on existing standards.      The 2005 Google suggest makes it popular and returns a list of search suggestions when you enter keywords.      Advantages: Faster, better experience for the user, reduce the flow of transmission.      For example: In Baidu, Google's search box input text, you can see that the request has been sent, so there are search suggestions list; Baidu Map, when you drag a map, you can also see that it is constantly making requests, the content of the page is changing, but the entire page has not been refreshed. important objects in Ajax: XMLHttpRequestThis object was first provided by Microsoft in IE, using ActiveX objects (IE5 and IE6):

     Variable=new ActiveXObject ("Microsoft.XMLHTTP");

Now, all modern browsers (Ie7+,firefox,chrome,safari and Opera) have built XMLHttpRequest objects:

     Variable=new XMLHttpRequest ();

To respond to all modern browsers, including IE5 and IE6, check to see if the browser supports XMLHttpRequest objects. If supported, the XMLHttpRequest object is created. If not supported, create ActiveXObject:

var XMLHttpRequest;
if (window. XMLHttpRequest) {//in JavaScript, if it exists (not null and undifine), it is true.
    Code for ie7+, Firefox, Chrome, Opera, Safari
    XMLHttpRequest = new XMLHttpRequest ();
} else {
    //code for I E6, IE5
    XMLHttpRequest = new ActiveXObject ("Microsoft.XMLHTTP");

You can also first judge the ie6,5 situation:

if (window. ActiveXObject) {
    //code for IE6, IE5
}
else {
    //code for others
}

using AJAX to communicate with server-side 1. The preparatory phase:

Xmlhttprequest.open ("Get", "Ajaxservlet", true);

The prototype of the Open method is: XMLHttpRequest.prototype.open = function (Method,url,async,user,password) {};        We have only specified three parameters here: method, path, and send asynchronous request is true. 2. Correlate good callback function: when the state changes, enter the processor, here is a callback method:

Xmlhttprequest.onreadystatechange = Ajaxcallback;

The state is divided into several categories and is digitally identified. See also: http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp readyState There are xmlhttprequest states that vary from 0 to 4:

0: Request uninitialized
1: Server connection established
2: Request received
3: Request processing
4: The request is complete and the response is ready

3. Truly send data to the server side:

Xmlhttprequest.send ();

Here you use the Get method, you can pass the parameter without passing in the parameter, or write send (null) to send the POST request. 4. Handling Callbacks: 　

function Ajaxcallback () {
    //alert ("test");//this alert would show several times when click the button.
    if (4 = xmlhttprequest.readystate && = = xmlhttprequest.status) {
        var responsetext = Xmlhttprequest.respo Nsetext;
        document.getElementById ("Div1"). InnerHTML = ResponseText;
    }

First, judge the readystate the return value of the response is 4, indicating that the request has completed, status returned 200 indicates that the response returned a value of 200, that is, the HTTP request succeeded.     Here, the content returned by the server is set into the div node and displayed. Full code server-side program:

Package com.mengdd.servlets;

Import javax.servlet.ServletException;
Import Javax.servlet.http.HttpServlet;
Import Javax.servlet.http.HttpServletRequest;
Import Javax.servlet.http.HttpServletResponse;
Import java.io.IOException;
Import Java.io.PrintWriter;


public class Helloajaxservlet extends HttpServlet {

    protected void doget (HttpServletRequest request, HttpServletResponse response) throws Servletexception, IOException {System.out.println
        ("Doget invoked!");
        PrintWriter out = Response.getwriter ();
        Out.println ("Hello World");
        Out.flush ();
    }

INDEX.JSP:

<%@ page contenttype= "Text/html;charset=utf-8" language= "java"%>  
Xml:

<?xml version= "1.0" encoding= "UTF-8"?> <web-app xmlns=
"Http://xmlns.jcp.org/xml/ns/javaee"
         xmlns : xsi= "http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemalocation= "Http://xmlns.jcp.org/xml/ns/javaee Http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd "
         version=" 3.1 ">
    <servlet>
        <