"Java Project Practice" to explain how Ajax works and to implement asynchronous authentication user name exists + source Download (Java edition)

A year ago, never know what Ajax is, along with the continuous accumulation, to now often used, and gradually have a deep understanding. Today, if you want to develop a more humane, friendly, non-refreshed, interactive Web page, then your goal must be AJAX.

Introduction

Before we go into the details of what Ajax is, let's take a minute to understand what Ajax does. ：

What is shown to us is the effect of using AJAX technology. With the growing power of Web applications waiting, waiting for the server to respond, waiting for the browser to refresh, waiting for the request to return and generate new pages became the most difficult problem for programmers. With the advent of Ajax, the Web application becomes more complete and friendlier.

Okay, what are you waiting for? Let's take a look at the powerful features of Ajax.

1. What is Ajax

The full name of Ajax is: Asynchronous JavaScript + xml= asynchronous JavaScript + XML

From the full name of Ajax, we can see that Ajax is not a technology, it is a combination of several technologies, each technology has its unique, together become a powerful new technology, for the creation of fast Dynamic Web page technology. As a result, Ajax also has a fashionable term "facelift for a new makeover".

2. Ajax includes:

1. HTML for creating Web Forms

2, DOM, for dynamic display and interaction

3, XML, using XML to do data interaction and operation

4, XMLHttpRequest, asynchronous data reception

5. JavaScript, which binds them tightly together

I believe you are familiar with the above technology, the most difficult is to create XMLHttpRequest objects, you see my blog is good, the inside details what it is, as well as five steps to create the law, poke here.

How Ajax Works

We explain how Ajax works by using two diagrams of past traditional Web applications and schematics that use AJAX applications, as shown in:

Figure 1 is a traditional schematic diagram of a Web application, the client submits a page request to the server, and the server passes HTTP to the client to generate the browse page. The server side undertakes a lot of work, the client is only responsible for display.

Figure 1 Schematic diagram of a traditional Web application

Figure 2 The use of AJAX applications works such as visible through Ajax in the browser and user interaction has been greatly improved, users do not have to submit form form and long wait for the server response, improve user experience, and through Ajax can also develop more gorgeous web interactive page. Both the client interface and the AJAX engine are run on the client side, so a lot of server work can be done at the Ajax engine, reducing the burden on the server side.

Figure 2 schematic diagram using an AJAX application

Advantages and disadvantages of Ajax:

Ajax brings us the benefits, everyone has a firsthand experience, here I just briefly say a few points:

Advantages:

1. The biggest point is that the page does not refresh, the user experience is better.

2. Asynchronously interacts with the server, without interrupting user action, with faster responsiveness.

3. Reduce the burden of server and bandwidth, save space and cost, Ajax is "on-demand data", can minimize the burden on the server.

4. Based on standardized and widely used technologies, there is no need to download plugins or small programs.

Ajax has many advantages, and it is these advantages that reflect its shortcomings (of course, the shortcomings can be overcome here).

Disadvantages:

1. Security issues

2. Support for search engines is weaker.

3. The exception handling mechanism of the program is broken.

4. The original intention of URL and resource location is violated.

Actual combat

a simple, but very practical example: TheJava version asynchronously verifies that a user name exists

First of all to see the implementation of the effect, the following for you to implement the code:

JS part of the code:

<script type= "Text/javascript" >var xmlHttp; function Createxmlhttprequest () {//indicates that the current browser is not IE, such as ns,firefoxif (window. XMLHttpRequest) {xmlHttp = new XMLHttpRequest ();} else if (window. ActiveXObject) {xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");}} function validate (field) {if (Trim (field.value). Length! = 0) {//Create Ajax Core Object Xmlhttprequestcreatexmlhttprequest (); var url = "User_validate.jsp?userid=" + trim (field.value) + "&time=" + New Date (). GetTime ();//Set request method is get, set the requested URL, Set to asynchronous Commit Xmlhttp.open ("GET", url, true);//Copy the method address to the onReadyStateChange property//similar to the phone number Xmlhttp.onreadystatechange=callback ;//Send the provisioning information to the AJAX engine xmlhttp.send (NULL);} else {document.getElementById ("Spanuserid"). InnerHTML = "";}} callback function callback () {//ajax engine status is successful if (xmlhttp.readystate = = 4) {//http Protocol status is successful if (Xmlhttp.status = =) {if (Trim (x Mlhttp.responsetext)! = "") {document.getElementById ("Spanuserid"). InnerHTML = "<font color= ' Red ' >" + Xmlhttp.responsetext + "</font>"}else {document.getElementById ("Spanuserid"). InnerHTML =" ";}} else {alert ("Request failed, error code =" + Xmlhttp.status);}}} </script>

The code submitted to the USER_VALIDATE.JSP page:

<%@ page language= "java" contenttype= "text/html; charset=gb18030 "    pageencoding=" GB18030 "%><%@ page import=" sysmgr.manager.* "%><%string userId = Request.getparameter ("UserId"); if (Usermanager.getinstance (). Finduserbyid (USERID) = null) {out.println ("user code [" + UserId + "] already exists!"); %>

Access to the database section of the code, we will no longer show here, we can see the source.

Summarize

Web development has been in the pursuit of interface-friendly, humane, high user experience and more beautiful, and so on, I believe that as long as from the point drip, any problem is not a problem.