ajax study notes 3_jquery in jquery-JS Tutorial-php.cn

ajax study notes 3_jquery in jquery

WBOY

Release： 2016-05-16 18:00:49

Original

959 people have browsed it

Summary:
Ajax Learning 1 introduces the use of jquery-encapsulated ajax to receive server-side text data and the use of XMLHttpReques objects to receive server-side text data.
Ajax Learning 2 introduces the use of XMLHttpReques to receive server-side XML data. , this section mainly introduces the use of ajax encapsulated by jqery to receive server-side data in XML format.

Since a lot of knowledge has been introduced in detail, this section only introduces the code that needs to be modified. Ajax encapsulated by jqery uses XML format to receive server-side data. Web.xml and the backend servet do not need to be modified.
Just change the name of the method called in ajax.html to the newly added javascript method.

Introduction to the main method used:
jQuery.ajax(options): Load remote data through HTTP requests,
Return value: XMLHttpRequest
Parameters: options (optional), ajax request settings. All options are optional.
Introduction to the main options:
type (String): (Default: "GET") Request method ("POST" or "GET"), the default is "GET". Note: Other HTTP request methods, such as PUT and DELETE, can also be used, but only some browsers support
url (String): (Default: current page address) The address to send the request
data (Object,String): Data sent to the server. Will be automatically converted to request string format. The GET request will be appended to the URL
dataType (String): the data type expected to be returned by the server.
If not specified, jQuery will automatically return responseXML or responseText based on the HTTP packet MIME information and pass it as a callback function parameter. Available values:
"xml": Returns an XML document that can be processed by jQuery.
"html": Returns plain text HTML information; contains script elements.
"script": Returns plain text JavaScript code. Results are not cached automatically.
"json": Returns JSON data
success (Function): Callback function after the request is successful. Parameters: Server returns data, data format
error (Function): (Default: automatic judgment (xml or html)) Call time when the request fails
async (Boolean): (Default: true) Under default settings, all The requests are all asynchronous requests.
Set this option to false if you need to send synchronous requests. Note that the synchronous request will lock the browser, and the user must wait for the request to complete other operations before executing

The new javascript method is as follows:

Copy code The code is as follows:

 
 
//Load remote data through HTTP request through $.ajax() method 
function verifyJqueryXML(){ 
var jqueryObj= $("#username"); 
var username= jqueryObj.val(); 
//A simple object definition method in javascript
//var obj={name: "abc",age:20}; 
//Using the encapsulation of the get request of jquery's XMLHTTPRequest object 
$.ajax({ 
type:"POST",//Request method
url:"AJAXXMLServer", //Server-side url address
data:"name=" username, //Send Data to the server 
dataType: "xml", // Tell Jquery the data format returned 
success:callback1 // The callback function is called when it is completed interactively and the server returns the data correctly 
}) ; //Note that url and dataType must correspond to 
} 
function callback1(data){ 
//First, you need to convert the dom object into a Jquery object 
var jqueryObj=$(data); 
//Get the message node
var message=jqueryObj.children(); 
//Get the text content
var text=message.text(); 
//Dynamicly display the server-side value On the page 
var resultObj=$("#result"); 
resultObj.html(text); 
} 

obtained by the above generation, in ajax.html The name of the calling javascript method should be changed to: verifyJqueryXML()