玩转ajax

1.什么是ajax？

　　Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的缩写。

2.ajax需要什么基础?

　　HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。 
     JavaScript 代码是运行 Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。

3.Ajax的请求步骤

 　　3.1 创建一个对象XMLHttpRequest对象
　　3.2设置回调onreadystatechange方法
　　判断成功  status=200 readyStates = 4
　　3.3 设置open
　　第一个参数 GET或者POST
　　第二个参数 Url
　　第三个参数 true(异步) false(同步)
　　3.4 发送请求send方法 GET形式send方法没有参数
　　POST形式send方法有参数   参数的形式 键=值&键=值
　　3.5 POST请求 需要设置hdader
　　setRequestHeader("Content-Type","application/x-www-form-urlencoded");

4.html代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>ajax</title>
 </head>
 <body>
     <h1>Ajax请求</h1>
     <hr>
     <button onclick='sendAjax()'>sendAjax</button>
     <script>
         function sendAjax(){
             //创建一个xhr对象
             if(window.XMLHttpRequest){
                 var xhr = new XMLHttpRequest();
             }
             else {
                 var xhr = new ActiveXObject('Microsoft.XMLHTTP');
             }
             console.log('initital',xhr.readyState);
             // 当状态发送改变 回调这个函数
             xhr.onreadystatechange = function(){
                 console.log(xhr.readyState);
                 if(xhr.readyState==4 && xhr.status==200){
                     // 输出响应的文本对象
                     console.log(xhr.responseText);
                 }
             }
             //发送请求
             xhr.open('GET','01.php',true);
             // xhr.open('GET','01.php',false);
             // xhr.open('GET','01.php');
             console.log("open",xhr.readyState);

             xhr.send();//异步请求 在这时间点 分线程走
             console.log('send',xhr.readyState)
         }
     </script>
 </body>
 </html>

5.php代码

<?php // sleep(5); echo "hellow world"; ?>

6.点击F12或者Ctrl+shift+I检查元素，然后触发点击事件，看到的效果图