Home > Developer > Web Develop
One, code example
The basic concepts of Ajax (including XMLHttpRequest objects and their associated method properties) are here (w3school Chinese) to learn.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "Utf-8"> <title>Asynchronously loading data using Ajax</title> <Scripttype= "Text/javascript"> functionloaded () {varXMLHTTP= NULL; //define a variable to store XMLHttpRequest objects //using Try-catch to get XMLHttpRequest objects, XMLHttpRequest objects are the core foundation of AJAX implementation Try{XMLHTTP= NewXMLHttpRequest (); //for browsers such as Firefox,chrome,safari } Catch(e) {Try{XMLHTTP= NewActiveXObject ("msxml2.xmlhttp"); //IE Browser } Catch(e) {XMLHTTP= NewActiveXObject ("Microsoft.XMLHTTP"); //old-fashioned IE browser}} Xmlhttp.onreadystatechange= function () { if(Xmlhttp.readystate== 4 &&Xmlhttp.status== $) { //When the request is complete and the server response status is ready //alert (xmlhttp.responsetext);document.getElementById ("New"). InnerHTML=Xmlhttp.responsetext; //document.getElementById ("new"). InnerText = Xmlhttp.responsetext; //using the InnerText property, the AJAX response character data has been unable to understand what reason, currently only through the innerHTML property to get Output "example.txt" character data } }
Xmlhttp.open ("GET","Example.txt",true); //describe the type of request, in order to get the HTML document in the same path as a TXT document data as an example, skip the background script Interactive process, simple example ha ~ ~Xmlhttp.send (); //Send Request} window.onload= function() {loaded (); } </Script></Head><Body> <DivID= "new">Ok,that ' s shit!!!</Div> <!--<input type = "button" value = "shit"/> -</Body></HTML>
Second, the effect
Iii. Conclusion
Although the theory can see clearly, but still more practice, the code is the truth! Although this is a simple example, but did not expect to use the InnerText property can not output Ajax obtained data, find long time did not find the problem, do not know the reason, can only use innerHTML attribute, follow-up study in depth and then look back. The main conclusions are as follows:
1, directly on the local hard disk to establish a. txt document as the data source for AJAX requests, chrome, IE restricts the protocol used by AJAX requests. For example, the request path is the file://protocol to download the Example.txt file from its own hard drive, you will see "Cross origin requests is Onlu supported for HTTP" (inter-domain request support HTTP protocol) error message (). There is no limit to Firefox browser.
2, based on the Firefox browser, using the InnerText property cannot output the TXT document character data obtained by Ajax, while using the innerHTML property to get the output (written to the current HTML document), the reason is unknown.
Iv. references
A simple example of AJAX implementations
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
