[21.9.29]Ajax非同期

8951 ワード
web テキストリンク
クライアント-サーバで、サーバはクライアントの要求を処理し、クライアントに応答を送信します.クライアントはサーバの応答を待機し、応答後に画面を更新します.
非同期方式は、サーバーが応答する前にWebブラウザの他の機能を独立して使用することができ、応答時に画面全体をリフレッシュせず、ブラウザの一部だけを更新することができる.
Ajaxはこの非同期方式を使用しています
ajaxを使用してデータを転送する場合は、主にjsonを使用します.
form方式でデータを転送するには、パラメータ方式でのみ転送でき、オブジェクトを要求する必要があるため、多くの制約があります.
JSON(JavaScript Object Notation)
  • データ伝送の標準データフォーマット
  • データの格納および交換のためのシンタックス
  • JSONはテキストです.JavaScriptオブジェクトのタグ付け方法とフォーマットは
    • と似ています.
  • JavaScriptオブジェクトをJSONに変換したり、JSONをサーバ
    • に送信したりすることができます.
  • サーバ受信JSONはJavaScriptオブジェクト
    • に変換可能
  • は基本的にJavaScriptオブジェクト構文
    • と似ています.
    なぜJSONを使うのですか?
    標準
  • JavaScriptオブジェクトシンボル
  • 軽量データ交換形式
  • わかりやすい
  • 言語独立(JSONはテキスト、任意の言語から読み取ることができる)
    • パラメータのようにデータを整理して転送時の形状を維持するには時間とリソースが必要です
    すべてのJSONがテキストに変換されて転送されるため、消費メモリが少なく、転送速度が速い
    JSONデータ型
  • 文字列
  • 数字
  • JSONオブジェクト
  • アレイ
  • 論理型
  • null 
    • //문자열
var str={"name":"kim"};
//숫자
var num={"age":20};
//객체
var obj={
  "employee":{"name":"kim", "age":20, "city":"인천"}
};
    jsonデータのタイプはobjectと考えられる.jsonというデータ型ではなく、jsonの形式を持つ文字列であるためです.
    jsonは転送中にテキスト形式で往復移動し、転送終了後、データを使用するために元のタイプに変更する必要があります.
    主にajaxによるデータ通信に用いられる
    JSON.parse()
    テキストjsonをJavaScriptオブジェクトに変換
    Webサーバからクライアントにデータを送信すると、JSONデータはテキストとなります.
    たとえば、テキストデータを受信してグループ化するとします.
    var txt='{"name":"kim","age":20,"city":"인천","birth":"2002-01-12"}';
var obj=JSON.parse(txt);
  	
obj.birth=new Date(obj.birth); //문자열->Date
  	
document.getElementById("output").innerHTML+=obj.name+","+obj.birth;
    dateはparse()に変換できません.個別に変換する必要があります.
    JSON.stringify()
    JavaScriptオブジェクトを文字列(JSONオブジェクト)に変換する方法.
    JavaScript配列はJSON文字列に変更することもできます.
    Ajax(Asynchronous JavaScript and XML)
    JavaScriptでサーバと通信するための非同期メソッド
    XML(Extensible Markup Language)
    xmlを使用してタグ形式の情報を格納する目的
    なぜAjaxを使うのですか?
  • ウェブページのロード後、特定の場合にのみサーバからデータをロードする、
    • .
  • ページ
    • をリフレッシュすることなく更新する.
  • バックグラウンドでWebサーバにデータを送信
    • .
    XMLHttpRequest
    ブラウザビルトイン要求オブジェクト
  • open(メソッド、url、async):リクエストタイプを設定して送信
    方法:要求タイプGET/POST
    url:ファイルまたはリクエストサーバの場所
    async:true(非同期)またはfalse(同期)
  • send():GETによりサーバ
    • に要求が送信される.
  • send(文字列):POSTを介してサーバ
    • に要求を送信する.
  • setRequestHeader(ヘッダ、値):要求にHTTPヘッダ
    • を追加する.
    onreadystatechange
    リクエスト後にreadyStateプロパティを変更するときに呼び出される関数
  • readyState:XMLHttpRequestの状態
    0: request not initialized
    1: server connection established
    2: request received
    3: processiong request
    4: request finished and response is ready
    • ajaxに書き込むreadyStateは4であることが望ましい.
    a-b接続、要求と応答の同時接続、
    すぐに反応すればいい
  • status:HTMLメッセージコード
    200: “OK”
    403: “Forbidden”
    404: “Page not found”
    • responseText
    レスポンスデータを文字列に変換
    <試用>
  • resultGet.jspはget方式でデータを取得する.jsp
    • に送信
  • date.jsp応答
  • 応答のデータはresultGetである.jsp出力
    • から
    var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
	if(this.readyState==4 && this.status==200){
		document.getElementById("output").innerHTML=this.responseText;
	}  
};
xhttp.open("GET","date.jsp?method=get&content=Hello",true);
xhttp.send();
    Postメソッドは他の人がデータを表示することを阻止するので、Content-typeでURL符号化を使用して応答データを表示する必要があります.setRequestHeader()を使用してタイトル情報を追加
    xhttp.open("POST","date.jsp",true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("method=post&content=Hello");
    <%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%! Date date=new Date();%>
<!-- 응답데이터 -->
<p>오늘 날짜:<%=date.toString() %></p>
<p>${param.method }</p>
<p>${param.content }</p>
    通常ajaxの役割はdateです.ほとんどの場合、サーバはjspのようにjspをロードするのではなく、データのみをインポートします.
    jQuery Ajax
  • jQueryはAjaxの多様な機能
    • を提供している.
  • jQuery Ajaxメソッドでは、サーバがテキスト、HTML、XML、またはJSONを要求できるようにします.
  • $(selector).load(URL, data, callback);URL:ファイルまたは通信パス
    ≪データ｜Data｜ldap≫:送信するデータ.省略可能
    callback:ロードおよび実行が必要な機能を定義する
    • callbackの動作はJavaScriptのif(this.readyState==4 && this.status==200){}と同じです
    $('#output').load("test.txt #p1"); 
//공백으로 url 속 태그 지칭
    $.ajax()
    ajax loadメソッドをkey-valueメソッドに簡略化
    きほんけいじょう$.ajax({name1:value1, name2:value2, ...});
  • nameの要素として選択可能
    type : GET or POST
    url:パス[url:ぱす]
    ≪データ｜Data｜oem_src≫:送信するパケット
    ≪成功｜Succeeded｜ldap≫:正常に呼び出されたときに返されるコンテンツ
    • $.ajax({
    type:"get",
    url:"../ajax_test.do",
    data:{
    	id:"test", //request parameter를 id와 pw로 지정
     	pw:"1234"
    },
    success:function(result){
	//ajax_test.do에서 작성된 내용을 리턴해서 저장한 결과
	$('#output').html(result); //result 내용을 output에 적용
}
    success : function(result){}のデータが返されます
    PrintWriter out=response.getWriter();
out.append("id : "+id+"<br>");
out.append("pw : "+pw);
    $.get(url, callback);
    HTTP Get Requestをページに送信し、結果を取得
    $.get("04_get_test.jsp", function(data, status){
	alert("Data : "+data+"\n status : "+status);
});
    $.post(URL, data, callback);
    $.post(
	"05_post_test.jsp",
	{
		name : "mok",
		city : "인천"
	}, 
	function(data, status){
		alert("Data : "+data+"\n status : "+status);
});
    JavaScriptオブジェクトとしてデータを転送したのでrequest.getParameterとしてデータを使用
    複雑なデータはjson形式が望ましい!
    json
    {
	"name":"kim",
	"age":20,
	"pets":[
		{"animal":"dog", "name":"choco"},
		{"animal":"cat", "name":"navi"}
	]
}
    objectの配列のobject
    ajax
    $.ajax({
	type:"get",
	url:"06_json_test.txt",
	success:function(result){
		var data=JSON.parse(result);
		console.log(data);

		document.getElementById('output').innerHTML+="이름 : "+data.name+"<br>";
		document.getElementById('output').innerHTML+="나이 : "+data.age+"<br>";
		for(var i=0;i<data.pets.length;i++){
			document.getElementById('output').innerHTML+="펫 : "+data.pets[i].animal;
			document.getElementById('output').innerHTML+=", 이름 : "+data.pets[i].name+"<br>";
		}
	}
}); //end ajax
    $('#output').html()と解読された壁
    for inが書ける壁
    [JavaScript]プログラマー整数三角形LEVEL 3
    指定した配列内のランダム9ビット数を取得