Asynchronous Ajax and JavaScript json summary
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
Development tools and key technology: Visual Studio 2015 and JavaScript
Author: Huang Futao
Writing time: on April 30, 2020,
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
Knowledge points list:
Json summary
1, the Json introduction:
JSON: JavaScript Object Notation (JavaScript Object Notation)
JSON is stored and the exchange of text information syntax:
(1). The JSON text is a lightweight data interchange format
(2). JSON is independent of the language and platform
(3). JSON has self descriptive, easier to understand,
Similar to XML, than XML smaller, faster, easier to parse
(XML: refers to the extensible markup language, XML is designed to transport and store data,)
2, the JSON grammar is a JavaScript object represents a subset of the
(1). The data in the name/value pairs (data) in the key/value pair
(2). The data is separated by a comma
(3). Curly braces save object ({})
(4). The brackets save array ([])
3, JSON values can be:
Number (integer or floating point)
String (in double quotes)
Boolean value (true or false)
Array (in brackets)
Object (in curly braces)
Null
(no undefined json values and NaN)
4, a JSON object with JS object is not the same as the two places:
(1). No statement variables (without the concept of variable in JSON)
(2). No semicolon at the end (because this is not a JavaScript statement, so don't need a semicolon)
5, JS and json conversion between
JSON object has two methods:
Stringify () : the JS object serialization for JSON string
The parse () : parsing JSON string for native JS value
Grammar: JSON. Methods (js);
6, the form of the json
(1) a json object
{
"Properties" : "attribute value,"
"Properties" : "attribute value,"
"Properties" : "attribute value
"}
(2) the Json array
{
{
"Properties" : "attribute value,"
"Properties" : "attribute value,"
"Properties" : "attribute value
"},
{
"Properties" : "attribute value,"
"Properties" : "attribute value,"
"Properties" : "attribute value
"}
}
Ajax asynchronous summary:
1, synchronous and asynchronous
Synchronous: refers to a process at the time of execution of a request,
If the request requires some time to return information,
So the process will have been waiting for,
Until received return information continue to perform;
Synchronization (a total of 3 ms)
Request a 1 ms
Request 2 1 ms
Request three 1 ms
Asynchronous 1.3 ms
Asynchronous: refers to the process does not need to wait forever,
But continue to perform the following operations, regardless of the other processes,
When there is a message returns system will inform process for processing,
So that we can improve the efficiency of execution,
Asynchronous implementation:
1, using HTML and CSS pages, express information
2, using the XMLHttpRequest and web server for the exchange of asynchronous data
3, use JavaScript DOM operation, realize the dynamic local refresh
2, what is the AJAX?
Ajax is not a programming language, Ajax is a without reloading the whole page, to be able to update part of the web technology, the traditional web page (do not use the Ajax) if need to update the contents page, necessary reloading the whole net surface,
The realization of the asynchronous is divided into four steps: (1) create the XMLHttpRequest object
(2) the XMLHttpRequest object sends a request to the server
(3) the browser and server connection
(4) the server response
3, to get the data from the server ()
The first step: the XMLHttpRequest object to create
XMLHttpRequest object description: all modern browsers support XMLHttpRequest object (IE6 browser using the ActiveXObject), so that when we handle the browser compatibility problem is to write an if judgment,
XMLHttpRequest is used to exchange data with the server in the background, this means you can under the condition of without reloading the whole page, the page updates, some part of the
Create the XMLHttpRequest object syntax: var XHR=new XMLHttpRequest ();
Create the ActiveXObject grammar: var XHR=new ActiveXObject (" Microsoft. XMLHTTP ");
Step 2: the XMLHttpRequest object sends a request to the server
Sends a request to the server, we use two methods of the XMLHttpRequest object open () method and the send () method
The open method:
Open (method, url, asyns) regulation of the type of request, a url and whether the asynchronous request is processed,
Parameter description:
Method: the type of request; GET or POST
Url: the location of the file on the server
Async: true (asynchronous) or false (synchronous)
Description: the async default value is true; When you want to select asynchronous, can not write this parameter,
The send () method: sends a request to the server
Grammar: XHR. The open ()/XHR. The send ();
Step 3: the browser and server connection
Step 4: the server's response
Use the responseText or responseXML property of the XMLHttpRequest object to obtain responses from the server (which means with a return value of the property to receive server)
The responseText: string form of the response data obtained,
ResponseXML: XML response in the form of data obtained,
Note: if you use the responseText property to receive the return value, will convert json values in the json to the server to JS, the value of the object, to receive worth when not receive immediately, but will take some time to determine whether the server response has been processed, the response to receive data, after the completion of the
XMLHttpRequest object three important attribute of the
(1) in the XMLHttpRequest object, the readyState property of XMLHttpRequest state information, every time the readyState changes, will trigger the onreadystatechange event, can trigger a total of four times,
ReadyState: entities XMLHttpRequest, change from 0 to 4, also known as a status code,
0: request uninitialized
1: the server connection has been established (representing the open () method is called)
2: the request has been received (said the send () method is called)
3: the request processing (data download, the responseText property already contains some data)
4: the request has been completed, and the response is ready (data reception is complete)
Is simply a record of the XMLHttpRequest object is currently belong to what kind of state,
(2) the status: 200: "OK" 404: a page was not found (when the status=200 response has been processed)
(3) the onreadystatechange: storage function (or functions), every time the readyState attribute changes, can call this function,
Is simply sends a request, the client is not sure when will complete the request, so you need to use events to capture the state of the request, the XMLHttpRequest object provides the onreadyStateChange event achieve this function, this is similar to callback functions,
When the readyState is 4 and the status of 200, said the response has been ready.
XHR. Onreadystatechange=function () {
If (XHR. ReadyState==4 & amp; & XHR. Status==200) {
Var TXT=XHR. The responseText;
The console. The log (TXT);
}
}
4, XMLHttpRequest will page data submitted to the server
Follow the steps to get the data on the server, the only variable assignment between position exchanged,
Summary: from the server to get data on the server data in json form, and want to escape,
The page data submitted to the server for the splicing of the string,
Note: when using post submission way to submit data to add this code, specify the response headers:
XMLHTTP. SetRequestHeader (" the content-type ", "application/x - WWW - form - urlencoded");
