1. 動態加載外部文件：

    /*AJAX 動態加載外部文件*/
    $(document).ready(function () {
        $(‘#btn1‘).click(function () {
            $(‘#log-content‘).load(‘data/logs.txt‘); //這個txt文件內容如果是中文，需要保存成utf-8編碼格式
        })
    })

2. 動態加載外部網頁：

    /*AJAX 動態加載外部網頁*/
    $(document).ready(function () {
        $(‘#btn1‘).click(function
 
 () {
            $(‘#log-content‘).load(‘http://localhost:63342/jQuery/data/htmldata.html?_ijt=sgjc9obth398kjjjv314ntgs17‘);
        })
    })

默認情況下，jQuery的load()函數會使用HTTP的Get函數向服務器發送數據請求，傳遞參數時，會自動以POST方式提交數據。

3. 加載網頁文件內容並傳遞服務端參數

<label for="parameters"></label>
<select name="parameters"
 
 size="5" id="parameters">
    <option value="1" selected="selected">url</option>
    <option value="2">data</option>
    <option value="3">callback</option>
</select>
<br>
<div>
    <input id="btn1" type="button" value="獲取外部文件">
    <div 
 
id="log-content"></div>
</div>

 $(document).ready(function () {
        $(‘#btn1‘).click(function () {
            $name = $("#parameters option:selected").val(); //層次選擇器在一個“”內以空格區分
            $(‘#log-content‘).empty().load(‘demo.php‘,{name:$name});
        })
    });

用戶從客戶端的列表框選擇一個參數值，點擊事件發生後，將從服務端的PHP文件獲取參數的描述

/*要獲取的PHP文件*/
<?php
    switch($_POST[‘name‘]){
        case 1:
            echo ‘必需的URL參數規定用戶希望加載的URL‘;
            break;
        case 2:    
            echo ‘可選參數：data。 規定與請求一同發送的查詢字符串鍵/值對集合。‘;
            break;
        case 3:    
            echo ‘可選參數：callback。 load函數完成後所執行的函數名稱。‘;
            break;            
    }
?>

4. 使用 AJAX 無刷新網頁刪除記錄（比如微博）

<div id="container">
    <h3>留言內容</h3>
    <div id="load" align="center"></div>
    <div class="box">
        <div class="text">
            <span>張三</span>
            <br>
            很好用的留言板
            <div class="date">2017-05-21</div>
        </div>
        <!--刪除鏈接，每個鏈接的id值，指向數據庫當前記錄的id-->
        <a href="" id="1" class="delete">刪除</a>
        <div class="clear"></div>
    </div>
</div>
<script>
   $(function () {
       $(‘.delete‘).click(function () {
           var commentContainer = $(this).parent();
           var id = $(this).attr(‘id‘);
           var string = ‘id=‘ + id;//構造參數字符串
           $.ajax({
               type:"POST",
               url: "ajax_delete_Server.php",
               data:string,//傳遞的參數字符串
               cache:false, //不緩存
               success:function () {
                   commentContainer.slideUp(‘slow‘,function () {
                       $(this).remove();
                   });
               }
           });
           return false;
       })
   })
</script>

調用$.ajax()，向 ajax_delete_Server.php 文件發送一個AJAX請求，用來刪除留言。

總結：可以看出，$.ajax()和load()方法都可以用來加載服務端數據。

load()方法根據參數來決定是用GET還是POST。沒有參數就是GET，帶參數就是POST。這個參數可以指定要獲取文件的特定內容。

$.ajax()是底層方法，它可以代替load()方法。

5. 驗證插件，validator.min.js中，有一個方法，optional(element).

jQuery.validate的optional(element)，用於表單控件的值不為空時才觸發驗證。
當element為空時this.optional(element)=true，用於在該控件為非必填項目時可以通過驗證，及條件可以不填但是不能填錯格式。

// 中文字兩個字節
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
    var length = value.length;
    for(var i = 0; i < value.length; i++){
        if(value.charCodeAt(i) > 127){
            length++;
        }
    }
  return this.optional(element) || ( length >= param[0] && length <= param[1] );   
}, $.validator.format("請確保輸入的值在{0}-{1}個字節之間(一個中文字算2個字節)"));

這個插件的異步驗證：使用 ajax 方式進行驗證，默認會提交當前驗證的值到遠程地址，如果需要提交其他的值，可以使用 data 選項。

remote: {
    url: "check-email.php",     //後臺處理程序
    type: "post",               //數據發送方式
    dataType: "json",           //接受數據格式   
    data: {                     //要傳遞的數據
        username: function() {
            return $("#username").val();
        }
    }
}

6. 頁面滾動時加載新的網頁內容。

 $(document).ready(function () {
        $(‘#load_max‘).val(50);//為隱藏域賦值50，表示一次加載50條記錄。
    });
    var loading = false;//全局變量，指定當前是否正在加載服務端內容。
    $(window).scroll(function () {
        //如果當前窗體的高度大於文檔的高度
        if ((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
            if(loading===false){
                loading=true; //設置文檔加載狀態
                $(‘#loadingbar‘).css(‘display‘, ‘block‘); //顯示加載提示條
                $.get("xxx.php?start="+$(‘#load_max‘).val(), function (loaded) {
                    $(‘body‘).append(loaded);
                    //在隱藏區域中設置新的起始值
                    $(‘#load_max‘).val(parseInt($(‘#load_max‘).val())+50);
                    $(‘#loadingbar‘).css(‘display‘,‘none‘); //隱藏狀態條
                    loading=false; //結束加載的狀態
                });
            }
        }
    });

滾動加載內容的核心是關聯window的onscroll事件。判斷當前滾動條位置，若高於當前文檔的高度，則向服務端發送數據請求。

（此外，jQuery有一個lazyload插件，用來延遲加載長頁面的圖片。在瀏覽器可視區域外的圖片不會被載入, 直到用戶將頁面滾動到它們所在的位置. 這與圖片預加載的處理方式正好是相反的.）

JQuery的一些註意事項（2）- AJAX 學習筆記