Extjs (II)-Ajax Basics

I recently learned extjs and shared it with you when I learned some basic Ajax knowledge. It is suitable for beginners!

I. Ajax concepts

Ajax is short for asynchronousjavascript and XML. It is not a new technology, but a comprehensive application of several technologies. It is an asynchronous communication technology that emerged in the Web2.0 era. The core of the code is to call an XMLHttpRequest class in Javascript. the XMLHttpRequest class can communicate with the server without refreshing the entire webpage, at the same time, this class is responsible for processing the information returned by the server, and then adding the processed information results to the webpage through DOM programming in Javascript, thus implementing partial refreshing of a webpage. This improves user experience and reduces the stress on Web servers.

Ii. Ajax features

1. All user requests can be completed without changing the page. That is to say, after the client browser requests a page from the server, the page can remain unchanged. All user request operations are sent from JavaScript code to the server. When the server returns the response, the returned information is also processed by the JavaScript code, and then dynamically added to this page, instead of refreshing the entire page, the page is still the original page.
2. Enhance user experience. When a user browses a webpage, the user interacts asynchronously with the server and updates the webpage content. For example, when a user logs on and registers, the user can use Ajax requests to asynchronously interact with the background to verify the user name when the focus of the input box is lost. In addition, the determination of the password security level is applied to Ajax technology.

Iii. Working Principles of AJAX

1. Ajax uses Asynchronous interaction to eliminate the "request-response-request-response" method of synchronous interaction of traditional Web applications ..... you can use the "request-response-request-response ....... this method can improve user experience and reduce the pressure on Web servers.
2. The user's browser is embedded with an XMLHttpRequest class. The objects in this class can load the Ajax engine when the Browser executes the task. This Ajax engine can communicate asynchronously with the server, it can communicate with network servers independently. Therefore, JavaScript can be used to call the Ajax engine to generate an HTTP action instead, in this way, the data editing, page navigation, and data validation in the memory can be executed by Ajax without the need to reload the entire page.

For example:

Iv. technologies contained in Ajax

Ajax :( asynchronousjavascript and XML) is not a new technology, but a combination of multiple technologies, including JavaScript, XHTML and CSS, Dom, XML, and XMLHttpRequest.

1. Server language: the server must be able to send specific information to the browser. Ajax has nothing to do with the server language.
2. XML (Extensible Markup Language) is a format that describes data. Ajax requires some formatting format to transmit information between the server and the client. XML is one of the options.
3. Extended hypertext markup language (XHTML) and CSS (cascading)
   Style sheet, stacked style sheet) standardized presentation.
4. Dom (Document Object Model) enables Dynamic Display and interaction.
5. Use the XMLHTTP component XMLHTTPRequest object for Asynchronous Data Reading.
6. Use JavaScript to bind and process all data.

5. Ajax Defects

Ajax technology is not perfect either, but also has the following defects:

1. Ajax relies heavily on JavaScript and Ajax engines, depending on the browser's support for Ajax technology.

   Ie5.0 and later versions, mozilla1.0, netscape7 and later versions are supported. Although Mozilla also supports Ajax, XMLHttpRequest is provided in different ways. Therefore, Ajax programs must test the compatibility of various browsers.

2. When Ajax updates the page content, the entire page is not refreshed. Therefore, the page's back-up function is invalid. Some users often do not know whether the current data is old or updated. In this case, you need to clearly remind the user that "data has been updated ".

6. XMLHTTPRequest object
XMLHttpRequest is the object of the XMLHTTP component. With this object, AJAX can exchange data only with the server like a desktop application, instead of refreshing the interface every time, you do not need to hand over data processing to the server every time. This reduces the server load, speeds up response, and shortens user waiting time.

XMLHttpRequest was first implemented in ie5 in the form of ActiveX components. Non-W3C standard. Create XMLHTTPRequest object (inconsistent implementation methods due to non-standard)

1. Internetexplorer implements XMLHttpRequest as an ActiveX Object
2. Other browsers (Firefox, Safari, opera ...) Implement it as a local JavaScript Object.
3. XMLHttpRequest is compatible in different browsers, so you can access the attributes and methods of the XMLHttpRequest instance in the same way, regardless of the method created for this instance.
4. XMLHTTPRequest object Method
   

   Method	Description
   Abort ()	Stop current request
   GetAllResponseHeaders ()	Returns all Response Headers of an HTTP request as key/value pairs.
   GetResponseHeader ("headerlabel ")	Returns the string value of the specified header.
   Open ("method", "url ")	Create a call to the server. The method parameter can be get or post. URL parameters can be relative URLs or absolute URLs. This method also includes three optional parameters.
   Send (content)	Send a request to the server
   SetRequestHeader ("label", "value ")	Set the specified header to the provided value. You must call open () before setting any header ()

5. XMLHTTPRequest object attributes include:

VII. First Ajax program: User Name Verification

Steps:

1. Write the background controller servlet program to respond to client requests.
2. Compile the HTML static page at the front end.
3. Write a Javascript script program to interact with the server. (Ajax programming)

(1) Create an XMLHTTPRequest object

(2) Prepare the data to be sent.

(3) send the request to the backend servlet Controller

(4) process the data returned by the background program and dynamically add it to the page using Dom programming.

1. servlet program:

Package CN. itcast. ajax. servlet; import Java. io. ioexception; import javax. servlet. servletexception; import javax. servlet. HTTP. httpservlet; import javax. servlet. HTTP. httpservletrequest; import javax. servlet. HTTP. listener;/*** Servlet implementation class ajaxservlet */public class ajaxservlet extends httpservlet {Private Static final long serialversionuid = 1l; protected void doget (httpservletrequest request, response) throws servletexception, ioexception {string username = request. getparameter ("username"); system. out. println (username); response. setheader ("Content-Type", "text/html; charset = UTF-8"); If ("admin ". equals (username) {response. getoutputstream (). write ("the user name already exists ". getbytes ();} else {response. getoutputstream (). write ("the user name can be used ". getbytes () ;}} protected void dopost (httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {doget (request, response );}}

 

2. HTML static page

<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> 
Iii. Javascript script
/** Steps for Asynchronously sending requests to the server using Ajax programming: * Step 1: Create and initialize the XMLHTTPRequest object * Step 2: send requests to the server * Step 3: process the data returned by the server * // initialize the XMLHTTPRequest object function createxmlhttprequest () {var XMLHTTP = NULL; try {// Firefox, opera 8.0 +, safarixmlhttp = new XMLHttpRequest ();} catch (e) {// create XMLHTTPRequest object var MSXML = ['msxml2. xmlhttp.6.0 ', 'msxml2. xmlhttp.5.0 ', 'msxml2. xmlhttp.4.0 ', 'msxml2. xmlhttp.3.0 ', 'msxml2. XMLHTTP ', 'Microsoft. XMLHTTP ']; for (VAR I = 0; I <MSXML. length; I ++) {try {XMLHTTP = new activexobject (MSXML [I]); break;} catch (e) {}}// return object return XMLHTTP ;} // send a request to the server (HTML data format is used to send a request to the server) function senddatatoserverbyhtml () {// alert ("sdhfhs "); vaR xhr = createxmlhttprequest (); var username = document. getelementbyid ("username "). value; // The getelementsbytagname method is used to obtain a set array var span = docum for the tag. Ent. getelementsbytagname ("span"); // alert (span [0]); // alert (username); // send the request to the server xhr. open ("get", "/ajax/ajaxservlet? Username = "+ username, true);/** Note: The send method is the message content that must be sent when submitted using the POST method. * POST request features: the request parameters are in the Request body. Therefore, when a POST request is submitted, the send method must be used to send the parameter *. However, when a GET request is submitted, parameters are transmitted in the address bar. Therefore, the send method can send null messages without the need of parameters. */xhr. send (null); // process the information transmitted from the server side xhr. onreadystatechange = function () {// object status 4 indicates that if (xhr. readystate = 4) {// 200 indicates that the information has been successfully returned, and 304 indicates that the information has not been modified if (xhr. status = 200 | xhr. status = 304) {// start processing information // alert (xhr. responsetext); span [0]. innerhtml = xhr. responsetext ;}}};}
As follows:

To complete the project of this small application, clickDownload
This is my personal summary of Ajax technology. If I have made any mistakes, I hope you can point them out so that I can correct the mistakes and grow fast!