example14.html 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <button id="loadBtn">加载</button>
  9. <script src="js/mylib.js"></script>
  10. <script>
  11. +function() {
  12. bind($('loadBtn'), 'click', function() {
  13. // 创建异步请求对象
  14. var xhr = new XMLHttpRequest();
  15. if (xhr) {
  16. var url = 'http://api.tianapi.com/meinv/?key=772a81a51ae5c780251b1f98ea431b84&num=10';
  17. // 第一个参数 - 请求的方式get或post
  18. // 第二个参数 - 请求的资源对应的URL(统一资源定位符)
  19. // 第三个参数 - true表示异步请求(不中断用户体验的非阻塞式请求)
  20. xhr.open('get', url, true);
  21. // 绑定事件回调函数(服务器响应完成并成功后要对页面进行局部刷新)
  22. xhr.onreadystatechange = function() {
  23. if (xhr.readyState == 4 && xhr.status == 200) {
  24. // 将服务器返回的数据解析成JSON
  25. var json = JSON.parse(xhr.responseText);
  26. var mmList = json.newslist;
  27. for (var i = 0; i < mmList.length; i += 1) {
  28. var mm = mmList[i];
  29. // 动态创建<img>标签并绑定src属性
  30. var img = document.createElement('img');
  31. img.src = mm.picUrl;
  32. img.width = 300;
  33. document.body.insertBefore(img, $('loadBtn'));
  34. }
  35. }
  36. };
  37. xhr.send();
  38. } else {
  39. alert('你的浏览器是一坨屎!');
  40. }
  41. });
  42. }();
  43. </script>
  44. </body>
  45. </html>