1.   <script>
  2.     window.onload = function(ev){
  3.       var oBtn = document.querySelector(\'button\');
  4.       // querySelector  https://segmentfault.com/q/1010000014291684
  5.       
  6.       oBtn.onclick = function(ev1){
  8.         // 1. 创建异步对象
  9.         var xmlHttp = new XMLHttpRequest();
  11.         /* 2. 设置请求方式和请求地址  open(method,url,async)
  12.         method: 请求的类型  GET 或 POST
  13.         url: 文件在服务器上的位置
  14.         async: true(异步)  false(同步)
  15.         */
  16.         xmlHttp.open("GET", "04-ajax-get.php", true);
  18.         // 3. 发送请求
  19.         xmlHttp.send();
  21.         // 4. 监听状态的变化
  22.         xmlHttp.onreadystatechange = function(ev2){
  23.           /*
  24.           0: 请求未初始化
  25.           1: 服务器连接已建立
  26.           2: 请求已接收
  27.           3: 请求处理中
  28.           4:请求已完成，且相应已就绪
  29.           */
  30.           if(xmlHttp.readyState === 4){
  31.             //判断是否请求成功
  32.             if(xmlHttp.status >= 200 && xmlHttp.status < 300 || xmlHttp.status === 304){
  33.               // 5. 处理返回的结果
  34.               console.log(\'接收到服务器返回的数据\');
  35.             }else{
  36.               console.log(\'没有接收到服务器返回的数据\');
  37.             }
  38.           }
  39.         }
  40.       }
  41.     }
  42.   </script>
  43. </head>
  44.   <!-- 使用Ajax更新数据和 不使用Ajax的区别：
  45.        不使用ajax更新数据，会重新加载整个页面
  46.        （例如 淘宝 输入关键字，搜索）
  47.        使用ajax更新数据， 不会重新加载整个页面，只更新某些部分 
  48.        （例如 淘宝搜索栏- 输入关键字 自动更新下拉提示框的内容 ）-->
  49. <body>
  50.   <button>发送请求</button>
  51. </body>

 

版权声明：本文为carpenterzoe原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/carpenterzoe/p/10386854.html