Ajax study notes in jquery 3

Source: Internet
Author: User

Abstract:
Ajax Learning 1 describes how to use ajax encapsulated by jquery to receive text data from the server and XMLHttpReques object to receive text data from the server.
Ajax 2 describes how to use XMLHttpReques to receive XML data from the server. This section describes how to use ajax encapsulated in jqery to receive data from the server in XML format.

This section only describes the code to be modified. ajax encapsulated in jqery receives server-side data in XML format, web. no changes are required for xml and backend servet,
Modify the name of the method called in ajax.html to the newly added javascript method.

The main method used is described as follows:
JQuery. ajax (options): loads remote data through HTTP requests,
Returned value: XMLHttpRequest
Parameters: options (optional), ajax request settings. All options are optional.
Main options:
Type (String): (default: "GET") Request Method ("POST" or "GET"). The default value 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) Address of the request sent
Data (Object, String): the data sent to the server. Will be automatically converted to the request string format. The GET request will be appended to the URL
DataType (String): The expected type of data returned by the server.
If this parameter is not specified, jQuery will automatically return responseXML or responseText Based on the MIME information of the HTTP package and pass it as a callback function parameter. Available values:
"Xml": returns an XML document, which can be processed by jQuery.
"Html": returns plain text HTML information, including script elements.
"Script": returns plain text JavaScript code. Results are not automatically cached.
"Json": Return JSON data
Success (Function): callback Function after successful request. Parameter: data returned by the server, in the data format
Error (Function): (default: Automatic judgment (xml or html) Call time when a request fails
Async (Boolean): (default: true) All requests are asynchronous requests by default.
To send a synchronization request, set this option to false. Note: The synchronous request will lock the browser. Other operations can be performed only after the request is completed.

The newly added javascript method is as follows:
Copy codeThe Code is as follows:
<! -- Check the user name. ajax encapsulated by jquery is used to receive response data in XML format. -->
// Load remote data through HTTP requests using the $. ajax () method
Function verifyJqueryXML (){
Var jqueryObj = $ ("# username ");
Var username = jqueryObj. val ();
// A simple object definition method in javascript
// Var obj = {name: "abc", age: 20 };
// Use the get request encapsulation of the XMLHTTPRequest object of jquery
$. Ajax ({
Type: "POST", // Request Method
Url: "AJAXXMLServer", // server url
Data: "name =" + username, // send data to the server
DataType: "xml", // inform Jquery of the returned data format
Success: callback1 // callback function called when the server returns data correctly
}); // Note that the url and dataType must correspond
}
Function callback1 (data ){
// First, convert the dom object to the Jquery object.
Var jqueryObj = $ (data );
// Obtain the message Node
Var message = jqueryObj. children ();
// Obtain text content
Var text = message. text ();
// Dynamically display the server value on the page
Var resultObj = $ ("# result ");
ResultObj.html (text );
}

The name of the javascript method called in ajax.html should be changed to verifyJqueryXML ()

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.