Ajax Getting Started Guide (i)

Ajax Getting Started Guide, it should be helpful for the friends who start to learn Ajax.

1. Ajax compatible with IE and Firefox two big browsers, there is an AJAX development framework.
2. Key Technologies for AJAX development: XMLHttpRequest objects, JavaScript programming techniques, DOM (Document Object model), CSS (cascading style sheets), and XSLT (Extensible stylesheet Conversion)
XMLHttpRequest object is the core of implementing AJAX application;
JavaScript is the scripting language used by AJAX applications on the client side;
The dynamic update of the page can be realized by the combination of JavaScript and DOM.
CSS is mainly used to control the display style of page elements;
XSLT can transform an XML document into any form of document, using XSLT in an AJAX application to achieve a complete separation of data and page display;
3. XMLHttpRequest object:
3.1 Send Request
The basic process of sending requests to the server by using the XMLHttpRequest object can be divided into 5 steps:
3.1.1 To obtain the required data from the Web form;
3.1.2 establishes the URL to be connected;
3.1.3 Open the connection to the server;
3.1.4 Sets the function to run after the server completes;
3.1.5 send the request;
function CallServer () {
Get the necessary data from the form
var city = document.getElementById ("City"). Value;
var state = document.getElementById (' state '). Value;
Make a request only if the data is not empty
if (city = = null) (City = = "") return;
if (state = = NULL) (state = =)) return;
The requested URL
var url = "getzipcode.php?city=" + Escape (city) + "&state=" + Escape (state);
Contact server, open connection
Xmlhttp.open ("Get", url,true);/"true" means that the request is asynchronous
Set the response function when the request completes, note that this is when the request is complete, not when the response is complete
Xmlhttp.onreadystatechange = Updatepage;
A request is sent because the data (city and state) to be sent to the server has been added to the request URL, so no additional data is required to be sent in the request.
Xmlhttp.send (NULL);
}

3.2. Handling HTTP Responses
200: Everything is fine
401: Unauthorized
403: Prohibition
404: Not Found
function Updatepage () {
ReadState = 4, which indicates that the request completed successfully
if (xmlhttp.readystate = = 4) {
if (Xmlhttp.status = = 200) {
var response = Xmlhttp.responsetext;//http Request returned text content
document.getElementById ("ZipCode"). Value = response;
}else if (request.status = = 404) {
The HTTP status code is 404 and the resource cannot be found
alert ("404 Not Found");
}else if (request.status = = 403) {
HTTP status code is 403, resource is not available
Alert ("403 Forbidden");
}else if (request.status = = 401) {
HTTP status code is 401, unauthorized
Alert ("401 Unauthorized");
}
}
}

              3.3. HTTP Ready Status
                        a total of 5 ready states:
                         0: The request was not initialized (the open method of the XMLHttpRequest object has not yet been invoked)

1: The request has been established but has not been sent (the Send method has not been called yet)
2: Request sent, processing in progress
3: The request is in process. Usually some of the data in the response is available, but the server has not completed the response generation
4: The response is complete, you can obtain and use the server's response