ネイティブ Ajax と jQuery の違いの分析例 Ajax

前書き: 今回は、ajax を使用してバックグラウンドでデータを交換する小さな例を紹介するため、デモはサーバー経由で開く必要があります。サーバー環境のセットアップは非常に簡単で、インターネットから wamp または xampp をダウンロードして段階的にインストールし、作成したページをサーバー上の指定された場所に配置します。開く際はブラウザのアドレスバーに「localhost/指定ページ」または「127.0.0.1/指定ページ」と入力して開きます。

デモの HTML、PHP、ネイティブ ajax、および jq ajax コードを以下に示します。

HTML コード:

コードをコピーしますコードは次のとおりです:

<頭>
ajax の例

ででで＆lt; li name = 'winter' id = 'winter'＆gt; winter＆lt;/li＆gt;

PHP コード:

コードをコピーします

コードは次のとおりです: $details = 配列 ( '春' => '夏' => "

クリスタルのカーテンが風に揺れ、バラが中庭を香りで満たしました

"、 'fall' => "

金京プラタナスの紅葉は黄色で、ビーズのカーテンは霜で巻き上げられません夜

'冬' => "

梅の花は雪のように白いですが、雪は梅の花ほど香りがありません< ;/p>"

);
echo $details[$_REQUEST['LiName']];
?>

原生ajax：

复制代代码如下:

<スクリプトタイプ="text/javascript">
    var lis = document.getElementById('list').getElementsByTagName('li');
    window.onload = initPage;
    関数 initPage() {
        for (var i=0; i             txt = lis[i];
            txt.onclick = function () {
                getDetails(this.id);
            }
        }
    }
    function creatRequest() {
        {
を試してください             request = new XMLHttpRequest();
        }
        catch (tryMS) {
            {
を試してください                 request = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (otherMS) {
                {
を試してください                     request = new ActiveXObject("Miscrosoft.XMLHTTP");
                }
                キャッチ (失敗) {
                    リクエスト = null;
                }
            }
        }
        返品リクエスト;
    }
    function getDetails(itemName) {
        request = creatRequest();
        if (リクエスト == null) {
            alert('没成功创建请要求')
            戻る;
        }
        var url = "getDetails.php?LiName=" エスケープ(アイテム名);
        request.open("GET",url,true);
        request.onreadystatechange = displayDetails;
        request.send(null);
    }
    関数 displayDetails() {
        if (request.readyState == 4) {
        if (request.status == 200) {
            詳細Div = document.getElementById("inf");
            詳細Div.innerHTML = request.responseText;
        }
      }
    }

JQ ajax:

复制代码代码如下:

<スクリプトタイプ="text/javascript">
$('#list li').click ( function () {
        $.ajax({
            type:'GET',
            データ:''、
            url:"getDetails.php?LiName=" this.id,
            success:function(data){
                $('#inf').html(データ);
            }、
            データ型:'テキスト',
            エラー:関数 (){
                alert("失败！");
            }
        })
    });