Native Ajax Overview

AJAX = Asynchronous JavaScript and XML (Asynchronous JavaScript and XML (a subset of the Standard Generalized Markup Language)).
It refers to a web development technology to create interactive web applications.
Ajax by a small amount of data exchanged with the server in the background, Ajax can make asynchronous page updates.
This means that in the case (without reloading) the entire page on the web page (partial) update.
Traditional web page (do not use Ajax) If you need to update the content, you must reload the entire web page.
AJAX-based web standards,
dynamic display and interaction with AJAX the WEB,
AJAX javascript to use all the content bound together
AJAX need to consider browser compatibility issues
have a lot of applications using AJAX Case: Sina Weibo, Google Maps, happy network and so on.

Second, the native Ajax programming steps

1. Create XMLHttpRequest object
1) ajax technology is the core javascript XMLHttpRequest object, he is a technique asynchronous request support; native ajax dependent on that object XMLHttpRequest,
2) all modern browsers (IE7 +, Firefox, Chrome, Safari and Opera) are built-in XMLHttpRequest object.
Create XMLHttpRequest object syntax: XMLHTTP = new new XMLHttpRequest ();
3) older versions of Internet Explorer (IE5 and IE6) using ActiveX objects:
XMLHTTP = new new ActiveXObject ( "Microsoft.XMLHTTP");
4) In order to cope with all modern browsers including IE5 and IE6, please check whether the browser supports the XMLHttpRequest object. If supported, XMLHttpRequest objects are created. If not, then create ActiveXObject ::

Code:

var xmlhttp;
	if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
 			 xmlhttp=new XMLHttpRequest();
  	}else{// code for IE6, IE5
  			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    	}

2. Set the callback function
1) onreadystatechange: callback method provided when the request is sent to the server is performed whenever the readyState (communication state) becomes, onreadystatechange event is triggered.
2) When readyState equal to 4 and page status (the Status) 200, a response indicating ready:
A) there readyState of the XMLHttpRequest. Vary from 0-4.
0: Request uninitialized
1: server connection established
2: request received
3: Request Processing
4: request has been completed, and the response is ready
b) Status (page state)
200 is: "the OK" indicating success
404: Not Found page
3) To obtain a response from the server, use or responseXML responseText property of the XMLHttpRequest object.
responseText: response data string obtained.
responseXML: get the response data as XML.
Code

xmlhttp.onreadystatechange=function() {
 		 if (xmlhttp.readyState==4 && xmlhttp.status==200) {
   			 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
   		 }
  	 }

3. The method of setting parameters using the open / setting request
open the XMLHttpRequest object () method
open (method, url, async) : action: setting request
method: the type of request; the GET or the POST
URL: location of the file on the server
async: Default true (asynchronous) or false (synchronous)
asynchronous or synchronous
1) through asynchronous AJAX, JavaScript without waiting for a response from the server, but:
execute other scripts while waiting for the server response
when the response to treatment response ready
2) synchronous execution means code that must be executed sequentially,
the server must wait for the response and give executed,
then execute another script
code is

xmlhttp.open("GET","/statics/demosource/ajax_info.txt",true);

4. Send Request
Note: If the transmission request is a post way, also need to add this line xmlhttp.setRequestHeader ( "the Content-the Type", "file application / X-WWW-form-urlencoded");
Send the XMLHttpRequest object () method request to the server.
xmlhttp.send ();

Examples

<script  >
function fun()
{
	var xmlhttp;
	if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
 		 xmlhttp=new XMLHttpRequest();
  	}else{// code for IE6, IE5
  		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   	}
	xmlhttp.onreadystatechange=function() {
 		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
   			 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
   		}
   	}
	xmlhttp.open("/statics/demosource/GET","ajax_info.txt",true);
	xmlhttp.send();
}
</script>
<body>
	<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
	<button type="button" onclick="fun()">修改内容</button>
</body>