Ajax使用 & FormData对象的使用&同源概念

Ajax 概述

是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验
Ajax 应用场景

1. 页面上拉加载更多数据
2. 列表数据无刷新分页
3. 表单项离开焦点数据验证
4. 搜索框提示文字下拉列表

Ajax 运行流程

Ajax实现步骤

		//1.创建Ajax对象
        let xhr = new XMLHttpRequest();

        //2.调用open方法（请求方式，请求地址）
        xhr.open('get', 'http://localhost:3000/first');

        //3.调用send方法，发送请求
        xhr.send();

        //4.注册load事件，获取服务端响应到客户端的数据
        xhr.onload = function() {
   
            console.log(xhr.responseText);

        }
		//另一种获取服务端响应到客户端数据的方法,onreadystatechange 事件 当 Ajax 状态码发生变化时将自动触发该事件
		xhr.onreadystatechange = function() {
   
			// 0 已经创建了ajax对象 但是还没有对ajax对象进行配置
			// 1 已经对ajax对象进行配置 但是还没有发送请求
			// 2 请求已经发送了
			// 3 已经接收到服务器端的部分数据了
			// 4 服务器端的响应数据已经接收完成
			console.log(xhr.readyState);
			// 对ajax状态码进行判断 如果状态码的值为4就代表数据已经接收完成了
			if (xhr.readyState == 4) {
   
				console.log(xhr.responseText);
			}
		} 

		// 当网络中断时会触发onerrr事件
			xhr.onerror = function () {
   
				alert('网络中断, 无法发送Ajax请求')
			}

get请求方式参数的传递

		var xhr = new XMLHttpRequest();

        var params = 'username=' + username.value + '&age=' + age.value;

        xhr.open('get', 'http://localhost:3000/get?' + params);
        xhr.send();
        xhr.onload = function() {
   
            console.log(xhr.responseText);

        }

post请求方式参数的传递

		var xhr = new XMLHttpRequest();

        var params = 'username=' + username.value + '&age=' + age.value;
        console.log(params);

        xhr.open('post', 'http://localhost:3000/post');
        //post方式必须要配置请求报文的类型
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        //post方式发送请求时需要在send方法中传递参数
        xhr.send(params);
        xhr.onload = function() {
   
            console.log(xhr.responseText);

        }

JSON格式参数的传递

	var xhr = new XMLHttpRequest();

        var params = {
   
            name: username.value,
            a: age.value
        }
        console.log(params);
		//get方式不能发送json格式的数据，传统的表单提交也不支持json格式的数据
        xhr.open('post', 'http://localhost:3000/json');
        //JSON格式参数必须要设置请求报文的类型为json
        // 注意：get 请求是不能提交 json 对象数据格式的，传统网站的表单提交也是不支持 json 对象数据格式的。
        xhr.setRequestHeader('Content-Type', 'application/json');
        //send方式只接受字符串格式的参数
        xhr.send(JSON.stringify(params));
        xhr.onload = function() {
   
            console.log(xhr.responseText);

        }

低版本 IE 浏览器的缓存问题

问题：在低版本的 IE 浏览器中，Ajax 请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了，客户端依然拿到的是缓存中的旧数据。

解决方案：在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同。

xhr.open('get', 'http://www.example.com?t=' + Math.random());

同步异步异步概念

同步

同一时间只能做一件事情，只有一件事情做完，才能做另外一件事情。
落实到代码中，就是上一行代码执行完成后，才能执行下一行代码，即代码逐行执行。
异步

一件事情做了一半，转而去做其他事情，当其他事情做完以后，再回过头来继续做之前未完成的事情。
落实到代码上，就是异步代码虽然需要花费时间去执行，但程序不会等待异步代码执行完成后再继续执行后续代码，而是直接执行后续代码，当后续代码执行完成后再回头看异步代码是否返回结果，如果已有返回结果，再调用事先准备好的回调函数处理异步代码执行的结果。

封装ajax函数

解决多次请求代码冗余重复

 function ajax(option) {
   
            //1.定义一个默认对象
            let defaultParam = {
   
                    type: 'get',
                    url: '',
                    data: {
   },
                    header: {
   
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    success: function() {
   },
                    error: function() {
   }

                }
            //2.用传递过来的参数对象覆盖默认对象
            Object.assign(defaultParam, option);
            //3.拼接请求参数
            let paramArr = [];
            for (let k in defaultParam.data) {
   
                paramArr.push(k + '=' + defaultParam.data[k]);
            }
            let params = paramArr.join('&');
            // console.log(params);
            //4.判断请求方式，如果是get方式需要将请求参数拼接到请求地址中
            if