Simple use of AJAX

1. Introduction

Ajax = Asynchronous JavaScript and XML (Asynchronous JavaScript and XML)

Ajax is the abbreviation of Asynchronous JavaScript and XML.

Ajax is not a new programming language, but a new technology that can create better, faster, and more interactive web applications.

Ajax uses JavaScript to send and receive data between a web browser and a web server.

By exchanging data with the Web server behind the scenes, instead of reloading the entire web page whenever a user makes a change, Ajax technology allows the web page to respond more quickly.

 

 

2. Usage

Next, we will create an Ajax single-host button to show whether the user exists.

 

2.1 create an XMLHTTPRequest object

XMLHttpRequest objects are the key to Ajax technology,It is used to exchange data with the server in the background.. The object is created as follows:

1 function ajaxFunction(){2     var xmlReq;3     try{4         xmlReq = new XMLHttpRequest();5     }catch(e){6         xmlReq = new new ActiveXObject("MSXML2.XMLHTTP.3.0");7     }8     return xmlReq;9 }

 

 

2.2 exchange data with the server

The process of exchanging information between the XMLHTTPRequest object and the server is divided into five steps:
1. Get the XMLHTTPRequest object.
2. onreadystatechange event: the corresponding status is returned at the moment.
3. Open the connection to the server.
4. send information to the server.
5. Obtain the server information.
For more information, see w3school Tutorial: http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp

1 window. onload = function () {2 document. getelementbyid ("ajax "). onclick = function () {3 var xmlreq = ajaxfunction (); 4 // onreadystatechange event. If the returned status is 4, 5 xmlreq is successful. onreadystatechange = function () {6 if (xmlreq. readystate = 4) {7 if (xmlreq. status = 200 | xmlreq. status = 304) {8 // get the data sent by the server 9 var info = xmlreq. responsetext; 10 // The page displays 11 documents. getelementbyid ("usernameview "). innerhtml = Info; 12} 13} 14}; 15 // open the interaction with a servlet 16 xmlreq. Open ("Post", "../servlet/ajaxservlet? Timestamp = "+ new date (). gettime (), true); 17 // set the request header so that xmlreq. only data sent by the send () method can the server receive 18 xmlreq. setRequestHeader ("Content-Type", "application/X-WWW-form-urlencoded"); 19 20 var username = document. getelementbyid ("username "). value; 21 // item server sends data 22 xmlreq. send ("username =" + username); 23 24}; 25 };

 

2.3 servlet processing requests

Servlet is used to process the transmitted data. Generally, it is used to query the database for comparison. Here it is only a demo, so no database is used.

1 package CN. itcast. web. servlet; 2 3 Import Java. io. ioexception; 4 5 import javax. servlet. servletexception; 6 Import javax. servlet. HTTP. httpservlet; 7 Import javax. servlet. HTTP. httpservletrequest; 8 Import javax. servlet. HTTP. httpservletresponse; 9 10 public class ajaxservlet extends httpservlet {11 12 public void doget (httpservletrequest request, httpservletresponse response) 13 throws servletexception, ioexception {14 request. setcharacterencoding ("UTF-8"); 15 response. setcharacterencoding ("UTF-8"); 16 response. setcontenttype ("text/html; charset = UTF-8"); 17 // get the request value 18 string username = request. getparameter ("username"); 19 if ("sa ". equals (username) {20 response. getwriter (). println ("the user name already exists"); 21} else {22 response. getwriter (). println ("User Name available"); 23} 24 25} 26 27 public void dopost (httpservletrequest request, httpservletresponse response) 28 throws servletexception, ioexception {29 doget (request, response ); 30} 31}

 

3. Ajax advantages and disadvantages

1. The biggest advantage of AJAX is that data can be maintained without updating the entire page. This allows web applications to respond quickly to user actions and avoid sending unchanged information over the network.
2. Ajax does not require any browser plug-ins, but you need to allow JavaScript to be executed in the browser.
3. The main criticism for Ajax applications is that it may damage the browser's backend function.

For more information, see Wikipedia: http://zh.wikipedia.org/zh/AJAX