Ajax 是什么？有什么作用？

• XML 被設(shè)計(jì)用來(lái)傳輸和存儲(chǔ)數(shù)據(jù)，其焦點(diǎn)是數(shù)據(jù)的內(nèi)容(旨在傳輸信息)。HTML 被設(shè)計(jì)用來(lái)顯示數(shù)據(jù)，其焦點(diǎn)是數(shù)據(jù)的外觀(旨在顯示信息)。
  XML 是獨(dú)立于軟件和硬件的信息傳輸工具。
• Ajax是Asynchronous JavaScript And XML的縮寫(xiě)，即異步的JavaScript和XML。
  這一技術(shù)能夠向服務(wù)器請(qǐng)求額外的數(shù)據(jù)，而不是卸載整個(gè)頁(yè)面。
  HTTP請(qǐng)求流程如下：
  1.瀏覽器向服務(wù)器發(fā)送請(qǐng)求；
  2.服務(wù)器接受請(qǐng)求并生成response；
  3.服務(wù)器將response返回給瀏覽器；
  4.瀏覽器刷新整個(gè)頁(yè)面來(lái)顯示新的數(shù)據(jù)；
  整個(gè)請(qǐng)求流程是同步的，順序執(zhí)行的。
  而Ajax是一部執(zhí)行的，就是脫離當(dāng)前的頁(yè)面請(qǐng)求、加載等單獨(dú)執(zhí)行，通過(guò)JavaScript單獨(dú)發(fā)送請(qǐng)求，獲得服務(wù)器返回的新數(shù)據(jù)，通過(guò)操作DOM改變頁(yè)面局部?jī)?nèi)容，而不會(huì)重新加載整個(gè)頁(yè)面，帶來(lái)良好的用戶(hù)體驗(yàn)
  Ajax的get || post：
  • 與post相比，get更簡(jiǎn)單也更快，并且在大部分瀏覽器下都能用，然而在一下情況中，應(yīng)當(dāng)使用post請(qǐng)求：
    1. 無(wú)法使用緩存文件(更新服務(wù)器上的文件或數(shù)據(jù)庫(kù))
    2. 向服務(wù)器發(fā)送大量數(shù)據(jù)(post沒(méi)有數(shù)據(jù)量限制)
    3. 發(fā)送包含位置字符的用戶(hù)輸入時(shí)，post比get更穩(wěn)定也更可靠

基礎(chǔ)示例：

<div id="mydiv">你的名字</div>
<button id="btn">修改內(nèi)容</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',               // 類(lèi)型， post 或者 get,
            data: {
                username: 'xiaoming',
                password: 'abcd1234'
            },
            success: function(ret){
                console.log(ret);       // {status: 0}
            },
            error: function(){
               console.log('出錯(cuò)了')
            }
        })
    });

        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);
            }
        }