xhr.html 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  6. <meta name="HandheldFriendly" content="true"/>
  7. <meta name="MobileOptimized" content="320"/>
  8. <title>Hello H5+</title>
  9. <script type="text/javascript" src="../js/common.js"></script>
  10. <script type="text/javascript">
  11. var url="http://www.dcloud.io/";
  12. var xhr=null;
  13. function xhrCreate() {
  14. if ( xhr ) {
  15. outLine( "xhr请求已创建" );
  16. return;
  17. }
  18. outSet( "创建请求:" );
  19. xhr = new plus.net.XMLHttpRequest();
  20. xhr.onreadystatechange = function () {
  21. switch ( xhr.readyState ) {
  22. case 0:
  23. outLine( "xhr请求已初始化" );
  24. break;
  25. case 1:
  26. outLine( "xhr请求已打开" );
  27. break;
  28. case 2:
  29. outLine( "xhr请求已发送" );
  30. break;
  31. case 3:
  32. outLine( "xhr请求已响应");
  33. break;
  34. case 4:
  35. outLine( "xhr请求已完成");
  36. if ( xhr.status == 200 ) {
  37. outLine( "xhr请求成功:"+xhr.responseText );
  38. } else {
  39. outLine( "xhr请求失败:"+xhr.status );
  40. }
  41. break;
  42. default :
  43. break;
  44. }
  45. }
  46. xhr.open( "GET", url );
  47. xhr.send();
  48. }
  49. function xhrResponseHeader() {
  50. if ( xhr ) {
  51. if ( xhr.readyState != 4 ) {
  52. outLine( "xhr请求未完成" );
  53. } else if ( xhr.status != 200 ) {
  54. outSet( "xhr请求失败:"+xhr.readyState );
  55. } else {
  56. outSet( "xhr请求响应头数据:" );
  57. outLine( xhr.getAllResponseHeaders() );
  58. }
  59. } else {
  60. outSet( "未发送请求" );
  61. }
  62. }
  63. function xhrAbort() {
  64. if ( xhr ) {
  65. outSet( "取消请求" );
  66. if ( xhr.readyState != 4 ) {
  67. xhr.abort();
  68. }
  69. xhr = null;
  70. } else {
  71. outSet( "未发送请求" );
  72. }
  73. }
  74. </script>
  75. <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
  76. </head>
  77. <body>
  78. <br/>
  79. <ul class="dlist">
  80. <li class="ditem" onclick="xhrCreate();">发送请求</li>
  81. <li class="ditem" onclick="xhrResponseHeader();">获取所有响应头</li>
  82. <li class="ditem" onclick="xhrAbort();">取消请求</li>
  83. </ul>
  84. <div id="outpos"/>
  85. <div id="output">
  86. XMLHttpRequest管理网络请求操作,可进行跨域网络数据请求。
  87. </div>
  88. </body>
  89. </html>