雲端教學課程

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接收資料

引入jQuery Library

 <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>

執行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>