Preliminary study on Ajax technology

I have not understood what the so-called Ajax technology doesn't understand. Today, I have to go to a lot of information. I also run a few examples of success, and I have a preliminary understanding. The so-called AJAX technology is actually adding an AJAX engine between servers and browsers. It is generally written in JavaScript, handles some operations that do not need to refresh the entire page, such as data verification, cascade menu, read external data, etc. The interaction of the server and the server improves the response speed. Using XHTML and CSS standardization rendering, use the DOM to dynamically display and interact, using XML and XSTL to perform data exchange and processing, use the XMLHTTPRequest object to perform asynchronous data read, using JavaScript binding and processing all data. Please note that "asynchronous" two words, this may be the essence of AJAX.

Ajax has the following advantages:

Reduce the burden on the server. The principle of AJAX is "Data by Data", which can minimize redundant requests, and the burden on the server. .. Non-refresh update page, reduce user mentality and actual waiting time. In particular, when you want to read a lot of data, you don't have a white screen like Reload. AJAX uses the XMLHTTP object to send a request and get the server response, and use the JavaScript operation DOM final update without reloading the entire page. page. Therefore, in the process of reading the data, the user faces is not a white screen, which is the original page content (you can also add a loading prompt to let the user know that the data process is read), only when the data is received. The content of the corresponding part. This update is instant, and the user can't feel almost. .. Bring a better user experience. .. You can transfer the work of some of the previous server burden to the client, using the client's idle ability to deal with the burden on the server and bandwidth, save space and broadband rental cost. .. External data can be called. .. Based on standardized and widely supported technology, you don't need to download plugins or applets. .. Further promoting the separation of the page presentation and data.

Main objects and methods of XMLHTPREQUEST:

Main method for XMLHttpRequest classes

Abort () stops the current request

getAllResponseHeaders () Returns complete Headers

GetResponseHeader () Returns a single Header

Open ("Method", "URL" [, asyncflag [, "username" ["Password"]]] Sets URLs, objects, methods, and other parameters that are unresolved requests

Send (Content) Send Request

SetRequestHeader ("Label", "Value") Sets Header and send it with the request.

The properties of the XMLHttpRequest class

OnReadyStateChange

ReadyState (0 Not initialization 1 Read 2 has been read 3 interaction 4)

ReponseText server process returned text information

Responsexml

STATUS status code

STATUTSTEXT

A simple example:

1. Servlet used to interact:

/ * * Created date 2006-3-16 *

* / package com.denny_blue.servlet;

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; / ** * @author dennis * * AJAX a simple program example, This is its servlet, call response information based on request. * /

Public class selectcityServlet Extends httpservlet {

PRIVATE STATIC FINAL Long SerialVersionuid = 3846719385151382073L;

Public selectcityServlet () {super ();

Public void destroy () {super.destroy ();

public void doGet (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType ( "text / xml"); response.setHeader ( "Cache-Control", "no-cache"); String state = request.getParameter ( "state"); stringbuffer sb = new stringbuffer (""); if ("zj" .Equals (state)) {sb.append (" HANGzhou Huzhou ");} else if (" zs ".equals (state)) {sb.append (" nanjing yangzhou suzhou ); } sb.append (""); PrintWriter out = response.getwriter (); out.write (sb.tostring ()); out.close ();}}

2. Web.xml

ajaxproject selectcityServlet com.denny_blue. Servlet.SelectCityServlet selectcityServlet / servlet / selectcityservlet

3. interface: