AJAX簡介：

AJAX(Asynchronous JavaScript and XML):異步的JavaScript和XML

AJAX不是新的編程語言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法

AJAX最大的優(yōu)點(diǎn)是，在不加載整個(gè)頁面的情況下，實(shí)現(xiàn)與服務(wù)器交換數(shù)據(jù)，并更新網(wǎng)頁的局部內(nèi)容

我們都知道submit的Form表單的提交方式，但是這種提交方式的缺點(diǎn)也是很大的，因?yàn)樗峤粫r(shí)，刷新整個(gè)網(wǎng)頁。所以我們就有了AJAX。

timg.jpeg

XHR創(chuàng)建對象：

XMLHttpRequest對象用于在后臺與服務(wù)器交換數(shù)據(jù)

創(chuàng)建XMLHttpRequest對象

 var xmlhttp = new XMLHttpReques();

XMLHttpRequest對象的方法和屬性：

方法：

• open("數(shù)據(jù)的提交方式","數(shù)據(jù)提交的地址","同步或者異步");
• send("要提交的數(shù)據(jù)");
  屬性：
• readyStatus：0-初始狀態(tài) 1-創(chuàng)建連接 2-向服務(wù)端發(fā)送數(shù)據(jù) 3-服務(wù)端返回?cái)?shù)據(jù) 4-數(shù)據(jù)接收完畢
• responseText("服務(wù)器返回的數(shù)據(jù)");
  事件：
• onreadystatechange：當(dāng)xhr狀態(tài)發(fā)生變化的時(shí)候會執(zhí)行
• onload：數(shù)據(jù)接收完畢后執(zhí)行

模擬表單提交：FormData

var formdata = new FormData();

方法：append("傳給后臺的參數(shù)名","參數(shù)值")；第二個(gè)值如果是文件的話 需要傳的是ele.files[0];

比如做個(gè)訂菜單的模擬前后臺的數(shù)據(jù)交互：

大概的流程是：后臺從數(shù)據(jù)庫里面拿到所有的菜單，然后傳到前臺，前臺接收數(shù)據(jù)之后，把json傳轉(zhuǎn)換為數(shù)組，遍歷，動態(tài)生成相對應(yīng)的菜單頁面，當(dāng)用戶選擇菜品輸入份數(shù)，點(diǎn)擊提交之后，前臺向后臺發(fā)送用戶的選擇菜品的數(shù)據(jù)，后臺拿到數(shù)據(jù)以后，經(jīng)過處理，返回給前臺。

效果的實(shí)現(xiàn)

前臺的代碼：

<form method="post" style="width: 320px;margin:100px auto;">
    <div style="text-align: center; font-size: 30px; margin-bottom:20px;">麗德快餐廳</div>
    <div id="show"></div>
    <input type="button" value="立即訂餐" id="btn">
</form>
<script>
    var form = document.getElementsByTagName("form")[0];
    var btn = document.getElementById("btn");
    var div1=document.getElementById('show');

    var xhr = new XMLHttpRequest();
    var formData = new FormData();
    formData.append("action","getmenu");
    xhr.open("post","menudata.php",true);
    xhr.send(formData);
    xhr.onload = function(){
        var jsonstr = JSON.parse(this.responseText);
        for(i in jsonstr){
            var div = document.createElement('div');
            div.className = "menu";
            div.innerHTML = ""+jsonstr[i][0]+"<input type='checkbox' name='key[]' value="+i+"/> "+jsonstr[i][1]+"元 訂餐份數(shù) <input type='text' name='amount_"+jsonstr[i][2]+"'/>"
            form.insertBefore(div,btn);
        }
    }
    
    btn.onclick = function(){
        var menuList = document.getElementsByClassName('menu');
//          console.log(menuList);
            //選中的checkbox傳到后臺
            var keyarr =[];
//          var namearr = [];
            var countarr = [];
            for(var i=0;i<menuList.length;i++){
                if(menuList[i].children[0].checked==true){
                    keyarr.push(i);
//                  namearr.push(menuList[i].childNodes[0].data);
                    countarr.push(menuList[i].children[1].value);
                }
            }
//          console.log(keyarr,countarr);
            //得到被選中的checkbox 形式是0,1
            var keystr = keyarr.join(",");
//          var namestr = namearr.join(",");
            var countstr = countarr.join(",");
//          console.log(keystr,namestr,countstr);
            
            var xhr1 = new XMLHttpRequest();
            var formData1 = new FormData();
            formData1.append("check","list");
            formData1.append("key",keystr);
//          formData1.append("name",namestr);
            formData1.append("count",countstr);
            xhr1.open("post","menudata.php",true);
            xhr1.send(formData1);
            xhr1.onload = function(){
                var totalPrice=0;
                var jsonstr1 = JSON.parse(this.responseText);
                div1.innerHTML = "您選擇的是：<br/>";
                for(i in jsonstr1){
                    div1.innerHTML += jsonstr1[i].name+jsonstr1[i].amount+"份 價(jià)格為："+jsonstr1[i].price+"元<br>";
                    totalPrice+=jsonstr1[i].price;
                }
                div1.innerHTML+="總價(jià)為:"+totalPrice+"元";
//              console.log(jsonstr1);
            }
        }
    
    
</script>

后臺的代碼：

<?php

$fp = fopen("menu.txt","r");
while(!feof($fp)){
    $line = fgets($fp);
    $array = explode(" ",$line);
    if(!empty($array[0])){
        $menu[] = $array;       
    }
}


//如果用戶提交了數(shù)據(jù)
if(!empty($_POST)) {
    if(!empty($_POST['action'])&&$_POST['action']=="getmenu"){
        echo json_encode($menu);
        exit;
    }
    if($_POST['check']=="list"){
        $userSelected = array();
        $totalPrice = 0;
//      $name = explode(",",$_POST['name']);
        $keys = explode(",",$_POST['key']);
        $count = explode(",",$_POST['count']);
        foreach($keys as $key=>$val){
            //菜名
            $userSelected[$key]['name'] = $menu[$val][0];
            //份數(shù)
            $userSelected[$key]['amount'] = $count[$key];
            //價(jià)格=單價(jià)*份數(shù)
            $userSelected[$key]['price'] = $menu[$val][1] * $count[$key];
            //總價(jià)格
            $totalPrice += $userSelected[$key]['price'];
        }
        recordMenu($userSelected);  
        echo json_encode($userSelected);
        exit;
    }
}
function recordMenu($userSelected){
    $line="";
    foreach($userSelected as $key => $val) {
        $line .= "|".$val['name'].",".$val['amount'].",".$val['price']."|";
    }
    $line .="\n";
    $fp = fopen("record.txt", "a+");
    fwrite($fp, $line);
    fclose($fp);
}
?>