JSで実装したAjaxメソッドを詳しく解説

今回はAjaxのJS実装について詳しく解説していきます AjaxのJS実装の注意点は何ですか？

1. Ajax とは

更新せずにデータを読み取るか送信する

(最初に登場した ajax: Google マップ、ドラッグして新しいビューを表示します)

アプリケーション:

ユーザー登録、オンラインチャット、Weibo

特徴: データはサーバーからのみ読み取ることができます (そのため、独自のサーバー プログラム AMP を構成する必要があります)

2. Ajax を使用します

1. 基本: 静的 TXT ファイルをリクエストして表示します

① Ajax のファイルはページのエンコーディングと一致している必要があります

②キャッシュとキャッシュの防止 (メリットがデメリットを上回るため、常にキャッシュをクリアすることはできません)

キャッシュはネットワーク アクセスの高速化に役立ちます。サーバー上のファイルです。一度だけ読み取られ、2 回目は実際にネットワーク経由でリクエストするのではなく、ハードディスクとキャッシュから直接取得されます

場合によっては、キャッシュを防止する必要がある場合があります (たとえば、サーバーは変更されますが、クライアントのリクエストは元のものです)、メソッドは次のとおりです、タイムスタンプを追加します:

btn.onclick=function(){
  ajax('abc.txt',function(str){
    alert(str);
  });
}

2. 動的データ: Js (または json) ファイルをリクエストします

Ajax がサーバーから読み取るものはすべて含まれていますテキストの形式（文字列）は存在しますが、それを変換するにはどうすればよいですか？

eval() は文字列内の値を計算します

ajax('abc.txt?t='+new Date().getTime(),function(str){});
//new Date().getTime()为现在的毫秒数，用户绝对不可能在1毫秒内点两次，所以每次请求的t都不一样

例: paging

ajax('abc.txt',function(str){
    var arr=eval(str);
    alert(arr);
});

<ul id="list">
</ul>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>

3. Ajax の原則

HTTP リクエスト メソッド

1.GET -- データ (投稿の閲覧など) を取得するために使用されます。データを URL (ウェブサイト) に入れて送信します。低セキュリティ、低容量、簡単に共有できます (URL を他の人に送信します)

2.POST -- データをアップロードするために使用します (ユーザー登録など)。 URL 以外の場所には、平均的なセキュリティがあり、ほぼ無制限の容量があり、共有するのは簡単ではありません

4. Ajax を作成します

2.リクエストを送信します

4. 返品を受け取る

window.onload=function(){
  var oUl=getElementById("list");
  var aBtn=getElementsByTagName("a");
  var i;
  for(i=0;i<aBtn.length;i++){
    aBtn[i].index=i;
    aBtn[i].onclick=function(){
      ajax(&#39;page&#39;+(this.index+1)+&#39;.txt&#39;,function(str){
        var aData=eval(str);
        oUl.innerHTML=&#39;&#39;;
        for(i=0;i<aData.length:i++){
          var oLi=document.createElement("li");
          oLi.innerHTML=&#39;<strong>'+aData[i].user+'</strong><i>'+aData[i].pass+'</i>';
          oUl.appendChild(oLi);
        }
      });
    };
  }
};

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

jQuery Ajax 分析

AJAX インジェクションの使用法の詳細な説明

以上がJSで実装したAjaxメソッドを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。