AJAX具体使用

一、GET请求

①GET请求传递参数通常使用的是问号传参,即在请求地址上加上?参数,从而传递数据到服务端

②一般在GET请求数据时,无需设置响应体,可以传null或者干脆不传

③一般情况下URL传递的都是参数性质的数据，而POST一般都是业务数据

<?php
    //test.php服务端文件
    //返回的响应就是数据,对于返回数据的地址一般称之为接口(有输入有输出),形式上上是web形式
    $data=array(
        array('id' => 1,'name' =>'刘备','age' => 30),
        array('id' => 2,'name' =>'关羽','age' => 29),
        array('id' => 3,'name' =>'张飞','age' => 28)
    );
    //处理数据
    if(empty($_GET['id'])){
        //没有ID则获取全部数据
        //因为HTTP中约定报文的内容就是字符串,需要传递给客户端的是信息是一个有结构的数据
        //这种情况下一般采用json作为数据格式
        $json=json_encode($data);
        echo $json;
    }else{
        //传递了ID只获取一条
        foreach($data as $item){
            if($item['id']==$_GET['id']){
                $json=json_encode($item);
                echo $json;
            }
        }
    }
?>

<body>
    <ul id="list"></ul>
    <script>
        var listElement=document.getElementById("list");
        var xhr=new XMLHttpRequest();
        xhr.open('GET','http://localhost/test.php');
        xhr.send();
        xhr.onreadystatechange=function(){
            if(this.readyState!==4) return;
            //JSON.parse()方法用于将一个JSON字符串转换为对象
            var data=JSON.parse(this.responseText);
            //遍历对象
            for(var i=0;i<data.length;i++){
                //增加一个li元素
                var liElement=document.createElement('li');
                //li元素里面写入的是服务端数据的name值
                liElement.innerHTML=data[i].name;
                //便于后面获取当前被点击元素对应数据的ID
                liElement.id=data[i].id;
                //把li元素添加到ul里面
                listElement.appendChild(liElement);
                //为li元素注册点击事件,使用addEventListener的好处是可以为一个元素注册多个事件,不会冲突
                liElement.addEventListener('click',function(){
                    //通过AJAX操作获取服务器端对应数据的信息
                    var xhr1=new XMLHttpRequest();
                    xhr1.open('GET','http://localhost/test.php?id=' + this.id);
                    xhr1.send();
                    xhr1.onreadystatechange=function(){
                        if(this.readyState!==4) return;
                        var obj = JSON.parse(this.responseText);
                        console.log(obj);
                        alert(obj.age);
                    };
                });
            }
        }
    </script>
</body>

二、POST请求

①post请求过程中，都是采用请求承载需要提交的数据

②open（）方法的第一个参数就是设置请求的method

③setRequestHeader中需要设置Content-Type的格式与send( )里参数的格式相对应

④用户可以自定义加载页面，只要利用display的none和block结合请求的状态变化就可以实现

⑤案例：

<?php
    //test.php服务端文件
    //接收用户端提交的用户名和密码
    if(empty($_POST['username']) || empty($_POST['password'])){
        exit('请提交用户名和密码');
    }
    //校验
    $username=$_POST['username'];
    $password=$_POST['password'];
    if($username==='admin' && $password='123'){
        exit('登录成功');
    }
    exit('用户名或者密码错误');
?>

<body>
    <table border="1">
        <tr>
            <td>用户名</td>
            <td><input type="text" name="username" id="username"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="password" id="password"></td>
        </tr>
        <tr>
            <td></td>
            <td><button type="submit" id="btn">登录</button></td>
        </tr>
    </table>
    <script>
        //声明变量
        var btn=document.getElementById("btn");
        var txtUsername=document.getElementById("username");
        var txtPassword=document.getElementById("password");
        //为btn注册点击事件
        btn.onclick=function(){
            //获取用户填入的值
            var username=txtUsername.value;
            var password=txtPassword.value;
            //通过xhr发送一个POST请求
            var xhr=new XMLHttpRequest();
            xhr.open('POST','http://localhost/test.php');
            //设置请求头的格式,与请求体urlencoded的格式对应
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            //设置请求体,格式为urlencoded,注意`{}`这样的写法
            xhr.send(`username=${username}&password=${password}`);
            //根据服务端的反馈,作出页面提示
            xhr.onreadystatechange=function(){
                if(this.readyState!==4) return;
                console.log(this.responseText);
            }
        }</script>
</body>

三、同步和异步

①概念

同步可以理解为一个人在同一时刻只能做一件事情，在执行一些耗时的操作（不需要看管）不去做其他的事，只是等待。同步的思想是：所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，界面就不动了，但是程序还在执行，卡死了的感觉）。这种情况下，用户不能关闭界面，如果关闭了，即迁移程序就中断了。
异步可以理解为在执行一些耗时的操作时（不需要看管）去做别的事，而不是等待。将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉，会告诉你，你的请求系统已经响应了。你可以关闭界面了。

②设置：open（）方法第三个参数是传入一个bool值，其作用就是设置此次请求是否采用异步方式执行，默认为true，如果需要同步执行可以通过传递false实现

<script>
        console.log('before ajax');
        var xhr=new XMLHttpRequest();
        xhr.open('GET','http://localhost/test.php',true);
        xhr.send(null);
        xhr.onreadystatechange=function(){
            if(this.readyState===4){
                console.log('加载完成');
            }
        }
        console.log('after ajax');
        //控制台输出:
        //before ajax
        //after ajax
        //加载完成
    </script>

<script>
        var xhr=new XMLHttpRequest();
        xhr.open('GET','http://localhost/test.php',false);
        //同步方式执行会在send()发送请求以后等待一段时间,直到readyState为4才会继续往下执行代码
        xhr.send(null);
        //所以不需要注册事件,就可以拿到数据了，或者如果需要注册事件，一定需要在send方法调用之前注册事件，否则无法触发
         console.log(xhr.readyState);//4
        // xhr.onreadystatechange=function(){
        //     if(this.readyState===4){
        //         console.log('加载完成');
        //     }
        // }
        console.log(xhr.responseText);//1529918265
        //并且控制台会提醒这种方式会导致用户体验不佳:
        //[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.
    </script>

③结论：

同步，是所有的操作都做完，才返回给用户结果。即写完数据库之后，在相应用户，用户体验不好。
异步，不用等所有操作等做完，就相应用户请求。即先相应用户请求，然后慢慢去写数据库，用户体验较好。

四、响应数据类型

如果服务端返回的各种格式的数据，这种格式的数据都需要在客户端使用JavaScript解析
XML是一种数据描述手段，由于数据冗杂太多，现在基本被淘汰

<?xml version="1.0" encoding="utf-8" ?>
<users>
  <user>
    <username>张三</username>
    <age>23</age>
  </user>
  <user>
    <username>李四</username>
    <age>24</age>
  </user>
</users>

<script>
        var xhr=new XMLHttpRequest();
        xhr.open('GET','user.xml');
        xhr.send();
        xhr.onreadystatechange=function(){
            if(this.readyState!==4) return;
            var name1=this.responseXML.documentElement.getElementsByTagName("username")[0].innerHTML;
            var age1=this.responseXML.documentElement.getElementsByTagName("age")[0].innerHTML;
            console.log(name1+":"+age1);//张三:23
        }
    </script>

JSON也是一种数据描述手段，类似于JavaScript字面量方式，服务端采用JSON格式返回数据，客户端按照JSON格式解析数据

[
    { "username" : "张三", "age" : 23},
    { "username" : "李四", "age" : 24}
]

<script>
        var xhr=new XMLHttpRequest();
        xhr.open('GET','user.json');
        xhr.send();
        xhr.onreadystatechange=function(){
            if(this.readyState!==4) return;
            var obj=JSON.parse(this.responseText);
            var name2=obj[1].username;
            var age2=obj[1].age;
            console.log(name2+":"+age2);//李四:24
        }
    </script>

不管服务端采用的是XML格式的数据还是JSON格式的数据，本质上都是将数据返回给客户端
服务端应该设置一个合理的Content-Type

五、其他

①response获取到的结果会根据responseType的变化而变化,而responseText永远获取的都是字符串形式的响应体

<script>
       var xhr=new XMLHttpRequest();
       xhr.open('GET','test.php');
       xhr.send();
       //responseType还允许作者将响应类型更改为一个"arraybuffer", "blob", "document", "json", 或 "text" 。
       //如果将一个空字符串设置为responseType的值，则将其假定为类型“text”,即 "" 等效于 "text";
       //兼容性不是很好,推荐使用responseText
       xhr.responseType='';
       xhr.onreadystatechange=function(){
           if(this.readyState!==4) return;
           console.log(this.response);
       }
    </script>

②兼容方案：XMLHttpReuquest在老版本浏览器(IE5/6)中有兼容问题，可以通过另外一种方式代替

 //兼容IE5/6
        var xhr=window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");

③补充：Chrome中控制台展开被打印的对象时，会访问即时的数据

<script>
        var obj={foo:123};
        console.log(obj);
        setTimeout(function(){
            obj.foo=456;
            console.log(obj);
        },3000)
        //说明:
        //打开控制台,如果先打开{foo: 123},还未出现{foo: 456},看到的前面foo的值是123,后面foo的值是456;
        //打开控制台,如果{foo: 123}和{foo: 456}都已经显示,打开任何一个看到的值都是456
    </script>

一、GET请求

二、POST请求

三、同步和异步

四、响应数据类型

五、其他

猜你喜欢