Using jquery to implement AJAX operations
to achieve the Ajax page without refreshing, but the direct use of Ajax code is a bit of a hassle, so you want to use jquery implementation. jquery is a good encapsulation of Ajax's core object XMLHttpRequest. So it's very convenient to use.
First, the server-side code is created, where the server-side data processing is implemented using a servlet, and the code is as follows:
protected void DoPost (HttpServletRequest req, HttpServletResponse resp)
throws Servletexception, IOException {
//Set encoding format
resp.setcontenttype ("Text/html;charset=utf-8");
Create output Object
printwriter out = Resp.getwriter ();
Get request parameter
String name = Req.getparameter ("uname");
to determine if (name = = NULL | | name.length () = 0)
{
out.println ("User name cannot be empty!") ");
}
else
{
//judgment
if (name.equals ("Cheng"))
{
out.println ("user name [+ name +]" already exists!) Please use a different user name! ");
}
else
{
out.println (username [+ name +]] does not exist! You can register! ");
}
}
}
Then, to create a JSP page, to use jquery, you have to introduce a jquery library, a JavaScript file, in the page, as well as a custom JavaScript file, as follows:
<!--introduce JavaScript files--> <script type= "Text/javascript" src= "Js/jquery-1.2.6.js" ></script> <script type= "Text/javascript" src= "Js/verify.js" ></script>
The JSP page only needs a text box, a normal button and a blank div layer to display the processing results returned by the server side, the button's Click event triggers the Verify () method. As follows:
<body> <center> user name: <input type= "text" id= "uname" name= "uname"/> <br <input type= "button" Name= "Btnverify" value= "Verify" onclick= "Verify ()"/> <br/> <div id= "result "> </div> </center> </body>
Note: There is no need to use forms for data submission in AJAX mode, so you don't have to write <form> label on the page.
Next, create a verify.js file in which the verify () method is created to implement the No refresh effect of Ajax, which is the most important step in the example. Using jquery to implement Ajax is divided into the following four steps:
for the first step, get the object first through jquery and get the value of the object, as follows:
Gets the text box object, all objects obtained by $ () are jquery objects
var jqueryobject = $ ("#uname");
Gets the value in the text box
var userName = Jqueryobject.val ();
Get the node of the page through the $ () function in jquery, which gets a jquery object and then gets the value of the node through the Val () method in jquery, which is the contents of the text box.
PIN for the second step, we use the jquery Get () method to send the data to the server side, as follows:
$.get ("testservlet?uname=" + username,null,callback);
This method returns a XMLHttpRequest object, which provides three parameters, the first is the URL of the server side of the request, the second parameter is the parameter to be sent, and generally can be taken directly on the first URL, so the parameter is generally null. The third parameter is a callback function after the server side successfully processes the completed data.
pin for the third step, you should create a callback function to handle the data returned by the server side, as follows:
callback function function
callback (data)
{
}
the callback function has a parameter, which is the data returned by the client.
for the fourth step, the needle again uses the Jqueyr selector function to get the DIV layer, which displays the returned data above the layer, as follows:
function callback (data)
{
/**
* Third step, The data returned by the receiving
server
////will dynamically display the data returned by the server side on the page
var resultobject = $ ("#result");
resultobject.html (data);
}
Use jquery's HTML () method to dynamically display data into the div layer.
Now that we have optimized the above code, we can use two lines of code to achieve all of the above code, which is one of the strengths of jquery. The verify () method in the Verify.js file can also be written in the following form:
$.get ("Testservlet?uname=" +$ ("#uname"). Val (), null,function (data) {
$ ("#result"). HTML (data);
})
For you to share one, the following is "No refresh Login" example, using Ashx+jquery AJAX implementation.
1. Background Instance code ashx file (can be replaced by read from the database)
public void ProcessRequest (HttpContext context)
{context
. Response.ContentType = "Text/plain";
Context. Response.Write ("Hello World");
String name = Context. request.params["Name"]. ToString (). Trim ();
if ("a"). Equals (name))
{context
. Response.Write ("1");//1 flag Login Success
}
else
{context
. Response.Write ("0");//0 flag login Fail
}
}
2. Front-Office instance code aspx file
In the foreground ASPX page and the Backstage ashx page enters the code as above, realizes a super simple Ajax login, very simple?
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
