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配列