Ajax is a collection of multiple technologies (Asynchronous JavaScript and XML)
1. javascript is responsible for operating XMLHttpRequest objects to deal with databases 2.dom( Document Object Model) is responsible for dynamic data display and interaction 3.xml( extensible identification language) is responsible for data exchange and processing 4. XMLHttpRequest is responsible for Asynchronous Data Reading 5. write structured web pages in XHTML (Extensible Hypertext Markup Language) and CSS (Cascading Style Sheets. JSON
Advantages
1. process data without refreshing new requests.
Disadvantages
1. ie5.0, mozilla1.0, and netscape7 are required.
2. The support for streaming media and PDA is not very good.
General Ajax process (Request/Server mode)
Object initialization ---> sending request ---> server acceptance ---> Server Response and Return ---> client acceptance ---> modifying client page content
First, write a JSP page (which contains JS Code), as follows:
Code:
- <% @ Page Language = "Java" Import = "Java. util. *" pageencoding = "UTF-8" %>
- <HTML>
- <Head>
- <Title> logon page </title>
- <LINK rel = stylesheet href = "CSS/login.css" type = "text/CSS">
- <SCRIPT type = "text/JavaScript">
- // Declare a global XMLHTTPRequest object
- VaR xmlhttp_request;
- // Declare a tag
- VaR message;
- Function check (){
- VaR username = Document. getelementbyid ("usernameid"). value;
- Message = Document. getelementbyid ("message ");
- Message. innerhtml = "detecting username .....";
- Try {
- // Obtain the XMLHTTPRequest object that supports Internet Explorer.
- If (window. activexobject ){
- For (VAR I = 5; I --){
- Try {
- If (I = 2 ){
- Xmlhttp_request = new activexobject ("Microsoft. XMLHTTP"); // greater than 5.0
- //
- Alert ("1:" + xmlhttp_request.readystate );
- }
- Else {
- Xmlhttp_request = new activexobject ("msxml2.xmlhttp." + I + ". 0"); // 3.0 or 4.0, 5.0
- Xmlhttp_request.setrequestheader ("Content-Type", "text/XML ");
- Xmlhttp_request.setrequestheader ("charset", "gb2312 ");
- }
- Break;
- } Catch (e ){
- Xmlhttp_request = false;
- }
- }
- }
- Else if (window. XMLHttpRequest) // non-ie browsers such as Mozilla, Netscape, and Safari
- {
- Xmlhttp_request = new XMLHttpRequest ();
- If (xmlhttp_request.overridemimetype ){
- Xmlhttp_request.overridemimetype ('text/xml ');
- }
- }
- }
- Catch (e ){
- Xmlhttp_request = false;
- }
- // Open a connection
- Alert ("2:" + xmlhttp_request.readystate );
- Alert (username );
- // Xmlhttp_request.open ("get", "http: // localhost: 8080/ajax/check? Name = "+ username, true );
- Xmlhttp_request.open ("Post", "http: // localhost: 8080/ajax/check", true );
- // Set the Request Header for post requests
- Xmlhttp_request.setrequestheader ("Content-Type", "application/X-WWW-form-urlencoded ");
- // Specify the corresponding functions on the processing server.
- Alert ("3:" + xmlhttp_request.readystate );
- Xmlhttp_request.onreadystatechange = handle;
- // Get sends the request
- // Xmlhttp_request.send (null );
- // Send a POST request
- Xmlhttp_request.send ("name =" + username );
- }
- Function handle (){
- Alert ("4:" + xmlhttp_request.readystate );
- If (xmlhttp_request.readystate = 4 ){
- Alert (xmlhttp_request.status );
- If (xmlhttp_request.status = 200 ){
- VaR result = xmlhttp_request.responsetext;
- Alert (result );
- Message. innerhtml = result;
- Alert ("5:" + xmlhttp_request.readystate );
- }
- }
- }
- </SCRIPT>
- </Head>
- <Body>
- <H1 align = "center"> User Logon page
- <HR color = "blue">
- <Div align = "center">
- <Form action = "login. Do" method = "Post">
- <Table cellspacing = 5 Border = 5 bodercolor = # ffaa00>
- <Tr> <TH colspan = "3" align = "center" bgcolor = # ffaa00> User Logon </Th> </tr>
- <Tr>
- <TH rowspan = "3" background = "images/2.jpg" style =" width = 90px "> </Th>
- <TD> User name: </TD> <input id = "usernameid" type = "text" class = "message" name = "username" onblur = "check () "> <label id =" message "> </label> </TD> </tr>
- <Tr> <TD> password: </TD> <input id = "userpasswordid" class = "message" type = "password" name = "userpassword"> </TD> </tr>
- <Tr> <TD colspan = "2" align = "center"> <input type = "Submit" value = "register"> <input type = "reset" value = "Reset "> </TD> </tr>
- </Table>
- </Form>
- </Div>
- </Body>
- </Html>
The focus of this page is the xmlhttp_request object in JS Code, which is the object of the XMLHTTP component. the XMLHTTPRequest object has been implemented in most browsers and has a simple interface that allows data to be transmitted from the client to the server, however, the current operation is not interrupted. The data transmitted using XMLHttpRequest can be in any format, although the data in XML format is recommended from the name.
Next we will write a serlet to process the data sent from the xmlhttp_request object. The data transmitted in the current example is the username value, as shown below:
Code:
- Package myclass. serlet;
- 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;
- Public class check extends httpservlet {
- Protected void Service (httpservletrequest request, httpservletresponse response)
- Throws servletexception, ioexception {
- // Output stream
- Printwriter out = NULL;
- Out = response. getwriter ();
- String name = request. getparameter ("name ");
- System. Out. Print (name );
- If ("Liping". Equals (name )){
- Out. println ("sorry, User name:" + name + "has existed ");
- } Else {
- Out. println ("Congratulation, User name:" + name + "can use ");
- }
- Out. Flush ();
- Out. Close ();
- }
- }
The servlet uses the printwriter output stream to return the processing result to the client. In the previous JS, the function handle () function is used for processing, thus implementing partial Ajax refresh. After you enter the user name, an onchange () event is generated when the cursor leaves. The user name value is immediately passed to the servlet through the xmlhttp_request object pair value for verification, after verification, the information is immediately returned and displayed on the page, achieving partial refresh.
This is Ajax.
