初识ajax

初识ajax

简单概括，一种能让页面局部刷新而不刷新整个页面的技术，又因为它与服务器中交换数据是异步的，而不会对整个页面资源的加载造成阻塞。

一个简单的例子

首先在本地创建一个person_info.json文件，用于ajax获取资源

[
	{
		"name":"安妮",
		"age":"14",
		"sex":"女"
	},
	{
		"name":"奥巴马",
		"age":"18",
		"sex":"男"
	},
	{
		"name":"寒冰",
		"age":"16",
		"sex":"女"
	}
]

然后是html,代码如下：

<script>
        // 1.初始化一个手机 状态值0
        const xhr = new XMLHttpRequest();
        // 2.打开软件 选择什么商铺里的什么菜
        // 请求方式，请求地址 (这里请求的是本地的资源 只能用get)
        xhr.open('get', './person_info.json');
        // 3.发送订单信息
        xhr.send();
        // 4.监控外卖员配送情况 异步行为
        xhr.addEventListener('readystatechange', () => {
            // console.log(xhr);
            // 数据已经解析完毕 可用的状态了 
            // 状态值 表示请求体的状态
            if (xhr.readyState == 4) {
                console.log(xhr);
                // switch (xhr.status) {
                //     case '200':

                //     case '404':

                //     case '500':
                // }
                // 状态码 200->成功
                if (xhr.status === 200) {
                    console.log(xhr.response);
                    console.log(typeof (xhr.response));
                    console.log(JSON.parse(xhr.response));
                    // JSON.parse();string->数组或对象(看string的外观形式)
                    // JSON.stringify();数组或对象->string
                    // xhr.response.forEach(item=>{
                    //     console.log(item);
                    // });
                } else {
                    console.log('不是前端的锅');
                }
            }
        });
        console.log('后续的代码');
    </script>

在浏览器中输出结果如下，这里因为监控行为是异步的，所以在后续的代码之后输出

后续的代码
index.html:29 
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
index.html:39 [
	{
		"name":"安妮",
		"age":"14",
		"sex":"女"
	},
	{
		"name":"奥巴马",
		"age":"18",
		"sex":"男"
	},
	{
		"name":"寒冰",
		"age":"16",
		"sex":"女"
	}
]
index.html:40 string
index.html:41 
(3) [{…}, {…}, {…}]
0: {name: '安妮', age: '14', sex: '女'}
1: {name: '奥巴马', age: '18', sex: '男'}
2: {name: '寒冰', age: '16', sex: '女'}
length: 3
[[Prototype]]: Array(0)