Ajax in jquery (asynchronous XML and JavaScript Communication)

Source: Internet
Author: User

Jquery is an encapsulation of JavaScript, saving programmers from tedious JavaScript code.

Jquery has two common usage methods: Ajax and interface special effects.

In jquery, Ajax communicates with the server through the XMLHTTPRequest object. The server is usually a servlet. Because the struts2 action returns a page, data cannot be updated without refreshing a new page. Servlet can return text, XML, JSON, and other data formats. Therefore, the XMLHTTPRequest object in the browser performs data exchange with the servlet on the server to update the data without refreshing the new page.

 

Jquery provides Ajax (), get (), post () Methods to interact with the server. if Javascript is used to achieve these effects, the code is complicated.

For example, use the post () method of jquery to perform asynchronous data interaction with the server. (Note: In jquery, $ is the alias of jquery. When there are $ aliases in other JS files, pay attention to resolving the conflict .)

 

// This is the valify code
Function valify (){
// Alert ("OK ");
// Obtain the content in the text box
// Document. getelementbyid ("username"); get the DOM Node
/* Jquery searches for nodes in the following way. The parameter consists of # + id
* The result is a jquery object, which encapsulates the DOM Node object.
*/
VaR jqueryobj = $ ("# username ")
VaR username = jqueryobj. Val ();
// Send the content in the text box to the server Servlet
$. Get ("ajaxserver? Username = "+ username, null, callback );
}
// Callback function
Function callback (data ){
// Receives the data returned by the server.
VaR getrespobj = $ ("# getresp ");
// Display the received content on the page
Getrespobj.html (data );
}

 

Abbreviation of the above Code:

Function valify (){
$. Get ("ajaxserver? Username = "+ $ (" # username "). Val (), null, function (data) {$ (" # getresp ").html (data );});
$. Get ("ajaxserver? Passwd = "+ $ (" # passwd "). Val (), null, function (data) {$ (" # getresp ").html (data );});
}

Use JavaScript code to Implement Asynchronous Communication:

// User verification method
// This method uses the XMLHTTPRequest object for Ajax Asynchronous Data Interaction
VaR XMLHTTP = NULL;
Function valify (){
// Use Dom to obtain the value of the corresponding element
VaR username = Document. getelementbyid ("username"). value;
// 1. Create an XMLHTTPRequest object
// This is the most complex step to use xhr
// You need to write different codes for different browsers
 
If (window. XMLHttpRequest ){
XMLHTTP = new XMLHttpRequest ();
// Fix certain browsers
If (XMLHTTP. overridemimetype ){
XMLHTTP. overridemimetype ("text/XML ");
}
} Else if (window. activexobject ){
// For ie5, ie5.5, and IE6
VaR activexname = ["msxml2.xmlhttp", "Microsoft. XMLHTTP"];
For (VAR I = 0; I <activexname. length; I ++ ){
Try {
XMLHTTP = new activexobject (activexname [I]);
Break;
} Catch (e ){}
}
}
// Confirm that the XMLHTTP object is successfully created
If (! XMLHTTP ){
Alert ("XMLHttpRequest creation failed! ");
} Else {
Alert (XMLHTTP );
}
 
// 2. register the callback function
// When registering a callback function, you only need the function name and do not need parentheses. If brackets are used to call the function, the returned result is registered.
XMLHTTP. onreadystatechange = callback;
// Set the connection information
/**
* The first parameter indicates the request method. It supports all HTTP request methods, mainly using get and post.
* The second parameter indicates the request URL, and the GET request parameters are also in it.
* The third parameter indicates asynchronous or synchronous mode, and true indicates asynchronous mode.
*/
XMLHTTP. Open ("get", "ajaxserver? Username = "+ username, true );

// Send data and start interacting with the server
/**
* Waiting is required for Synchronous execution, but not for Asynchronous interaction execution.
*/
XMLHTTP. Send (null );
}
Function callback (){
// Determine whether the interaction with the server is complete
If (XMLHTTP. readystate = 4 ){
// Determine whether the interaction with the server is successful
If (XMLHTTP. Status = 200 ){
// Obtain the data returned by the server
// Obtain server-side plain text data
VaR restext = XMLHTTP. responsetext;
VaR divnode = Document. getelementbyid ("getresp ");
// Display the data on the page.
Divnode. innerhtml = restext;
}

}
}

 

Jquery also provides many functions for making beautiful pages:

Below are five subprograms written in myeclipse8.5:

Http://download.csdn.net/source/3027419

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.