//Ajax description
//(Asynchronous JavaScript and XML (Asynchronous JavaScript and XML)) [e?? S?? Kr? N? S]
/*
1.1 what is AJAX?
Ajax is not a programming language
AJAX is a without reloading the whole web page, will be able to update part of the web technology,

Traditional web page (do not use the AJAX) if need to update the content, necessary reloading the whole page,
There are a lot of using AJAX application case: sina weibo, Google maps, etc.

1.2 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;
Synchronous
//request a 1 ms
//request 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
*/

/*
1.3 AJAX - create the XMLHttpRequest object
What is the XMLHttpRequest object?
The XMLHttpRequest object is used to exchange data with the server in the background (specific introduce visible w3c)
Create the XMLHttpRequest object
All modern browsers (ie 7 +, Firefox, Chrome, Safari
And Opera) built-in XMLHttpRequest object,
Create the XMLHttpRequest object syntax:
Var XHR=new XMLHttpRequest ();
Older versions of Internet Explorer (ie 5 and 6) using the ActiveXObject object:
Var XHR=new ActiveXObject (" Microsoft. XMLHTTP ");
In response to all modern browsers, including IE5 and IE6, please check whether the browser supports the XMLHttpRequest object. If the support, create the XMLHttpRequest object, if they don't support, create ActiveXObject:
Var XHR.
If (window. The XMLHttpRequest) {
//code for IE7 +, Firefox, Chrome, Opera, Safari
XHR=new XMLHttpRequest ();
} else {
//code for IE6, IE5
XHR=new ActiveXObject (" Microsoft. XMLHTTP ");
}
*/

/*
1.4 the AJAX - sends a request to the server
Sends a request to the server, we use the XMLHttpRequest object open () and send () 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) Asynchronous
Send (string) : sends a request to the server
Parameters: the string is used only for POST request
A simple GET request:
XHR. Open (" GET ", "/Ajax02/getInfor", true)
XHR. The send ();
A simple POST request:
XHR. Open (" POST ", "/Ajax02/getInfor", true)
XHR. The send ();
If you need to POST data like HTML forms, please use the setRequestHeader () to add HTTP headers and then in the send () method of rules you want to send data:
XHR. Open (" POST ", "/jQueryAjax/postPersonInfor", true);
XHR. SetRequestHeader (" the content-type ", "application/x - WWW - form - urlencoded");
XHR. Send (data);//data in the form of data to be submitted (string)
SetRequestHeader syntax:
SetRequestHeader (header, value) : add HTTP headers to the request,
Parameter description:
The name of the header: regulations head
Value: the values of specified head
*/

/*
1.5 the AJAX server response
Use the responseText or responseXML property of the XMLHttpRequest object to obtain responses from the server
The responseText: string form of the response data obtained,
ResponseXML: XML response in the form of data obtained,
1.6 the AJAX onreadystatechange event
In the XMLHttpRequest object, the readyState property entities XMLHttpRequest state information,
Every time the readyState changes, will trigger the onreadystatechange event,
Here are three important properties of the XMLHttpRequest object:
Onreadystatechange: storage function (or functions), every time the readyState attribute changes, can call this function,
ReadyState: entities XMLHttpRequest, change from 0 to 4,
0: request uninitialized
1: the server connection has been established
2: the request has been received
3:
in the request processing4: the request has been completed, and the response is ready
Status: 200: "OK" 404: a page not found
In the onreadystatechange event, we specified when the server response is ready to be processed that is executed when the task,
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);
}


//JSON description
/*
JSON: JavaScript Object Notation (JavaScript Object Notation)
JSON is stored and the exchange of text information syntax:
JSON is a lightweight text data exchange format
2. JSON is independent of the language and platform
3. The 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,)
*/
//1.1 JSON syntax
/*
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. The curly braces to save object ({})
4. Brackets save array ([])
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
*/
//js object attribute value:
//JS data types: String Number Boolean Undefined Null Object (built-in custom Object)