Discussion on AJAX development technology _ajax related

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.