AJAX essay 1, ajax essay

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.