ajax的基本概念及其使用(5步)

蔚落 2022-07-12 07:23 160阅读 0赞

## 同步&异步 ##

> 先上概念

*  同步:必须等待前面的`任务`完成,才能继续后面的任务
 *  异步:不受当前`任务`的影响
 *  举个例子:
 *  同步:我们在银行排队时,只有等到你了,才能够去处理业务. 
 *  异步:我们在排队的时候,玩手机是没有任何影响的.  
    
 *  ## 异步更新网站 ##
    
    > 当我们访问一个普通的网站时,当浏览器加载完:`HTML,CSS,JS`以后网站的内容就固定了.如果`网站内容发生更改`必须刷新页面才能够看到更新的内容
    
     *  网站内容更新:
    
    常规的网站内容更新,必须通过`刷新`显示新内容
    
     *  想像一下
    
    你正用手机看着微博
    
    手机网速很慢
    
    内容看完了,点击`加载更多`按钮
    
    页面重新刷新 `o(╯□╰)o`
    
     *  异步更新
    
    实际情况是:我们在访问`新浪微博`时,当你看到一大半了,会`自动`帮我们加载更多的微博,同时页面并没有刷新
    
    ## Ajax概念 ##
    
    > 当我们`正在排队`的时候,可以通过`手机`去干一些其他的事情.
    
    在浏览器中,我们也能够不`刷新页面`,通过`ajax`的方式去获取一些新的内容,类似网页有`微博`,`朋友圈`,`邮箱`等
    
     *  单词解释:
    
    `Asynchronous Javascript And XML`（异步JavaScript和XML）,他并不是凭空出现的新技术,而是对于现有技术的结合:核心是js对象`XMLHttpRequest`
    
    ## XMLHttpRequest ##
    
    > `ajax`使用的依旧是`HTTP请求`,那么让我们来回忆一下一个完整的`HTTP请求`需要什么
    
    >
    
     *  请求的网址,方法`get/post`
     *  提交请求内容`数据`,`请求主体`等
     *  接收响应回来的内容
     *  五步使用法:
        
        1.  建立XMLHTTPRequest对象
        2.  注册回调函数
            
             *  当服务器`回应`我们了,我们想要执行什么逻辑
        3.  使用open方法设置和服务器端交互的基本信息
            
             *  设置提交的`网址`,`数据`,`post`提交的一些额外内容
        4.  设置发送的数据，开始和服务器端交互
            
             *  发送数据
        5.  更新界面
            
             *  在注册的回调函数中,获取返回的数据,更新界面
     *  示例代码:GET
    
    get的数据,直接在请求的`url`中添加即可
    
        <script type="text/javascript">
        
            // 创建XMLHttpRequest 对象
        
            var xml = new XMLHttpRequest();
        
            // 设置跟服务端交互的信息
        
            xml.open('get','01.ajax.php?name=fox');
        
            xml.send(null);    // get请求这里写null即可
        
            // 接收服务器反馈
        
            xhr.onreadystatechange = function () {
        
                // 这步为判断服务器是否正确响应
        
                if (xhr.readyState == 4 && xhr.status == 200) {
        
                    // 打印响应内容
        
                    alert(xml.responseText);
        
                } 
        
            };
        
        </script>
    
     *  示例代码:POST
    
        <script type="text/javascript">
        
            // 异步对象
        
            var xhr = new XMLHttpRequest();
        
        
        
            // 设置属性
        
            xhr.open('post', '02.post.php' );
        
        
        
            // 如果想要使用post提交数据,必须添加
        
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        
        
        
            // 将数据通过send方法传递
        
            xhr.send('name=fox&age=18');
        
        
        
            // 发送并接受返回值
        
            xhr.onreadystatechange = function () {
        
            // 这步为判断服务器是否正确响应
        
            if (xhr.readyState == 4 && xhr.status == 200) {
        
                   alert(xhr.responseText);
        
                 } 
        
            };
        
        </script>
    
    ## XMLHttpRequest\_API讲解 ##
    
    ### 1.创建`XMLHttpRequest`对象(兼容性写法) ###
    
     *  新版本浏览器:
    
        var xml=new XMLHttpRequest();
    
     *  （IE5 和 IE6）
    
        var xml=new ActiveXObject("Microsoft.XMLHTTP");
    
     *  考虑兼容性创建Ajax对象
    
        var request ;
        
         if(XMLHttpRequest){
        
            // 新式浏览器写法
        
            request = new XMLHttpRequest();
        
         }else{
        
            //IE5,IE6写法
        
            new ActiveXObject("Microsoft.XMLHTTP");
        
         }
    
    ### 2.发送请求: ###
    
    <table style=""> 
     <tbody style=""> 
      <tr style=""> 
       <th style="">方法</th> 
       <th style="">描述</th> 
      </tr> 
      <tr style=""> 
       <td style="">open(<span style="">method</span>,<span style="">url</span>,<span style="">async</span>)</td> 
       <td style=""> <p style="">规定请求的类型、URL 以及是否异步处理请求。</p> 
        <ul style=""> 
         <li style=""><span style="">method</span>：请求的类型；GET 或 POST</li> 
         <li style=""><span style="">url</span>：文件在服务器上的位置</li> 
         <li style=""><span style="">async</span>：true（异步）或 false（同步）</li> 
        </ul> </td> 
      </tr> 
      <tr style=""> 
       <td style="">send(<span style="">string</span>)</td> 
       <td style=""> <p style="">将请求发送到服务器。</p> 
        <ul style=""> 
         <li style=""><span style="">string</span>：仅用于 POST 请求</li> 
        </ul> </td> 
      </tr> 
     </tbody> 
    </table>
    
    ### 3.POST请求注意点: ###
    
    如果想要像`form`表单提交数据那样使用`POST`请求,需要使用`XMLHttpRequest`对象的`setRequestHeader()`方法 来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据：
    
        xmlhttp.open("POST","ajax_test.php",true);
        
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        
        xmlhttp.send("fname=Bill&lname=Gates");
    
    ### 4.onreadystatechange事件 ###
    
    当服务器给予我们反馈时,我们需要实现一些逻辑
    
    <table style=""> 
     <tbody style=""> 
      <tr style=""> 
       <th style="">属性</th> 
       <th style="">描述</th> 
      </tr> 
      <tr style=""> 
       <td style="">onreadystatechange</td> 
       <td style="">存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。</td> 
      </tr> 
      <tr style=""> 
       <td style="">readyState</td> 
       <td style=""> <p style="">存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。</p> 
        <ul style=""> 
         <li style="">0: 请求未初始化</li> 
         <li style="">1: 服务器连接已建立</li> 
         <li style="">2: 请求已接收</li> 
         <li style="">3: 请求处理中</li> 
         <li style="">4: 请求已完成，且响应已就绪</li> 
        </ul> </td> 
      </tr> 
      <tr style=""> 
       <td style="">status</td> 
       <td style=""> <p style="">200: "OK"</p> <p style="">404: 未找到页面</p> </td> 
      </tr> 
     </tbody> 
    </table>
    
    ### 4.服务器响应内容 ###
    
    如果响应的是普通字符串,使用`responseText`,如果响应的是`XML`,使用`responseXML`
    
    <table style=""> 
     <tbody style=""> 
      <tr style=""> 
       <th style="">属性</th> 
       <th style="">描述</th> 
      </tr> 
      <tr style=""> 
       <td style="">responseText</td> 
       <td style="">获得字符串形式的响应数据。</td> 
      </tr> 
      <tr style=""> 
       <td style="">responseXML</td> 
       <td style="">获得 XML 形式的响应数据。</td> 
      </tr> 
     </tbody> 
    </table>