jQuery ajax(非同期)

34885 ワード

TIL jquery ajax テキストリンク

2021.08.25

Ajax

Asynchronous JavaScriptとXMLの略として使われています.
データを受信し、変更が必要な部分だけを選択し、データを含むサーバからページ全体を返さない非同期通信方式.
ブラウザが所有するXMLHttpRequestオブジェクトを使用して非同期通信を行います.
(非同期:信号送信時、応答状態に関係なく、以下の操作が可能)

1.同期と非同期

1-1. 同期

リクエストとレスポンスが同時に発生する方法

クライアントがサーバを要求したときのサーバ応答のフォーマット

作成したコード順に処理を完了し、クライアントに応答します.

サーバ応答が遅延すると、クライアントが画面出力を待つ時間が長くなります.

1-2. 非同期

リクエストとレスポンスを同時に行うことはできません.

Webページを再ロードせずにサーバと通信

まずクライアントを実行し、サーバが応答すると生成されたコードが実行されます.

2.Ajaxに関する方法

2-1. load()

ユーザーが指定したURLアドレスにデータを送信し、外部コンテンツを要求してインポートする

要求された内容を使用して、選択した要素の内容を変更できます.

url:外部コンテンツリクエストの外部アドレスを入力する
data:転送するデータ(省略可能)
コールバック関数:送信完了後、コールバック関数に格納されているコードを実行します(省略可能)

使用例

    <script>
      $(function () {
        //$(가져올 위치).load(url, data, 콜백);
        $('.news1').load('data/news.html #news_1');
        $('.news2').load('data/news.html #news_2');
      });
    </script>
  </head>
  <body>
    <h1>load1</h1>
    <div class="news1"></div>
    <h1>load2</h1>
    <div class="news2"></div>
  </body>

urlとして使用されるニュース。htmlファイルコード

  <body>
    <p id="news_1">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam
      blanditiis explicabo odit sunt debitis totam ipsa maxime aliquid vel, in
      libero at consequuntur voluptatem obcaecati necessitatibus, qui sed alias
      optio!
    </p>
    <p id="news_2">
      동해물과 백두산이 마르고 닳도록 ... 하느님이 보우하사 우리나라 만세...
      동해물과 백두산이 마르고 닳도록 ... 하느님이 보우하사 우리나라 만세...
      동해물과 백두산이 마르고 닳도록 ... 하느님이 보우하사 우리나라 만세...
      동해물과 백두산이 마르고 닳도록 ... 하느님이 보우하사 우리나라 만세...
    </p>
  </body>

2-2. ajax()

ファイルデータをユーザーが指定したurlパスに転送し、要求したデータを選択した要素にロードします.

読み込める外部データはテキスト、HTML、XML、JSONなどです.

ajaxメソッドを使用した構文

$.ajax({
     url: 전송페이지
     dataType: 요청한 데이터 형식 ( html, xml, json, text(메모장) )
     success: function() {
          전송에 성공하면 실행될 코드
     },
     error: function(){
         전송에 실패하면 실행될 코드
     }
});

ajaxデフォルトプロパティ

タイプが指定されていない場合はgetがデフォルトです
セキュリティ保護を必要とせずに指定されたリソースからリソースを読み込む場合はGETを使用し、そうでない場合はPOSTを使用します.

HTTPメソッド定義において、GETは、指定するリソースからのデータ、すなわち

を読み出すために使用される.
POSTは、指定されたリソース上でのデータの書き込み、修正および削除に使用され、

は、データの書き込み、修正および削除に使用される

3.データファイル

3-1. XML

ユーザーは任意にHTMLタグを指定することができ、タグを記録する形式でデータファイルフォーマット、タグ名を使用することができ、拡張しやすい.

ファイル形式の例

<?xml version='1.0' encoding='UTF-8'?>
<dataset>

<record>
<id>1</id>
<first_name>Cleon</first_name>
<last_name>Norquoy</last_name>
<email>[email protected]</email>
<gender>Male</gender>
</record>

<record>
<id>2</id>
<first_name>Danell</first_name>
<last_name>Hubble</last_name>
<email>[email protected]</email>
<gender>Female</gender>
</record>

</dataset>

3-2. JSON

オブジェクトは[{"キー":"値"},{"キー":"値"}]の形式で並べられており,大量のデータを転送するデータファイルフォーマットに有利である.

ファイル形式の例

[
   { "name": "홍길동", "age": 30, "score": 100  },
   { "name": "아무개", "age": 19, "score": 92 },
   { "name": "고길동a", "age": 52, "score": 48 },
   { "name": "고길동b", "age": 12, "score": 12 },
   { "name": "고길동c", "age": 22, "score": 75 }
]

4.データファイル固有ajaxメソッドの使用

インポートデータを表形式で表示する例

4-1. XML

    <script>
      $(function () {
        $.ajax({
          url: 'data/dataset.xml',
          dataType: 'xml',
          success: function (data) {
            console.log(data);
            let $data = $(data).find('record');
            console.log($data);
            if ($data.length > 0) {
              // record 태그가 한개 이상 있으면
              let $table = $('<table>');
              $.each($data, function (index, value) {
                let $id = $(value).find('id').text();
                let $first_name = $(value).find('first_name').text();
                let $last_name = $(value).find('last_name').text();
                let $email = $(value).find('email').text();
                let $gender = $(value).find('gender').text();

                let $tr = $('<tr>').append(
                  $('<td>').text($id),
                  $('<td>').text($first_name),
                  $('<td>').text($last_name),
                  $('<td>').text($email),
                  $('<td>').text($gender)
                );
                $table.append($tr);
              });
              $('#wrap').append($table);
            }
          },
          error: function () {
            alert('데이터 연결이 실패했습니다.');
          },
        });
      });
    </script>

データの検索時にrecordタグを選択してオブジェクト配列の形式で変数に宣言し、各インデックスの各文字を検索するfindメソッドに必要なタグを選択してtextをインポートする関数を実行し、appendを使用してテーブル構造を作成しhtmlのwrapボックスに入れて完了します.

4-2. JSON

    <script>
      $(function () {
        $.ajax({
          url: 'data/MOCK_DATA.json',
          dataType: 'json',
          success: function (data) {
            console.log(data); // 객체 타입으로 들어옴
            let $table = $('<table>');
            for (let i in data) {
              let $id = data[i].id;
              let $first_name = data[i].first_name;
              let $last_name = data[i].last_name;
              let $email = data[i].email;
              let $gender = data[i].gender;

              console.log($id, $first_name, $email);
              let $tr = $('<tr>').append(
                $('<td>').text($id),
                $('<td>').text($first_name),
                $('<td>').text($last_name),
                $('<td>').text($email),
                $('<td>').text($gender)
              );
              $table.append($tr);
            }
            $('#wrap').append($table);
          },
          error: function () {
            alert('데이터 연결이 실패했습니다~!');
          },
        });
      });
    </script>

jsonタイプのデータは最初からオブジェクト配列であるため,必要な値を抽出しやすい.for文またはeachメソッドを使用して、各インデックスに対応するオブジェクトから必要なデータをドラッグし、HTMLサブ要素として追加してテーブルを完成させます.

5.JSONファイルでHTMLを使用してデータを入力する方法

使用するjsonファイルコード

[
  {
    "num": 1,
    "title": "안녕하세요 그린복지 재단입니다.",
    "date": "2020-12-27"
  },
  {
    "num": 2,
    "title": "그린복지재단 이벤트 안내입니다.",
    "date": "2020-12-28"
  },
  {
    "num": 3,
    "title": "연휴, 공휴일 휴무 안내입니다.",
    "date": "2020-12-29"
  },
  { 
    "num": 4, 
    "title": "그린복지재단 후원 안내입니다.", 
    "date": "2020-12-30" 
  }
]

5-1. 文字列としてネストされ、親要素にアタッチされます。

    // 문자열 축적으로 데이터 연동
      success: function (data) {
      console.log(data);
      let li = '';
      $.each(data, function (index, value) {
        li +=
          '<li>' + value.num + '. '+ value.title + '<span>' + value.date + '</span>' + '</li>';
      });
      console.log(li);
      $('.list:first').append(li);
      },

各文はdataというパラメータを使用してjsonのオブジェクト配列をインポートし、+=増減演算子として追加するHTML要素を文字列としてネストし、ネストしたli変数を親要素に付加してデータを格納するliという空の文字列変数を宣言します.

5-2. コンストラクション関数を使用してタグを作成し、appendを使用してネストを追加し、appendを親要素に追加します。

    success: function (data) {
      console.log(data);
      $.each(data, function (index, value) {
        let $li = $('<li>')
          .text(`${value.num}. ${value.title}`)
          .append($('<span>').text(value.date));
        $('.list:first').append($li);
      });
    },

同様に、各文でjsonを選択し、内部関数で$('<li>')のliタグを生成し、$liの変数として宣言し、タグの内部内容をテキストメソッドとしてjson配列オブジェクトの各propertyに追加し、jQueryのメソッドチェーンappendを使用してカラムテーブルを完了し、liタグにspanタグを追加します.したがって、親要素に$li変数をサブ変数として追加し、データを入れます.

データ入力結果(両方の方法の結果は同じ)

Reference

この問題について(jQuery ajax(非同期)), 我々は、より多くの情報をここで見つけました https://velog.io/@padd60/TIL-jQueryajax비동기-방식

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

ファイルストリームまたはバイト配列によるファイルの真のタイプの判断

shortタグ値がバイナリファイルで初めて表示される場所を検索します.