Examples of mixed use of AJAX and JSP, and use of ajaxjsp

Examples of mixed use of AJAX and JSP, and use of ajaxjsp

First of all, we need to know That AJAX is a technology that can update some webpages without the need to reload the entire webpage.

What Is AJAX?

AJAX = Asynchronous JavaScript and XML.

AJAX is "Asynchronous Javascript And XML" (Asynchronous JavaScript And XML), which is a Web page development technology used to create interactive web applications. AJAX is a technology used to create fast dynamic web pages.

By performing a small amount of data exchange with the server in the background, AJAX can implement asynchronous updates on webpages. This means that you can update a part of a webpage without reloading the entire webpage.

If you need to update the content of a traditional web page (without AJAX), you must reload the entire web page.

How AJAX works

AJAX request

Ajax requests rely on XMLHttpRequest objects. Therefore, you must create an object before the request.

Var xmlhttp; // The compatibility method used to create a request instance. IE5 6 supports the 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: Request Method, request address, and whether the request is asynchronous or synchronous.
The send (String) function has a parameter. The String parameter must be included only when the request method is post.

What is 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 cases:

Unable to use cached files (updating files or databases on the server)
Send large amounts of data to the server (there is no limit on the size of POST data)
When sending user input containing unknown characters, POST is more stable and reliable than GET.

// Set the transmission mode, address, and synchronous or asynchronous xmlhttp. open ("GET", "Test. jsp? Value = "+ escape (value), true); xmlhttp. onreadystatechange = callback; // This function is executed when the status changes to determine whether the request is complete xmlhttp. send (); // request server. If the post method is used, the transmitted parameter // post method/** xmlhttp must be included in the send method. open ("POST", "Test. jsp ", true); xmlhttp. setRequestHeader ("Content-type", "application/x-www-form-urlencoded"); xmlhttp. send ("value =" + value );*/

The server then processes and returns the result. The code is included in the instance.

Set the response to the returned result in the callback function callback.

Onreadystatechange storage function (or function name), which is called whenever the readyState attribute changes.
ReadyState has the XMLHttpRequest status. Changes from 0 to 4.

0: the request is not initialized.
1: The server connection has been established.
2: The request has been received
3: The request is being processed
4: The request is complete and the response is ready.

Status 200: "OK"

404: Page not found

Server Type

ResponseText obtains response data in the string format.

ResponseXML obtains response data in XML format. This is usually used when the url in open is an xml file.

Function callback () {// indicates if (xmlhttp. readyState = 4 & xmlhttp. status = 200) when the request is complete {// sets the corresponding operation }}}

In general, the detailed code is as follows:

Instance

First, create a text box to test the user name and add the listening event onblur, which means to execute when the focus is lost and create a span null Tag next to it to dynamically display information, indicates whether the name is in use

<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>

The following is the JS Code. AJAX is used to send the input content to the server for verification.

Var xmlhttp; function checkuser () {var value = document. getElementById ("userid "). value; // Compatibility Statement to create a request instance. IE5 6 supports the if (window. XMLHttpRequest) {xmlhttp = new XMLHttpRequest ();} else {xmlhttp = new ActiveXObject ("Microsoft. XMLHTTP ");} // sets the transmission mode, address, and synchronous or asynchronous xmlhttp. open ("GET", "Test. jsp? Value = "+ escape (value), true); xmlhttp. onreadystatechange = callback; // This function is executed when the status changes to determine whether the request is complete xmlhttp. send (); // request server}

Then the server obtains the data and writes it back.

<% Response. setHeader ("Cache-Control", "no-store"); // HTTP1.1response. setHeader ("Pragma", "no-cache"); // HTTP1.0response. setDateHeader ("Expires", 0); // disable caching String value = request on the server. getParameter ("value"); // get the transmitted parameter response. getWriter (). write (value); // simulate data write back %>

The client then calls back the data written back by the server.

/*** Callback function */function callback () {// if (xmlhttp. readyState = 4 & xmlhttp. status = 200) {alert (xmlhttp. responseText); // The returned text // alert (xmlhttp. responseXML); // The xmlif (xmlhttp. responseText) {// This field is directly determined not to be empty. You should display var spanid = document according to the database return value. getElementById ("spanid"); spanid. innerHTML = "registered successfully ";}}}

The result is that when the input box loses the focus, the system will immediately judge. Of course, the actual judgment is to connect to the database and print it out for simplicity.

The above content is an example of mixed use of AJAX and JSP. I hope it will help you!

Articles you may be interested in:

• Use js to declare an array. The object is on the jsp page (obtain json data from ajax)
• Use id to identify and pass objects on pages such as jsp dynamically transmitted using ajax
• JSP + jquery call the json Implementation Method Using ajax