AJAX essay 1, ajax essay

Source: Internet
Author: User

AJAX essay 1, ajax essay

[1] AJAX Overview
> Full name: Asynchronous JavaScript And XML
> Asynchronous JavaScript and XML
> AJAX sends a request to the server through JavaScript and receives the response. Then, we modify the page through DOM.
> XML refers to the format of the server response data.
> Currently, AJAX rarely uses XML as the response format. XML parsing and transmission performance are poor.

[2] synchronous and asynchronous
> Synchronization:
When we send a request to the server through a browser, the browser refreshes the entire page.
> Asynchronous:
When we send a request to the server, we do not refresh the entire webpage, but only refresh Part Of The webpage.
 
[3] XMLHttpRequest object
> All AJAX operations are performed around the XMLHttpRequest object.
> The XMLHttpRequest object encapsulates the request message sent to the server. When the server replies, the response information is also encapsulated in the object.
> How to obtain the XMLHttpRequest object
-Var xhr = new XMLHttpRequest ();
 
[4] Procedure
1. Create an XMLHttpRequest object
Most of the newer browsers support this method (IE7 or above)
Var xhr = new XMLHttpRequest ();
Under IE6
Var xhr = new ActiveXObject ("Msxml2.XMLHTTP ");
IE5.5 or lower
Var xhr = new ActiveXObject ("Microsoft. XMLHTTP ");

The following describes how to obtain an XMLHttpRequest object:

// Write a function getXMLHttpRequest () {try {// return new XMLHttpRequest () supported by most browsers;} catch (e) {try {// return new ActiveXObject ("Msxml2.XMLHTTP");} catch (e) supported by browsers below IE6) {try {// return new ActiveXObject ("Microsoft. XMLHTTP ");} catch (e) {alert (" your browser does not support AJAX! ");}}}}



2. Set Request Information (request address, request method, request parameters)
Xhr. open (Request Method, request address );
When sending a post request, you also need to set a request header as follows:
Xhr. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded ");

3. Send a request
Xhr. send (Request body );
The get request does not have a request body. Therefore, null or nothing can be passed in send.
Post requests must use send to set request parameters.


4. Receive Response Information

// Xhr is bound to an onreadystatechange response function, which calls xhr when the readyState attribute changes. onreadystatechange = function () {// checks whether the current readyState is 4 and the response status code is 200 if (xhr. readyState = 4 & xhr. status = 200) {// read the response information and perform related operations. // If the information is plain text xhr. responseText // if the information is XML xhr. responseXML }};



[5] Response Data Format
-Response to an XML
-When we want to return a large amount of information to ajax through servlet, an object will be returned.
-User: username: sunwukong age: 18 gender: male
Username: sunwukgon, age: 18, gender: male
-We can return a large amount of information in an XML format.
<User>
<Name> </name>
<Age> </age>
<Gender> </gender>
</User>

-Response to a JSON object

2. JSON
[1] Introduction to JSON
> JSON is the full name of JavaScript Object Notation.
> Similar to the method for creating objects in JS
> Like XML, JSON is a data format.
> However, JSON has much higher storage and resolution performance than XML, and JSON is about 30% higher than XML.
<User>
<Name> sunwukong </name>
<Age> 18 </age>
<Gender> male </gender>
</User>

{"Name": "Sun Wukong", "age": 8, "gender": Male}

[2] JSON format
> JSON strings are not readable, but have good transmission performance.
> XML is easy to read, but the transmission performance is poor.
> JSON format and JS object type, but attribute names must use double quotation marks. You cannot use single quotes, nor do you need to write them!


> The JSON object is actually the structure of a group of key-value pairs,
Key and value usage: connection, used between multiple key-value pairs, separated, note that if it is the last key-value pair, do not add ,.
> {
"Attribute name 1": attribute value 1,
"Property name 2": property value 2,
"Attribute name 3": attribute value 3,
"Attribute name 4": attribute value 4
}

> JSON running attribute value type:
1. String 2. Number 3. boolean 4. Object 5. array 6. null

> Array:
[Attribute 1, attribute 2, attribute 3, attribute 4]
 
[3] Using JSON in JS
JSON object --> JSON string
JSON. stringify (object)
JSON string --> JSON object
JSON. parse (JSON string)
 
[4] Using JSON in Java
> Currently, many JSON parsing tools are used in Java:
Json-lib --> difficult to use, with the worst parsing Performance
Jackson --> difficult to use, best resolution Performance
Gson --> easy to use, with high resolution Performance
-Gson is a JSON parsing tool developed by Google. It is easy to use and has good performance.
Java object --> JSON string
JSON string --> Java object

3. Implement AJAX through jQuery
> Cache problems occur when you use get and getJSON, And the get method cannot transmit much data.
> The post method does not have cache problems, so we use many post methods during development.
[1] post () method
$. Post (url, [data], [callback], [type])
Parameters:
Url: the url of the AJAX request, a string.
Data: The request parameters sent to the server in JSON format.
Callback: This callback function is used to obtain the response sent by the server.
JQuery returns the response information in the form of callback function parameters.
Type: the type of the response. It is a string. Generally, two common values are text and json.
 
[2] get () method
-The get and post methods are basically the same.
 
[3] getJSON () method
GetJSON (url, [data], [callback])
The getJSON method is similar to the get method, except that the default response type of the method is JSON and does not need to be specified manually.

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.