The first small example of learning Ajax
We often use JavaScript to dynamically change the content in the DIV, especially when using Ajax.
As the saying goes, it is easy to say that it is easy to do. It seems easy to compile on programming. Although there is no new technology in Ajax, it is just the transformation of ideas and the integration of old technologies, however, there are still a lot of problems to get started. First of all, I often use Firefox, And I will immediately encounter it.InnertextThe problem of incompatibility in Firefox cannot be found at the beginning. Later, the problem may be compatibility. Baidu, of course, should be used in ff.TextcontentAnd must comply with W3C standards.GetelementbyidGet the Div. You can't write the ID directly in the graph without having to worry about it. If you get it in IE, you won't know it in Firefox or other browsers. Follow the standard to make it readable.
Code:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br/> <HTML> <br/> <pead> <br/> <title> Ajax's first classic example: Hello World </title> <br/> <MCE: script Type = "text/JavaScript"> <! -- <Br/> var XMLHTTP; <br/> function createxmlhttprequest () {<br/> If (window. activexobject) {<br/> XMLHTTP = new activexobject ("Microsoft. XMLHTTP "); <br/>}< br/> else if (window. XMLHttpRequest) {<br/> XMLHTTP = new XMLHttpRequest (); <br/>}< br/> function startrequest () {<br/> createxmlhttprequest (); <br/> try {<br/> XMLHTTP. onreadystatechange = handlestatechange; <br/> XMLHTTP. open ("get", "data. XML ", tr UE); <br/> XMLHTTP. Send (null); <br/>}catch (exception) {<br/> alert ("The resource you want to access does not exist! "); <Br/>}< br/> function handlestatechange () {<br/> If (XMLHTTP. readystate = 4) {<br/> If (XMLHTTP. status = 200 | XMLHTTP. status = 0) {<br/> // get the DOM object of XML <br/> var xmldom = XMLHTTP. responsexml; <br/> // get the root of the XML document <br/> var root = xmldom.doc umentelement; <br/> try <br/> {<br/> // obtain the <info> result <br/> var info = root. getelementsbytagname ('info'); <br/> // obtain the string <br/> var str_data = info [0]. firstchild. data; <br/> // change the DIV content and call the changetext function. Note that IE and FF are different. <br/> changetext (info [0]. firstchild. data, 'showtext'); <br/> // innerhtml is the same <br/> document. getelementbyid ("showtexthtml "). innerhtml = '<B>' + info [0]. firstchild. data + '</B>'; <br/>} catch (exception) <br/>{< br/>}< br/> function changetext (STR, element) {// compatible with IE and FF <br/> If (navigator. appname. indexof ("Explorer")>-1) {<br/> document. getelementbyid (element ). innertext = STR; <br/>}else {<br/> document. getelementbyid (element ). textcontent = STR; <br/>}< br/> // --> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <div> <br/> <input type = "button" value = "Return Ajax responsexml's value "<br/> onclick =" startrequest (); "/> <br/> </div> <br/> <Div id =" showtext "> </div> <br/> <Div id =" showtexthtml "> </div> <br/> </body> <br/> </ptml>
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
