对于原生的ajax的书写和理解

一，ajax

ajax是一种异步请求数据的web开发技术，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。

二，实现原理

ajax请求的数据的流程

1. 浏览器获取浏览器提供的对象xhr
2. xhr向服务器请求数据
3. 服务器返回数据给xhr
4. xhr提示给浏览器数据返回
5. 浏览器通过返回的数据渲染网页

三，状态码

• 1XX：信息性状态码，表示接收的请求正在处理
• 2XX：成功状态码，表示请求正常处理
• 3XX：重定向状态码，表示需要附加操作来完成请求
• 4XX：客户端错误状态码，表示服务器无法处理请求
• 5XX：服务器错误状态码，表示服务器处理请求出错

get和post的区别

1. 在理论上，get是获取数据，post是发送数据
2. get和post两个之间有个明显的区别就是在URL可见和不可见，还有长度问题
3. get和post相比，get请求的数据安全相对于差一些
4. get的参数会保存到浏览器中，而post不会保存到浏览器中

原生实现ajax

 document.querySelector('[type = "button"]').onclick = function(){
    var pname = document.querySelector('[type = "text"]').value;
    var ppad = document.querySelector('[type = "password"]').value;
    //非空判断
    if(pname == '' || ppad == ''){
        return;
    }
    // XMLHttpRequest对象用于在后台与服务器交换数据
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        // readyState == 4说明请求已完成 状态码为200表示请求正常处理
        if(xhr.readyState == 4 || xhr.status == 200){
            callback(xhr);
            if(pname != '' && ppad != ''){
            document.querySelector('[type = "button"]').value = '登录成功';
            document.querySelector('[type = "button"]').style.color = 'green';
        }
        }
    }
    // 设置 方法 以及 url
    xhr.open('POST', '06.09text.php');
    //设置请求报文
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // send
    xhr.send(`pname=${pname}&ppad=${ppad}`);
    }
    function callback(xhr){
        var divs = document.getElementsByClassName('divs')[0];
        divs.innerHTML = xhr.responseText;
        divs.style.display = 'block';
    }