Ajax

Ajax 是什么？有什么作用？

• XML 被设计用来传输和存储数据，其焦点是数据的内容(旨在传输信息)。HTML 被设计用来显示数据，其焦点是数据的外观(旨在显示信息)。
  XML 是独立于软件和硬件的信息传输工具。
• Ajax是Asynchronous JavaScript And XML的缩写，即异步的JavaScript和XML。
  这一技术能够向服务器请求额外的数据，而不是卸载整个页面。
  HTTP请求流程如下：
  1.浏览器向服务器发送请求；
  2.服务器接受请求并生成response；
  3.服务器将response返回给浏览器；
  4.浏览器刷新整个页面来显示新的数据；
  整个请求流程是同步的，顺序执行的。
  而Ajax是一部执行的，就是脱离当前的页面请求、加载等单独执行，通过JavaScript单独发送请求，获得服务器返回的新数据，通过操作DOM改变页面局部内容，而不会重新加载整个页面，带来良好的用户体验
  Ajax的get || post：
  • 与post相比，get更简单也更快，并且在大部分浏览器下都能用，然而在一下情况中，应当使用post请求：
    1. 无法使用缓存文件(更新服务器上的文件或数据库)
    2. 向服务器发送大量数据(post没有数据量限制)
    3. 发送包含位置字符的用户输入时，post比get更稳定也更可靠

基础示例：

<div id="mydiv">你的名字</div>
<button id="btn">修改内容</button>


<script type="text/javascript" language="javascript">
    document.getElementById('btn').addEventListener('click', function () {
        var XMLHttp = new XMLHttpRequest();
        XMLHttp.onreadystatechange = function () {
            if (XMLHttp.readyState === 4 && XMLHttp.status === 200) {
                dealwith();
            }
        }

        XMLHttp.open('GET', './text.php', true);
        XMLHttp.send();
    })

    function dealwith() {
        document.getElementById('mydiv').innerHTML = XMLHttp.responseText;
    }

AJAX封装

    document.querySelector('#btn').addEventListener('click', function(){
        ajax({
            url: '/login',   //接口地址
            type: 'get',               // 类型， post 或者 get,
            data: {
                username: 'xiaoming',
                password: 'abcd1234'
            },
            success: function(ret){
                console.log(ret);       // {status: 0}
            },
            error: function(){
               console.log('出错了')
            }
        })
    });

        function ajax(opts){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4 && xhr.status === 200){
                    var aa = JSON.parse(xmlhttp.responseText);
                    opts.success(aa);
                }else if(xhr.readyState === 4 && xhr.status !== 200){
                    opts.error();
                }
            }

            var dataStr = '';
            for(var key in opts.data){
                dataStr = dataStr + key + '=' + opts.data[key] + '&'
            }
            dataStr = dataStr.substring(0, dataStr.length-1)
            
            if(opts.type.toLowerCase() === 'get'){
                xhr.open(opts.type, opts.url + '?' + dataStr, true);
                xhr.send();
            }
            if(opts.type.toLowerCase() === 'post'){
                xhr.open(opts.type, opts.url, true);
                xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                xhr.send(dataStr);
            }
        }