"Java Project Practice" specifically explains how Ajax works and implements asynchronous validation username presence + Source code Download (Java edition)

A year ago, never know what Ajax is, along with the constant accumulation, to now often used, and gradually have a deep understanding.

Today, the false idea of developing a more humane, friendly, non-refreshed, more interactive Web page, your goal must be AJAX.

Introduction

Before we talk about what Ajax is, let's take a minute to understand what Ajax does. What you see:

What is shown to us is the effect of using AJAX technology. With the growing power of Web applications, there is a wait. Wait for the server to respond and wait for the browser to refresh. Waiting for a request to return and generate a new page became the most difficult problem for the apes. With the advent of Ajax, the Web application becomes more intact and friendlier.

Good. 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 of which has its unique features, and together it becomes a powerful new technology for creating high-speed dynamic web pages. 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 very familiar with the above technology, the most difficult is to create XMLHttpRequest objects, you see my blog post is good. It specifically describes what it is, as well as five steps to create the law, poke it here.

How Ajax Works

We explain how Ajax works by using two diagrams of traditional Web applications and schematic diagrams that use AJAX applications, such as what you see:

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

Figure 1 Schematic diagram of a traditional Web application

Figure 2 The use of AJAX applications works for example, visible through Ajax in the browser and user interaction with a very big improvement. Users do not have to wait for the server response for a long time to submit form forms, improve user experience, and through Ajax can develop more gorgeous web interaction pages. Both the client interface and the AJAX engine are executed on the client, so that a large amount of server work can be implemented 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 advantages, everyone has a firsthand experience, here I simply say a few points:

Strengths:

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." To 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 a lot of merit, and it is these strengths that reflect its shortcomings (of course, the shortcomings can be overcome).

Disadvantages:

1. Security issues

2. Support for search engines is relatively weak.

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 useful example: TheJava version asynchronously verifies that username 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 mode is get. Sets the URL of the request. Set to asynchronous Commit Xmlhttp.open ("GET", url, true);//Copy the method address to the onReadyStateChange attribute//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!"); %>

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

Summarize

Web development has been in the pursuit of interface-friendly, humane, high user experience and more beautiful and so on. I believe it's just a bit of a drip. No matter what the problem is.

"Java Project Practice" specifically explains how Ajax works and implements asynchronous validation username presence + Source code Download (Java edition)