我和Ajax的故事

我和Ajax結緣是在2015年的3月份，當時的項目需要Ajax技術來實現，但對於我來說完全是全新的名詞，自己就上網上查找相關資料，結局很明顯，知道概念但是具體的是什麼東西根本傻傻不明白，後來這個技術是一個後臺妹子弄好的，汗顏。

這裡面我回頭仔細分析了一下，最重要的就是自己不懂伺服器，記得當時剛剛到那家公司，總監讓我安裝Java運行環境，自己弄了一上午什麼都沒弄明白，別的小伙伴也沒弄明白；因為只有我使用蘋果電腦，自己剛剛買的，操作都不太明白，最後是總監給安裝的。

當時自己的前端技術只在HTML和CSS有大量的能量，在JS方面屬於會用現成東西，加上自己完全不懂伺服器，使得自己和Ajax拼殺了近8個月的時間才漸漸地停戰，轉變友好，自己一個人單打的日子即難受又難忘，現在Ajax已經成為我光芒的一部分了，所以打算寫一寫自己學習Ajax的方式方法，希望能給那些最初完全不懂的朋友一些啟示。

【伺服器環境的安裝】

不懂伺服器的同學可以不用懂也可以，知道放裡面運行就可以學習Ajax了

我推薦使用：XAMPP是最流行的PHP開發環境，直接一鍵安裝，方便快捷

對於XAMPP的文章和使用方式大家可以自己研究一下，耐得住心思，很好弄的

有了伺服器環境大家可以盡情的和Ajax玩耍了

先來個例子：順序為【CSS樣式】【HTML結構】【JAvascript/jQuery】【JSON數據】

<style>
body{margin:0;background:#f2f2f2;}
.ajax_box{border:solid 10px purple;padding:30px;margin:30px;}
.ajax_box .box{border:solid 1px black;padding:10px;overflow:hidden;margin:10px;}
.ajax_box .box div{float:left;width:25%;text-align:center;}
.ajax_btn{background:purple;color:#fff;height:50px;line-height:50px;margin:0 30px;text-align:center;font-size:20px;cursor:pointer;}
.ajax_btn:hover{opacity:.8;}
</style>

<div class="ajax_box">
    <div class="box">
        <div>姓名</div>
        <div>年齡</div>
        <div>性別</div>
        <div>格言</div>
    </div>
</div>
<div class="ajax_btn">點擊我進行Ajax請求數據</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
    $('.ajax_btn').on('click',function(){
        $.ajax({
            type:"GET",
            url:"ajax.json",
            success:function(data){
                $('.ajax_box').append('<div class="box">'+
                                      '   <div>'+data.ajax.name+'</div>'+
                                      '   <div>'+data.ajax.age+'</div>'+
                                      '   <div>'+data.ajax.sex+'</div>'+
                                      '   <div>'+data.ajax.maxim+'</div>'+
                                      '</div>');
            },
            error:function(xhr,errorText){
                console.log(errorText);
            }
        })
    })
})
</script>

{
    "ajax":{
        "name":"奔跑的蝸牛",
        "age":"27",
        "sex":"男",
        "maxim":"學習失敗，在失敗中成長"
    }
}

把我上面的代碼進行組裝，json數據放在同一個目錄下麵，把他們一起放在伺服器環境中View層，然後打開

頁面地址不能為 file:///Applications/XAMPP/xamppfiles/htdocs/dashboard/ajax/index.html

而應該是 http://localhost:8080/ajax/index.html，只用這樣才是運行伺服器端的頁面，上面的只是打開頁面，這是兩種概念

最終的結果就是，如上圖，每次點擊按鈕，上部分就會添加一行信息

Ajax在實際中也是這樣使用的，只是頁面相對複雜，再就是關於錯誤處理的問題，這個不同的後臺有不同的錯誤處理方式，大家工作時一起商量來弄，愉快開發；

這次的目的是，讓如當初我那樣的同學，儘快的感受Ajax的魅力，減少獨自探索的時間