Home > Developer > JavaScript
Ajax Asynchronous interaction technology is very popular in the production of web pages. Here we will first introduce how to use jQuery to asynchronously verify the user name of Ajax,
Next, we will analyze it in depth and use pure JS to create the XMLHttpRequest object to complete the content encapsulated at the bottom layer of jQuery. The following shows the implementation of jQuery.
Very simple.
[Html]
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
<Html>
<Head>
<Title> ajax.html </title>
<Script type = "text/javascript" src = "/Ajax/js/jquery-1.7.2.js"> </script>
<Script type = "text/javascript">
Function test (){
// 1. Obtain the value in the text box
Var value = $ ("# userName"). val ();
// 2. Send the content in the text box to the background server
// Encapsulate the XMLHTTPRequest method using jQuery
$. Get ("/Ajax/servlet/AjaxServlet? Name = "+ value, null, callback );
}
Function callback (data) {// callback function
// 3. Accept the data returned by the server
// Alert (data );
// 4. display the result on the page
$ ("# Div1" pai.html (data );
}
</Script>
</Head>
<Body>
UserName: <input type = "text" id = "userName" onblur = "test ();"/> <span id = "div1" style = "color: red "> </span>
<Br/>
Password: <input type = "password" id = "password"/> <br/>
Email: <input type = "text" id = "mail"/>
</Body>
</Html>
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
<Html>
<Head>
<Title> ajax.html </title>
<Script type = "text/javascript" src = "/Ajax/js/jquery-1.7.2.js"> </script>
<Script type = "text/javascript">
Function test (){
// 1. Obtain the value in the text box
Var value = $ ("# userName"). val ();
// 2. Send the content in the text box to the background server
// Encapsulate the XMLHTTPRequest method using jQuery
$. Get ("/Ajax/servlet/AjaxServlet? Name = "+ value, null, callback );
}
Function callback (data) {// callback function
// 3. Accept the data returned by the server
// Alert (data );
// 4. display the result on the page
$ ("# Div1" pai.html (data );
}
</Script>
</Head>
<Body>
UserName: <input type = "text" id = "userName" onblur = "test ();"/> <span id = "div1" style = "color: red "> </span>
<Br/>
Password: <input type = "password" id = "password"/> <br/>
Email: <input type = "text" id = "mail"/>
</Body>
</Html>
Most of the explanations have been written in the comments of the Code. In fact, there is no need to explain anything. This is to use the get extension to transmit data to the backend server.
Of course, the background server code is as follows:
[Java]
Package com. bird. 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;
Public class AjaxServlet extends HttpServlet {
/**
* Obtain the parameters passed by the foreground.
*/
Private static final long serialVersionUID = 1L;
Public void doGet (HttpServletRequest request, HttpServletResponse response)
Throws ServletException, IOException {
Request. setCharacterEncoding ("UTF-8 ");
Response. setContentType ("text/html; charset = UTF-8 ");
String name = request. getParameter ("name ");
Name = new String (name. getBytes ("ISO-8859-1"), "UTF-8 ");
PrintWriter out = response. getWriter ();
If (name. equals ("bird ")){
Out. println ("User name" + name + "already exists ");
} Else {
Out. println ("the user name does not exist. You can use it ");
}
}
Public void doPost (HttpServletRequest request, HttpServletResponse response)
Throws ServletException, IOException {
DoGet (request, response );
}
}
Package com. bird. 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;
Public class AjaxServlet extends HttpServlet {
/**
* Obtain the parameter www.2cto.com passed by the foreground.
*/
Private static final long serialVersionUID = 1L;
Public void doGet (HttpServletRequest request, HttpServletResponse response)
Throws ServletException, IOException {
Request. setCharacterEncoding ("UTF-8 ");
Response. setContentType ("text/html; charset = UTF-8 ");
String name = request. getParameter ("name ");
Name = new String (name. getBytes ("ISO-8859-1"), "UTF-8 ");
PrintWriter out = response. getWriter ();
If (name. equals ("bird ")){
Out. println ("User name" + name + "already exists ");
} Else {
Out. println ("the user name does not exist. You can use it ");
}
}
Public void doPost (HttpServletRequest request, HttpServletResponse response)
Throws ServletException, IOException {
DoGet (request, response );
}
}
The following describes how to create an XMLHttpRequest object and interact with each other using pure JS. The background code is the same. You will find that jQuery helps us a lot.
More.
[Html]
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
<Html>
<Head>
<Title> ajax1.html </title>
<Script type = "text/javascript">
Var xmlhttp;
Function verify () {// This method uses the XMLHttpRequest object for Ajax Asynchronous Data Interaction
// 1. Use dom to obtain the content of the text box
Var userName = document. getElementById ("userName"). value;
// 2. Create an XMLHTTPRequest object
If (window. XMLHttpRequest ){
Xmlhttp = new XMLHttpRequest ();
} Else if (window. ActiveXObject ){
// For ie6 or earlier versions
Var activexName = ["MSXML2.XMLHTTP", "Microsoft. XMLHTTP"];
// Create two controls that can be used to create the XMLHTTPRequest object.
For (var I = 0; I <activexName. length; I ++ ){
Try {
Xmlhttp = new ActiveXObject (activexName [I]);
Break;
} Catch (e ){
}
}
}
// Check whether the xmlhttprequest object is successfully created.
If (! Xmlhttp ){
Alert ("change the browser of the updated version ");
Return;
} Else {
// 2. register the callback function. No parentheses are required for the function name.
Xmlhttp. onreadystatechange = callback;
// 3. Set connection information
Xmlhttp. open ("GET", "/Ajax/servlet/AjaxServlet? Name = "+ userName, true );
// 4. Send data and start interaction with the server
Xmlhttp. send (null );
}
}
// Callback function
Function callback (){
// Determine whether the object interaction is complete
If (xmlhttp. readyState = 4 ){
// Determine whether http interaction is successful
If (xmlhttp. status = 200 ){
// Obtain server data
// Obtain plain text data
Var responseText = xmlhttp. responseText;
Document. getElementById ("div1"). innerHTML = responseText;
}
}
}
</Script>
</Head>
<Body>
UserName: <input type = "text" id = "userName" onblur = "verify ();"/> <span id = "div1" style = "color: red "> </span>
<Br/>
Password: <input type = "password" id = "password"/> <br/>
Email: <input type = "text" id = "mail"/>
</Body>
</Html>
From a352193394
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
