Ajax異步網絡請求及JSONP跨域
阿新 • • 發佈：2018-03-07
pan test ref orm 默認 scrip ava ucc 文本
1 // <-----Ajax-----> 2 function loadXMLDoc() { 3 function success(text) { 4 var textarea = document.getElementById(‘myid‘); 5 textarea.value = text; 6 } 7 function fail(code) { 8 var textarea = document.getElementById(‘myid‘); 9 textarea.value = ‘Error code: ‘ + code;10 } 11 var request; //創建XMLHttpRequest對象 12 if(window.XMLHttpRequest) { 13 request = new XMLHttpRequest(); //兼容大多數瀏覽器 14 }else { 15 request = new ActiveXObject(‘Microsoft.XMLHTTP‘); //兼容IE5 IE6 16 } 17 request.onreadystatechange = function() { //創建完XMLHttpRequest對象後，先設置onreadystatechange回調函數18 //判斷響應結果 19 if(request.readyState == 4) { //通過readyState===4判斷請求是否完成 20 if(request.status == 200) { //如果請求完成，再根據status===200判斷是否是一個成功的響應 21 return success(request.responseText); //成功，通過responseText拿到響應的文本 22 }else { 23 return fail(request.status); //失敗，根據響應碼判斷失敗的原因 24 } 25 }else { 26 //HTTP請求還在繼續。。。 27 } 28 } 29 request.open(‘Get‘,‘a_jax.txt‘,true); //XMLHttpRequest的open方法有三個參數(‘GET/POST’，‘指定URL地址’，是否使用異步 默認為true 可省略) 30 request.send(); //發送請求，GET方法不需要參數；POST方法需要把body部分以字符串或者FormData對象傳進去 31 console.log(‘請求已發送，請等待相應‘)； 32 } 33 34 // <-----跨域-----> 35 // ajax的URL使用的是相對路徑，由於瀏覽器的同源策略，默認的情況下，JavaScript在發送Ajax請求時，URL的域名必須和當前頁面完全一致。即域名相同(www.baidu.com和baidu.com)、協議相同(http和https)、端口相同(:80和:8080)，因此需要使用JavaScript請求外域(其他網站)的URL跨域。 36 // 使用JSONP進行跨域，它只能用GET請求，這種跨域方式是利用瀏覽器允許跨域引用JavaScript資源 37 // <script src="http://example.com/abc.js"><\/script> 38 // JSONP通常以函數調用的形式返回，例如JavaScript內容為：foo(‘data‘); 這樣一來，如果在頁面中先準備foo()函數，然後給頁面動態加一個<script>節點，相當於動態讀取外域JavaScript資源最後就等著接收回調了。 39 // 例如：對於URL：http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice 40 // 將會得到 refreshPrice({"0000001":{"code": "0000001", ... }); 41 // 因此需要首先在頁面中準備好回調函數 42 // function refreshPrice(data) { 43 // var p = document.getElementById(‘test-jsonp‘); 44 // p.innerHtML = ‘當前價格：‘ + 45 // data[‘0000001‘].name +‘: ‘ + 46 // data[‘0000001‘].price + ‘；‘ + 47 // data[‘1399001‘].name + ‘: ‘ + 48 // data[‘1399001‘].price; 49 // } 50 // 最後用getPrice()函數觸發： 51 // function getPrice() { 52 // var 53 // js = document.createElement(‘script‘), 54 // head = document.getElementsByTagNage(‘head‘)[0]; 55 // js.src = ‘http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice‘; 56 // head.appendChild(js); 57 // } 58 // 完成跨域加載數據 59 // 如果瀏覽器支持HTML5，可使用新的跨域策略 CORS 60 </script> 61 </head> 62 <body> 63 <div id="myid">Do Sth</div> 64 <button type="button" onclick="loadXMLDoc()">Click it</button> 65 </body> 66 </html>
Ajax異步網絡請求及JSONP跨域