2021. 06. 14(月)TIL

14881 ワード
TIL JavaScript ajax テキストリンク

Ajax(Asynchronous JavaScript and XML)

  • JavaScriptとXML(JSON)を使用してサーバとの非同期データ通信
  • XMLHttpRequestオブジェクトを使用してサーバとデータ通信を行います.

    • 特長

  • JavaScriptでサーバとのデータ通信が可能です.
  • ページを再ロードする必要がなく、画面を一部更新することができます.(サーバからデータを取得します.)

    • 典型的な機能

  • Googleマップ
  • ポータルサイト検索機能
    • クエリ
  • 個の分類のサブ分類の機能

    • XMLHttpRequest



  • Webブラウザ画面の後ろでWebサーバとHTTP通信でデータ交換を行うオブジェクト.

  • ページ全体の再ロードを必要とせず、Webページの一部をサーバから受信したデータに更新できます.

  • すべてのブラウザに内蔵されています.
    (Chrome, Firefox, IE7+, Edge, Safari, Opera)

  • プライマリAPI

  • Property
  • onreadystatechange
    XMLHttpReqestのreadyStateステータスが変更されるたびに発生するイベント
    • xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
    // 서버가 보낸 데이터 조회
    // 데이터를 사용해서 HTML 컨텐츠 제작
    // HTML 컨텐츠를 화면의 특정위치에 반영
    }
}
  • readyState
    XMLHttpRequestオブジェクトの現在の状態を返します.
    0:要求が初期化されていません.
    1:サーバに接続します.
    2:サーバがリクエストを受信しました.
    3:サーバが要求を処理しています.
    4:サーバはリクエスト処理を完了し、応答データを送信する準備ができています.
  • status
    要求されたHTTP応答コードを返します.
    200 : OK
    404 : Not Found
    500 : Server Error
  • responseText
    サーバから受信したデータは文字列を返します.
  • responseXML
    Summerから受信したデータはXML Documentオブジェクトに返されます.

  • Method
  • var xhr = new XMLHttpRequest()
    XMLHttpRequestオブジェクト
    • の作成
  • xhr.open(method, url, async, user, password)
    XMLHttpRequestオブジェクトを初期化します.
    method : "GET", "POST"
    url:要求URL
    async:true(非同期動作)、false(同期動作)
    user/password:ユーザー認証情報
  • xhr.send()
    サーバにリクエストを送信します.
    • (GETリクエスト)
  • xhr.setRequestHeader()
    POST方式の場合、HTTP要求メッセージのヘッダ情報を設定します.
    xhr.open("POST", "test.jsp")
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  • xhr.send(string)
    サーバにリクエストを送信します.(POST要求用)
    xhr.send(「title=こんにちは&contents=こんにちは」);

    • JSON(JavaScript Object Notation)

  • 軽量DATA-スワップフォーマット.
  • 軽量級のDATAマーキング法.

    • 特長

  • 人は読みやすく書きやすい.
  • マシンでの分析と生成が容易です.△コードが簡単になりました.
  • プログラム言語とは完全に独立しています.
  • は、異なるシステム間のデータ交換に理想的なデータ交換フォーマットである.

    • 形式


  • オブジェクトシンボル
    {name:value, name:value, name:value}
  • 名/値対集合<---JavaのValueObject/MAP,JavaScriptのObject
  • nameには文字列
    • しか含まれません.
  • の値は、文字列、数値、オブジェクト、Array、true、false、null
    • を含む.
  • 例
    • public class Book {
    int no; String title; String writer; String publisher; int price;
}
{"no":10, "title":"이것이 자바다", "writer":"홍길동", "price":31000}

public class Team {
    String name; List<String> members;
}
{"name":"트와이스", "members":["나연", "정연", "모모", "사나", "지효", "미나", "다현", "채영", "쯔위"]}

public class Student {
    String name; Major major;
}
public class Major {
    String name; String grade;
}
{"name":"홍길동", "major":{"name":"전자공학", "grade":"석사"}}

Map<String, Object> map = new HashMap<String, Object>();
map.put("keyword", "자바");
map.put("records", 3);
map.put("items", books)	<- List<Book> books = bookDao.searchBooks(title);
{"keyword":"자바", 
 "records":3, 
 "items":[
    {"title":"이것이 자바다", "publisher":"한빛미디어"},
    {"title":"자바의 정석", "publisher":"한빛미디어"},
    {"title":"생활코딩 자바편", "publisher":"한빛미디어"}	
 ]
}

  • Arrayシンボル
  • [value, value, value]
  • 値のシーケンステーブル<---javaの配列/リスト、javascriptの配列
  • 例
    • String[] names = {"김유신", "강감찬", "홍길동"}
["김유신", "강감찬", "홍길동", "이순신"]

public class Category {
    int no; String name;
}
List<Category> categories = categoryDao.getAllCategories();
[{"no":100, "name":"가구"}, {"no":"200", "name":"가전제품"}]

    JavaとJavaScriptでJSON


    格納されたデータは、
  • JavaのVO、Map、アレイ、およびListから他のシステムに転送される.
    JSONテキストに変換して渡すことができます.
  • JavaのVO、Map、タイリング、ListをJSONテキストに変換する場合、複数のライブラリを使用できます.
    (google-gson、json-simpleなど)
  • JavaScriptはJSONです.parse()とJSON.stringgify()を使用して簡略化
    JSONシンボルのテキストをJavaScriptオブジェクトと配列に変更できます.
    JavaScriptのオブジェクトと配列をJSONシンボルのテキストに変更できます.
    • VO, Map -> {"name":value, "name":value} -> JSON.parse(テキスト)オブジェクト
    配列、List->[value,value,value,value]->JSON.parse配列
    VO, Map <- {"name":value, "name":value} <- JSON.stringifyオブジェクト
    配列,List<-[value,value,value,value]<-JSON.stringfiy配列
    Springdoc
    [ドゥドゥドゥ]4ドラッグ＆ドロップ補完