Home > Developer > Web Develop
Ajax requests, first need the server (first you need node)
NPM i-g Http-server
Next, go to the current directory (default server port 8080)
Http-server
Click to enter: localhost:8080/apply-ajax.html
Apply-ajax.html
(It is recommended to encapsulate Ajax, as well as Ajax transcoding or transcoding back to the background.)
1 <!DOCTYPE HTML>2 <HTML>3 4 <Head>5 <MetaCharSet= "Utf-8">6 <title>document</title>7 <Metaname= "keywords"content="">8 <Metaname= "description"content="">9 <style>Ten * { One margin:0; A padding:0; - List-style:None; - } the </style> - </Head> - - <Body> + <ButtonID= "BTN">Request data</Button> - <ulID= "List"></ul> + <Script> A varbtn=document.getElementById ('btn'); at varList=document.getElementById ('List'); - Btn.onclick= function() { - //1. Create a XMLHttpRequest object - varXHR= NULL; - if(window. XMLHttpRequest) {//Non-IE5/6 - XHR= NewXMLHttpRequest ();//Instance Object in } Else { //IE5/6 - XHR= NewActiveXObject ('Microsoft.XMLHTTP'); to }; + //2. Open a link to the server - Xhr.open ('Get', 'test.json?_=' + NewDate (). GetTime (),true); //generate a different URL to resolve caching issues the //3. Send to Server * Xhr.send (NULL); //GET Request $ //4. Response ReadinessPanax Notoginseng Xhr.onreadystatechange= function() { - if(Xhr.readystate== 4) { //Request Complete the if(Xhr.status== $) { //OK + varJSON=Json.parse (xhr.responsetext);//parse into JSON object A for (varI= 0; I<json.length; I++) { the list.innerhtml+= '<li> Name:' +Json[i].name+ ', Gender:' +Json[i].sex+ ', Age:' +Json[i].age+ ', Results:' +Json[i].score+ '</li>'; + }; - } Else { $ alert (xhr.status); $ }; - }; - } the } - </Script>Wuyi </Body> the - </HTML>
Test.json (front desk can do the JSON object array test, until the data into the interface can be transferred)
1 [2 {"name": "\u8001\u738b", "Sex": "Female", "age": +, "score":3 {" Name ":" Lao Liu "," Sex ":" Male "," Age ":" Score ":"4"," name ":" Lao li "," Sex ":" Female "," Age ":" Score " :5 {"name": "Lao Zhang", "Sex": "Male", "age": +, "score":6 ]Ajax Request Background Interaction JSON sample
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
