Ajax-GET请求

Ajax的意思是：异步JavaScript和XML。

通俗的理解：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax。

Ajax能让我们轻松实现网页与服务器之间的数据交互。

Ajax的底层实现主要是用到浏览器中提供的XMLHttpRequest对象用法比较复杂，所以jQuery对XMLHttpRequest进行了封装提供了一系列Ajax相关的函数，极大降低了Ajax的使用难度。

Ajax最常用的请求服务器方式有GET和POST两种。

GET 请求服务器方式常用于获取服务器数据，而 POST 请求服务器方式常用于向服务器发送数据，可携带参数量较大。本文主要介绍Ajax中的GET数据请求的原生底层写法和jQuery封装后的用法。

使用XMLHttpRequest发起GET请求

使用XMLHttpRequest（简称：xhr）发起GET请求主要分四步：

1.创建XMLHttpRequest对象；

2.调用open函数，指定请求方式与URL地址；

3.调用send函数，发起Ajax请求；

4.监听 onreadystatechange 事件。

<script>
        // 1.创建 XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        // 2.调用open函数，指定请求方式与URL地址
        xhr.open('GET', 'http://XXX');
        // 3.调用send函数，发起Ajax请求
        xhr.send();
        // 4.监听 onreadystatechange 事件
        xhr.onreadystatechange = function () {
            // 4.1监听xhr对象的请求状态readyState与服务器响应的状态status
            if(xhr.readyState === 4 && xhr.status === 200) {  // if里面的判断条件是固定写法
                // 4.2打印服务器响应回来的数据
                console.log(xhr.responseText);
            }
        }

</script>

注意：GET请求也分带参数和不带参数的请求方式（以上代码示例为不带参数），若需要携带参数则将参数使用 ?参数属性1=参数值&参数属性2=参数值2... 的方式拼接到open函数中的URL地址值后即可。如：

// 第二步调用open函数，指定请求方式和URL地址并在URL地址用?后跟键值对形式携带参数多个参数间用&隔开
xhr.open('GET','http://xxx?id=1&name=zhangsan');

监听 onreadystatechange 事件时函数中的if判断是固定写法，而返回值xhr.responseText是JSON字符串格式的，所以一般为了方便后续对返回的数据进行处理，这里可以使用JSON.parse()进行反序列化操作将字符串转换为对象格式。

ps：将对象转换为JSON字符串——JSON.stringify()-这个把对象转换为字符串的操作也叫序列化操作

使用jQuery发起GET请求

1.发起不带参数的GET请求

<script>
        // 入口函数
        $(function () {
            // 直接调用$.get(URL, [data], [callback])发起GET请求
            $.get('http://XXX', function(res) {
                console.log(res);
            })
        })
</script>

2.发起带参数的GET请求

<script>
        // 入口函数
        $(function () {
            // 直接调用$.get(URL, [data], [callback])发起GET请求
            $.get('http://XXX',{id: 1}, function(res) {
                console.log(res);
            })
        })
</script>

带参数的数据请求就是将参数以对象形式写到 $.get(URL, [data], [callback]) [data]的位置，多个参数之间用英文逗号分隔即可。注意$.get()中的三个参数只有URL是必选的，data和callback都是可选的。而回调函数中返回的res是对象类型的数据，很方便后续的处理。

下一篇：Ajax-POST请求