Ajax and JSP blends using method instances _ajax related

The first thing to know is that Ajax is a technology that can update some Web pages without reloading the entire Web page.

What is AJAX?

AJAX = asynchronous JavaScript and XML.

Ajax, "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), refers to a web development technology that creates interactive Web applications. AJAX is a technique for creating fast-moving web pages.

AJAX enables asynchronous updating of Web pages by making a small amount of data exchange in the background with the server. This means you can update portions of a Web page without reloading the entire page.

Traditional Web pages (without AJAX) if you need to update your content, you must overload the entire page face.

How Ajax Works

Ajax request

Ajax requests are dependent on the XMLHttpRequest object, so the object is created before the request

var xmlhttp;
The compatibility notation creates the request instance, IE5 6 supports the else inside method
if (window). XMLHttpRequest) {
xmlhttp = new XMLHttpRequest ();
} else {
xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");
}

Then send the request to the server

The open function has three parameters, the request method, the request address, the request is asynchronous or synchronous
The Send (string) function has one argument, and the string argument needs to be brought up only when the request is post

So what's the difference between get and post?

Get is simpler and faster than POST, and can be used in most cases.

However, use POST requests in the following situations:

Unable to use cache file (update file or database on server)
Send large amounts of data to the server (POST no data limit)
Post is more stable and reliable than get when sending user input with unknown characters

Set the mode of transmission, address, and synchronous or asynchronous
Xmlhttp.open ("Get", "test.jsp?value=" +escape (value), true);
Xmlhttp.onreadystatechange = Execute this function when callback;//state changes to determine whether the request is completed
xmlhttp.send ()//Request Server, if the Post method is used, Then send inside with the parameters passed on the
//post way
/**
xmlhttp.open ("POST", "test.jsp", true);
Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Xmlhttp.send ("value=" +value);
*/

Then the server side processes and returns, and this is placed in the instance with specific code

Set the return response in the callback function callback

onReadyStateChange a stored function (or function name) that is called whenever the ReadyState property is changed.
ReadyState exist in the state of XMLHttpRequest. Changed from 0 to 4.

0: Request not initialized
1: The server connection has been established
2: Request received
3: In Request processing
4: The request is complete and the response is ready

Status: "OK"

404: Page Not Found

The type of the appropriate server

ResponseText gets the response data in the form of a string.

Responsexml gets the response data in the form of XML. This is typically used when the URL in the open is an XML file

function callback () {
//Request completion indicates
if (xmlhttp.readystate ==4 && xmlhttp.status==200) {
//Set appropriate action
}
}
}

In general, for these few steps, the following is the detailed code

Instance

First create a text box to test the username and add a listener event onblur, which is executed when the focus is lost, and creates a span empty tag behind it to dynamically display information indicating whether the name is occupied

<form method= "POST" action= "ajax.jsp" >
<table>
<tr>
<td><input type= "text "Id=" userid "onblur=" checkuser () "><span style=" color:red "id=" Spanid "></span></td>
< /tr>
</table>
</form>

Next is the JS code, using AJAX to send the input content to the server, the server to test

var xmlhttp;
function checkuser () {
var value = document.getElementById ("userid"). Value;
The compatibility notation creates the request instance, IE5 6 supports the else inside method
if (window). XMLHttpRequest) {
xmlhttp = new XMLHttpRequest ();
} else {
xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
Set the mode of transmission, address, and synchronous or asynchronous
Xmlhttp.open ("Get", "test.jsp?value=" +escape (value), true);
Xmlhttp.onreadystatechange = Executes this function when the callback;//state changes to determine whether the request is complete
xmlhttp.send ();//Request Server
}

Then the server side gets the data and writes back

<%
response.setheader ("Cache-control", "No-store");//http1.1
response.setheader ("Pragma", "No-cache ");//http1.0
response.setdateheader (" Expires ", 0);//disable caching of
String value = Request.getparameter in the server (" value //Gets the transferred parameter
response.getwriter (). write (value);//Analog data writeback
%>

Processing server writeback data in client-side callback functions

/**
* Callback function/function
callback () {
//Request Completion Representation
if (xmlhttp.readystate ==4 && xmlhttp.status ==200) {
alert (xmlhttp.responsetext);//The corresponding returned text
//alert (xmlhttp.responsexml);//The corresponding XML
if ( Xmlhttp.responsetext) {//Here direct judgment is not NULL, should be based on the database return value to show the different
var Spanid = document.getElementById ("Spanid");
spanid.innerhtml = "registered successfully";}}

The effect is that when the input box loses focus immediately judgment, of course, the actual judgment is to connect the database, in order to simply print out directly

The above content is for Ajax and JSP mixed use Method example, hope to be helpful to everybody!