The core of AJAX is the XMLHTTPRequest object. Everything is implemented through it. Create an XMLHTTPRequest object today. Use it to generate a request and process the response.
Correctly create an XMLHTTPRequest objectDue to the difference in the browser, it is necessary to detect this object through the browser capability. this object is instantiated accordingly. we usually use constructors to instantiate an XMLHTTPRequest object. this method can be reused. because we generally cannot just create one. generally, multiple instances are created.
function createXmlHttpObject(){var xmlHttp = null;try{xmlHttp = new XMLHttpRequest();}catch(e){try{xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");}catch(e){xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}}return xmlHttp;}
Generate a request.
With the above function. use it to create an object. use the open () and send () methods to generate a request. we 'd better write this request into a function. because the request is sent again when necessary. for example, click the link or press the keyboard button. so we can do this:
Function myfirstrequest () {XMLHTTP = createxmlhttpobject (); // If (XMLHTTP = NULL) {alert ("Oop! Browser does not support HTTP request. ") return;} // The URL you want to request, which is obtained independently. You may need to do some processing. vaR URL; XMLHTTP. onreadystatechange = function () {// status during request processing. including processing of returned data .} // request the URL in get mode. The parameter true indicates Asynchronization. (I strongly recommend that you set this parameter to true, otherwise the blocking mode is used.) XMLHTTP. open ("get", URL, true); // null is sent in get mode. the post method needs to send data. XMLHTTP. send (null );}
The box that generates the request is probably like this.
Handling responseThe above comment ,'Status during request processing'Is the content to be introduced here.
The onreadystatechange attribute specifies a function. This method will be called several times at different stages of the request. we can use it to access the attributes in the XMLHTTPRequest object to determine the switching status and returned data. these attributes are:
Readystate is an integer of the following states:
0: not initialized.
1: Loading
2: Load completed
3: Interaction
4: complete
StatusIt is a digital code indicating the Request status: This is the HTTP protocol status generated by the server. For example, we often see that 200 represents 'OK', 404 represents 'undiscovered', and so on.
StatustextIt is a piece of information related to the status code.
After knowing the information above, you can make separate judgments and finally process the returned data.
The following is a common onreadystatechange method.
XMLHTTP. onreadystatechange = function () {If (XMLHTTP. readystate = 4 & amp; XMLHTTP. status = 200) {// the server is normal. and return the required data. here, we can // process responsetext .} else {// loading. or in other cases .}}
Of course you have seen it. the above example is incomplete. he does not segment the stages of readystate. so there is another common one. use the switch statement. or use the if statement to make a detailed judgment. simple Sentence. this is not repeated.
At this point, you have probably processed the basic Ajax request. Next I will write a very simple example (based on PHP). You can also set up a PHP environment. Experiment with this example:
Server code:
<? Phpif (isset ($ _ Get ['name']) {If (''= $ _ Get ['name']) {echo 'Enter the name ';} else {echo 'name :'. $ _ Get ['name'] ;}} else {echo 'this is a server file' ;}?>
Client code:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
