Ajax Technical Summary __ajax

1. Brief Introduction:
Ajax:asynchronous (asynchronous) JavaScript and XML. Ajax technology allows us to send requests to the server via JavaScript and get back results, which allows us to update only a small part of the page without refreshing the entire page, which is called "No refresh" technology. In fact, Ajax is not a new technology, but the integration of several existing technologies: JavaScript, XML and CSS. At its core is JavaScript, which allows us to complete the task of sending requests to the server and returning response results through the JavaScript XMLHttpRequest object, and then using JavaScript to update the local page. Asynchronous refers to: JavaScript after sending a request, not always wait for the server response, but send the request to continue to do something else, the request response processing is done asynchronously. XML is typically used to request the encapsulation of data and response data. CSS is used to beautify page styles.

2, the following list of standard XMLHttpRequest operations:
Abort (): Stop current request
getAllResponseHeaders (): Returns all response headers for HTTP requests as key/value pairs
getResponseHeader ("header"): Returns the string value of the specified header
Open ("Method", "url"): Establish a call to the server
Send (content): Send a request to the server
setRequestHeader ("header", "value"): Sets the specified header to the supplied value.

Standard XMLHttpRequest Operation Instructions:
Focus on the Open () method, the specific parameters and description of this method are as follows:
1. Void Open (String method,string url,booleab asynch,string username,string password): This is a pure scripting method for initializing a request. The first two parameters are required, and the last three are optional. To provide a URL that invokes a specific method (Get,post or put) and provides an electrophoresis resource, you can also pass a Boolean value indicating whether the call is asynchronous or synchronous. The default is true to indicate that the request is inherently asynchronous. If this argument is false, processing waits until the response is returned from the server. The last two arguments are self-explanatory, allowing you to specify a specific username and password.

2. void Send (Content): This method sends a specific request to the server, and if the request is declared asynchronous, the method returns immediately, otherwise it waits until it receives a response. An optional parameter is an instance of a DOM object, an input stream, or a string. The content passed into this method is sent as part of the request body.

3, void setRequestHeader (String header,string value): Sets the specified header to the supplied value. This method must be invoked after calling open ().

3, the following list of standard XMLHttpRequest properties:
onReadyStateChange: This processor is triggered when each state changes, and typically a JavaScript function is invoked
ReadyState: Status of the request. There are 5 desirable values: 0 (uninitialized), 1 (Loading), 2 (Loaded), 3 (interactive), 4 (complete)
ResponseText: Server response, representing a string
Responsexml: The response of the server, expressed as XML. This object can be parsed into a DOM object
Status: The HTTP status code of the server (200 corresponds ok,404 to not Found (not found), etc.)
Statustext:http the corresponding text of the status code (OK or not found, etc.)

4, the interactive process of Ajax:
1, a client triggers an AJAX event. Such as:
<input type= "text" name= "username" id= "username" onchange= "vaildation ();"/>
2, create an instance of the XMLHttpRequest object. Use the Open () method to establish the call and set the URL and the desired HTTP method (usually a get or post). The request is actually triggered by a send () method call. Such as:
var xmlHttp;

Creating XMLHttpRequest Objects
Note: When creating a XMLHttpRequest object, you create a different XMLHttpRequest object based on different browsers
function Createxmlhttprequest () {
if (window. ActiveXObject) {//ie browser
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
else if (window. XMLHttpRequest) {//Non IE browser
XmlHttp = new XMLHttpRequest ();
}
}

function Vaildation () {
Createxmlhttprequest ();
var username = document.getElementById ("username");
Xmlhttp.onreadystatechange = callback;
var url = "Servlet/validationservlet?username=" + Escape (username.value);
Xmlhttp.open ("Get", url,false);
Xmlhttp.send (NULL);
}

3, to the server to make a request. It could be a servlet, a CGI script, etc.
4, the server do what you want to do. such as access to the database, or even access to another system
5, request return to the browser.
6. The XMLHttpRequest object is configured to call the callback () function when processing returns. Such as:
function callback () {
if (xmlhttp.readystate = = 4) {
if (Xmlhttp.status = = 200) {
Do something interesting her
}
}
}