雲端教學課程


Ajax基礎

「Asynchronous JavaScript and XML」
（非同步的JavaScript與XML技術）



本章必需要有的基礎：
MySQL、PHP、PDO、javascript、json、jQuery

What ajax ?

頁面不刷新，動態的載入資料。

http://www.9lessons.info/2008/08/jquery-ajax-and-php-projects-9lessons.html

用在搜尋


http://www.9lessons.info/2009/06/autosuggestion-with-jquery-ajax-and-php.html

XML與JSON資料格式比較

http://www.auroraedialliance.com/blog/bid/184388/Part-1-The-What-Why-and-How-of-JSON-for-EDI-Integration-Specialists

錯誤寫法

 <?php echo '{"內容":"' . $data . '"}';
會引法的問題，輕則JSON斷行格式錯誤
 {'內容':'這是很正常的第一段。
第二段之我斷行了阿阿阿阿阿!!!!'}
{"\u5167\u5bb9":"\u9019\u662f\u5f88\u6b63\u5e38\u7684\u7b2c\u4e00\u6bb5\u3002\r\n\u6211\u65b7\u884c\u4e86\u963f\u963f\u963f\u963f\u963f!!!!\r\n"}
更嚴重一點

http://blog.gslin.org/archives/2014/01/06/4071/

正確寫法，JSON不要自己組

用函式並將特殊字元全轉成hex、送header
<?php
header('Content-Type: application/json; charset=utf-8');//記得送檔案格式、編碼
$data = array(
　　　　　　　　'Contacts' => array(
　　　　　　　　　　　　　　　　　　　array(
　　　　　　　　　　　　　　　　　　　　　　　'FirstName'　=>　'lai',
　　　　　　　　　　　　　　　　　　　　　　　'Name'　　　　=>　'jackai',
　　　　　　　　　　　　　　　　　　　　　　　'age'　　　　　=>　18
　　　　　　　　　　　　　　　　　　　　　　　),
　　　　　　　　　　　　　　　　　　　array(
　　　　　　　　　　　　　　　　　　　　　　　'FirstName'　=>　"</script><script>alert('hacked');//'",
　　　　　　　　　　　　　　　　　　　　　　　'Name'　　　　=>　'def',
　　　　　　　　　　　　　　　　　　　　　　　'age'　　　　　=>　15
　　　　　　　　　　　　　　　　　　　　　　　)
　　　　　　　　　　　　　　　　　　　)
　　　　　　　　　);

echo json_encode( $data ,JSON_HEX_TAG);//編碼輸出，轉換特殊字元成16進制

練習：用PHP產生JSON

{
    "Contacts": [
        {
            "FirstName": "lai",
            "Name": "jackai",
            "age": 18
        },
        {
            "FirstName": "abc",
            "Name": "def",
            "age": 15
        },
        {
            "FirstName": "姓",
            "Name": "名字",
            "age": 99　　　　　}
    ]
}
可以用jsonlint把json解回來看：http://jsonlint.com/

jQuery Ajax接收資料

  1. 引入jQuery Library
     <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  2. 執行Ajax撈資料..........................................................
    <script type="text/javascript">
function ajax_data(){
　　$.ajax({
　　　　　　url:'json.php',
　　　　　　dataType:"json",
　　　　　　success: function(data){
　　　　　　　　　　　　　console.log(data);
　　　　　　　　　　　}
　　});
}
</script>
<button onclick="ajax_data();">ajax資料</button>

Ajax - POST/GET

如果沒設type，預設會用GET傳參數。
GET參數可能有保留字的解法：encodeURIComponent(str)
 
<script type="text/javascript">
function ajax_data(){
　　$.ajax({
　　　　　　　url:'json.php?action=action_value',
　　　　　　　data:{
　　　　　　　　　'test':'test_value',
　　　　　　　　　'number_value':123
　　　　　　　},
　　　　　　　type:"POST",
　　　　　　　dataType:"json",
　　　　　　　success: function(data){
　　　　　　　　　　　　　　console.log(data);
　　　　　　　}
　　});
}
</script>

重要資料一定要用POST再回傳

json hijacking

  • google解法：json前放一個 while(1);
  • Facebook解法：json前放一個for(;;);
  • 網路上解法：/*{Json_Data}
  • 最簡單解法：用POST傳資料

說明：

詳細資料

練習：配合資料庫撈資料

像簡報第二頁的Facebook搜尋名字一樣，
輸入字就在底下顯示相關資料。

題示：
  1. 可以使用$('#id').html('html字串')把原本HTML蓋掉。
  2. POST資料給MySQL查詢，再回傳JSON格式。
  3. 文字輸入事件：onkeyup

練習2：配合頁面捲動，載入資料

像臉書一樣，向下捲動就載入較舊的資料進來。

題示：
  1. jQuery有個function能一直加資料$('#id').append('html');
  2. 可以先在頁面底端加一個"載入更多資料"的按紐，
    再處理捲軸事件。
http://www.sanwebe.com/2013/05/auto-load-records-on-page-scroll

Ajax再進階，Pjax

只更新一部份頁面，降低伺服器負擔。

http://ntotten.com/2012/04/09/building-super-fast-web-apps-with-pjax/

pjax優點、注意事項

偷借一下JSDC上的簡報：Paul Li/ Yahoo
樸實與浮華 (Plain and Vanity) / (Usability & Performance)

pjax = pushState + ajax

IE以下的瀏覽器不支援pushstate，
會轉回沒有pjax方法切換

練習：做出像Facebook一樣的pjax

左邊點選目錄後，主畫面切換。

Ajax基礎

By jackai

Made with Slides.com

Ajax基礎

  • 3,606

More from jackai