前端获取数据常见的几种方法

1.原生获取ajax

<script>
        // 1. 创建xhr，是一个请求对象，用来向服务器端发送各种请求
        var xhr = new XMLHttpRequest();

        // 在放送请求之前，必须建立连接。
        // 2. open()打开连接，参数1：请求方式，不区分大小写。参数2：请求的地址，请求的服务器所在的位置。
        var url = "book.xml";
        xhr.open("GET", url);

        // 3. 开始请求，发送请求。参数：携带的数据
        xhr.send();

        // 4. 监听服务器状态变化。在状态发生变化时执行。相应的一个“摄像头”
        // 可以在创建了xhr对象后监听。
        xhr.onreadystatechange = function () {
            // xhr.readyState === 4表示数据已经传递过来。客户端可以使用了。
            // xhr.status === 200 http状态码为200, 请求已成功
            if (xhr.readyState === 4 && xhr.status === 200) {
                // 5. 接收并使用数据  
                // response响应：站在服务器的角度。服务器给客户端响应。
                // request请求：站在客户端的角度。客户端向服务器请求。
                // xhr.response返回任意类型。
                 console.log(xhr.response);

                // xhr.responseText返回字符串。（掌握）
                 console.log(xhr.responseText);
				
			 	// 把字符串解析成js对象，序列化
                var obj = JSON.parse(xhr.responseText);
                console.log(obj)
                
                // xhr.responseType获取返回类型
                 console.log(xhr.responseType);

                // 响应的URL，本质上就是服务器上数据的地址。
                 console.log(xhr.responseURL);
                
                // 返回xml格式的文本。（掌握）
                console.log(xhr.responseXML);

            }
        } 
       
    </script>

原理

首先，XMLHttpRequest构造函数通过new的方式构造一个XHR对象，并将这个对象赋值给xhr（可取任意名字）

然后，调用XMLHttpRequest对象的方法open与send。

调用send方法之后请求被发往服务器，由于这次请求是同步的，JS代码会在xhr.send()这个步骤暂停掉，一直等到服务器根据请求生成响应（Response），传回给XHR对象，再继续执行。

最后，在收到响应后相应数据会填充到XHR对象的属性。

有四个相关属性会被填充：
1、responseText —— 从服务器进程作为响应主体被返回的文本。
2、responseXML —— 从服务器进程返回的DOM兼容的文档数据对象。
3、status —— 响应的HTTP状态。即从服务器返回的数字代码，如404（未找到）和200（已就绪）。
4、statusText —— HTTP状态的说明。伴随状态码的字符串信息。

2.依赖jquery的三种方法

箭头函数不懂的可以参考如下代码