AJAX Getting Started Series

What is AJAX?
AJAX is "Asynchronous JavaScript and XML" acronym (Asynchronous JavaScript and XML), that is, a page refresh-free hybrid technology acquired server data.
What is XML?
XML is "Extensible Markup Language" is a descriptive markup language data.
Early People often use XML to transfer data, now popular data formats for the string-like object: JSON
no page refresh what is?
Traditional web applications allow users to fill out the form, it sends a request to the web server when the form is submitted. The server receives and processes the transmitted form, and then return to a new page. This approach to waste a lot of network resources, because most of the HTML code before and after the two pages is often the same. Due to the interaction of each application needs to send a request to the server, the response time of the application and to increase the response time of the server growth, resulting in the user interface is much slower than the corresponding native applications, also resulted in very poor user experience.
AJAX applications may retrieve the portion of the data to the server only needs to be changed, or some other uses SOAP Webservice based interfaces and corresponding client from the server using JavaScript out. Due to a significant reduction in the data before the server and browser exchange, we can see faster application response. Meanwhile, many of the processing can be done on the requesting client machine, the server processing time is reduced accordingly.
The biggest advantage of using Ajax is that we can maintain data without updating the entire page of the premise. This makes Web applications more quick to respond to user actions, and to avoid sending information that has not changed over the network.
Ajax does not require any browser plug-ins, but requires the user to allow the execution of JavaScript in the browser. Like DHTML application that, Ajax applications must be in a number of different browsers and platforms through rigorous testing. As Ajax matures, some of simplifying the use of Ajax libraries have also come out. Similarly, there have been another technical assistance program designed to provide alternative functionality for users who do not support JavaScript.
1, first to a front and rear end interactive map ajax

AJAX how to use?
First, first introduced the XMLHttpRequest object, AJAX XMLHttpRequest is the basis of all modern browsers support XMLHttpRequest object (IE5, IE6 use ActiveXObject), he used to exchange data with the server in the background, which means you can not reload the entire page in under the circumstances, a part of the data page is updated.
Create XMLHttpRequest syntax:
Variable = new new XMLHttpRequest ();
Method:
Open (Method, URL, the async):. 1, Method: type of the request; the GET or POST 2, url: location of the file on the server 3, async: true ( asynchronous) or false (synchronous)
the setRequestHeader (header, value): was added to the HTTP request header.
send (string) sends a request to the server.
abort (): asynchronous request cancellation;
Properties:
.responseText: response data string obtained.
.responseXML: get the response data as XML.
.status: HTTP status of the response; 200: "OK" 404: Page Not Found
.statusText: Description HTTP status;
.readyState: there XMLHttpRequest's status.
Vary from 0-4. 0: Request uninitialized
1: server connection established
2: request received
3: processing request
4: request has been completed, and the response is ready
to prepare AJAX
1.xhr.open ( "GET", "HTTP: // * * * ", to false)
2, FIG browser AJAX request server

(1) get / post requests
Get request case:
Xmlhttp.open (" GET "," .php "to true,)
xmlhttp.send ();
Note: get approach requires of Chinese processing (data after the splice. 1 & B = A URL = 2)
Post request case
Xmlhttp.open ( "POST", " .php" to true,)
xmlhttp.send ();
Note: post approach requires the head before transmission parameters unit, send the data written in the
(2) requests the address, the data storage address of the interface
(3) with the synchronization request asynchronous request
  if the synchronization: Xmlhttp.open ( "GET", " .php", to false)
if the asynchronous: Xmlhttp.open ( "get", ".php, true)
synchronous and asynchronous difference:
asynchronous JavaScript will wait until the server response is ready before continuing execution. If the server is busy or slow, or stop an application hang.
Other asynchronous execution script when waiting for the server, the response when the response is ready for processing after
2. Set request header
the setRequestHeader (header, value)
header: the first predetermined name, value: the value of a predetermined header
Example: xhr.setRequestHeader ( "myHeader "," MyValue ")
3. send request
the GET
XHR = new new the XMLHttpRequest ()
xhr.open (" GET "," .php ", to false)         
xhr.setRequestHeader (" the Content-type "," appurlencoded ") xhr.send ( null)
the POST
xmlhttp.open ( "POST", "/ the try / Ajax / demo_post2.php", to true); xmlhttp.setRequestHeader ( "the Content-type", "App"); xmlhttp.send ( "fname = Henry Ford & lname = ");



= the XMLHttpRequest new new XHR ()
xhr.onreadystatechange = () => {
IF (xhr.readyState ==. 4) {IF ((xhr.status> = 200 is && xhr.status <300) || xhr.status == 304) {
Alert (xhr.responseText)
} the else {
Alert ( "the Request WAS unsuccessful:" + xhr.status)
}
}
} X
hr.open ( "GET", "the example.php", to true)
xhr.send (null)
. 1 background flowchart distal browser requests the server

2, the front end of modified data acquired from the background to render page