Ajax (Asynchronous JavaScript and XML, asynchronous JavaScript and XML), Ajax is not a new technology, its main purpose is to use for local refresh of the page, from the previous code development, the reader can see that Whenever a user makes a request to the server side, that is afraid to need just a simple update a little bit of local content, the server will be a whole page to refresh and regenerate the code, so that the performance of the program will certainly be reduced, and if the use of AJAX technology, you can implement local content changes, Instead of the overall page refresh, obviously the processing performance is much higher than the former.
In Ajax, mainly through the XMLHttpRequest object processing asynchronous request and processing response, the object was first in IE 5 in the form of ActiveX components, until 2005 years after the widespread use, And if you want to create a XMLHttpRequest object, you must use JavaScript.
Properties of the XMLHttpRequest object
No. |
Property |
Describe |
1 |
onReadyStateChange |
Specifies the action that is used when the ReadState state changes, and is generally used to specify a specific callback function |
2 |
ReadyState |
Returns the status of the current request, read-only |
3 |
Responsebody |
Returns the body of the response message as a unsigned byte array, read-only |
4 |
Responsestream |
Returns the response information in the form of an ADO stream object, read-only |
5 |
ResponseText |
Receives data returned in plain text, read-only |
6 |
Responsexml |
Receives data in response to an XML document, read-only |
7 |
Status |
Returns the HTTP status code for the current request, read-only |
8 |
StatusText |
Returns the response line state of the current request, read-only |
Creating XMLHttpRequest Objects
Copy Code code as follows:
<script language= "JavaScript" >
var xmlHttp; Ajax Core Object Name
function Createxmlhttp () {//Create XMLHttpRequest Core Object
if (window. XMLHttpRequest) {//To determine the type of browser currently in use
XmlHttp = new XMLHttpRequest ();//The browser used for the Firefox kernel
else {//means the browser using the IE kernel
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
}
</script>
There are five kinds of values for ReadState, respectively:
The request was not issued (before the open () function was called).
The request has been established but has not been issued (before the Send () function was called).
The request has been sent out (it is usually possible to get the content head from the response).
The request has been processed and is receiving information from the server, where some of the data is usually available, but the server has not yet completed the response.
The response is complete, and you can access the server response and use it.
Methods of XMLHttpRequest Objects
No. |
Method |
Describe |
1 |
Abort () |
Cancel the currently issued request |
2 |
getAllResponseHeaders () |
Get all HTTP header information |
3 |
getResponseHeader () |
Gets a specified HTTP header information |
4 |
Open () |
Creates an HTTP request and specifies the request mode, such as a GET request or POST request |
5 |
Send () |
Sends the created request to the server side and receives the response information |
6 |
setRequestHeader () |
Sets the HTTP header information for a specified request |
The code after the AJAX encapsulation
Ajax.js
Copy Code code as follows:
function Ajax (recvtype) {
var aj=new Object ();
Aj.recvtype=recvtype? Recvtype.touppercase (): ' HTML '//html XML
Aj.targeturl= ';
Aj.sendstring= ';
Aj.resulthandle=null;
Aj.createxmlhttprequest=function () {
var Request=false;
There are xmlhttprequest in the Window object that are not IE, including (IE7,IE8)
if (window. XMLHttpRequest) {
Request=new XMLHttpRequest ();
if (Request.overridemimetype) {
Request.overridemimetype ("Text/xml");
}
The Window object has the ActiveXObject attribute exists is IE
}else if (window. ActiveXObject) {
var versions=[' microsoft.xmlhttp ', ' MSXML. XMLHTTP ', ' msxml2.xmlhttp.7.0 ', ' msxml2.xmlhttp.6.0 ', ' msxml2.xmlhttp.5.0 ', ' msxml2.xmlhttp.4.0 ', ' MSXML2. xmlhttp.3.0 ', ' MSXML2. XMLHTTP '];
for (var i=0; i<versions.length; i++) {
try{
Request=new ActiveXObject (Versions[i]);
if (request) {
return request;
}
}catch (e) {
Request=false;
}
}
}
return request;
}
Aj. Xmlhttprequest=aj.createxmlhttprequest ();
Aj.processhandle=function () {
if (AJ. Xmlhttprequest.readystate = = 4) {
if (AJ. Xmlhttprequest.status = = 200) {
if (aj.recvtype== "HTML")
Aj.resulthandle (AJ. Xmlhttprequest.responsetext);
else if (aj.recvtype== "XML")
Aj.resulthandle (AJ. Xmlhttprequest.responsexml);
}
}
}
Aj.get=function (TargetUrl, Resulthandle) {
Aj.targeturl=targeturl;
if (resulthandle!=null) {
Aj. Xmlhttprequest.onreadystatechange=aj.processhandle;
Aj.resulthandle=resulthandle;
}
if (window. XMLHttpRequest) {
Aj. Xmlhttprequest.open ("Get", aj.targeturl);
Aj. Xmlhttprequest.send (NULL);
}else{
Aj. Xmlhttprequest.open ("Get", Aj.targeturl, True);
Aj. Xmlhttprequest.send ();
}
}
Aj.post=function (TargetUrl, sendstring, Resulthandle) {
Aj.targeturl=targeturl;
if (typeof (sendstring) = = "Object") {
var str= "";
For (Var pro in sendstring) {
str+=pro+ "=" +sendstring[pro]+ "&";
}
Aj.sendstring=str.substr (0, str.length-1);
}else{
aj.sendstring=sendstring;
}
if (resulthandle!=null) {
Aj. Xmlhttprequest.onreadystatechange=aj.processhandle;
Aj.resulthandle=resulthandle;
}
Aj. Xmlhttprequest.open ("Post", TargetUrl);
Aj. Xmlhttprequest.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Aj. Xmlhttprequest.send (aj.sendstring);
}
return to AJ;
}
Use Ajax to complete the local refresh operation;
In Ajax, operations are done primarily through the XMLHttpRequest object.
This is all about the Ajax development technology, I hope that the small partners can enjoy.