Ajax基础

##1.Ajax的实现步骤
###1.1 创建Ajax对象

var xhr = new XMLHttpRequest();

###1.2 告诉Ajax请求地址以及请求方式

xhr.open('get','http://www.example.com')

###1.3 发送请求

xhr.send()

###1.4 获取服务器端给客户端的响应数据

xhr.onload = function() {
    console.log(xhr.responseText);
}

##2.服务器端响应的数据格式

• 在真实的项目中，服务器端大多数情况下会以JSON对象作为响应数据的格式。当客户端拿到响应数据时，要将JSON数据和HTML字符串进行拼接，然后将拼接的结果展示在页面中。
• 在http请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为字符串进行传输

JSON.parse()//将json字符串转换为json对象

##3.请求参数传递
###3.1 传统网站表单提交

<form method="get" action="http://www.example.com">
    <input type = "text" name="username">
    <input type = "password" name="password">
</form>
<!--http://www.example.com?name=zhangsan&password=12345-->

###3.2 Get请求方式

xhr.open('get','http://www.example.com?name=zhangsan&password=12345');

<form action="">
        <input type="text" name="username" id="username">
        <input type="password" name="pssword" id="password">
        <input type="button" id="button" value="提交">
</form>
<script>
        var btn = document.getElementById('button'),
            user = document.getElementById('username'),
            psd = document.getElementById('password');
        btn.onclick = function() {
            var xhr = new XMLHttpRequest(),
                userN = user.value,
                psD = psd.value,
                params = 'username' + userN + '&password' + psD;

            xhr.open('get','http://localhost:3000/get?' + params);

            xhr.send();

            xhr.onload =function() {
                console.log(xhr.responseText);
            }
        }
</script>

###3.3 POST请求方式

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send('name=zhangsan&password=12345')

<form action="">
        <input type="text" name="username" id="username">
        <input type="password" name="pssword" id="password">
        <input type="button" id="button" value="提交">
</form>
<script>
        var btn = document.getElementById('button'),
            user = document.getElementById('username'),
            psd = document.getElementById('password');
        btn.onclick = function() {
            var xhr = new XMLHttpRequest(),
                userN = user.value,
                psD = psd.value,
                params = 'username=' + userN + '&password=' + psD;

            xhr.open('post','http://localhost:3000/post');

            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

            xhr.send(params);

            xhr.onload =function() {
                console.log(xhr.responseText);
            }
        }
</script>

###3.4 请求参数的格式

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

1.application/x-www-form-urlencoded

name=zhangsan&age=20&sex=male

2.application/json

xhr.setRequestHeader('Content-Type','application/json')

{name:'zhangsan',age:20,sex:'male'}

在请求头中指定Content-Type属性的值是application/json，告诉服务器当前的请求格式是json

JSON.stringify();//将json字符串转换为json对象

##4.AJAX错误处理

• 网络畅通，服务器端能够接收到请求，服务器端返回的结果不是预期结果
  -可以判断服务器端返回的状态码，分别进行处理。xhr.status获取http状态码

if(xhr.status == 400) {
                   alert('error')
   }

• 网络畅通，服务器端没有接收到请求，返回404状态码
  -检查请求地址是否错误

• 网络畅通，服务器端能够接收到请求，服务器返回500状态码
  -服务器端错误

• 网络中断、请求无法发送到服务器端
  -会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理

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

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

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

##6.Ajax封装
问题：发送一次请求代码过多，发送多次请求代码冗余且重复
解决方案：将请求代码封装到函数中，发送请求时调用函数即可

const ajax = options => {
            //存储的默认值
            var defaults = {
                type: 'get',
                url: '',
                data: {},
                header: {
                    'Content-Type': 'application/json'
                },
                success: function() {},
                error: function() {}
            }
            //对象覆盖
            Object.assign(defaults,options);

            //创建ajax对象
            var xhr = new XMLHttpRequest();
            //拼接传递参数
            var params = '';
            for(var attr in defaults.data) {
                params += attr + '=' + defaults.data[attr] + '&';
            }

            //将&截取掉
            params = params.substr(0,params.length - 1);

            //判断请求方式
            if(defaults.type == 'get') {
                defaults.url = defaults.url + '?' + params;
            }
            //配置ajax对象
            xhr.open(defaults.type,defaults.url);

            //发送请求
            //如果请求方式为post
            if(defaults.type == 'post') {
                var contentType = defaults.header['Content-Type'];
                //设置参数格式类型
                xhr.setRequestHeader('Content-Type', contentType);
                if(contentType == 'application/json') {
                    xhr.send(JSON.stringify(defaults.data));
                } else {
                    xhr.send(params);
                }
            } else {
                xhr.send();
            }

            //监听xhr对象下面的onload事件
            xhr.onload = function() {
                //获取响应头中的数据
                var contentType = xhr.getResponseHeader('Content-Type');
                var responseText = xhr.responseText;
                if(contentType.includes('application/json')) {
                    responseText = JSON.parse(responseText);
                }

                if(xhr.status == 200){
                    //http状态码等于200成功
                    defaults.success(responseText,xhr);
                } else {
                    //失败
                    defaults.error(responseText,xhr);
                }
            }
        }