Query - Ajax

16804 ワード
jquery テキストリンク

Asynchronous JavaScript and XML


:Webサーバに必要なデータの受信のみを要求し、クライアントによってデータを処理する非同期Webアプリケーションを作成するWeb開発技術.

同期と非同期の通信の違い




この方法では、ページ全体をリフレッシュせず、ページに必要なデータの一部だけを再ロードします.
ページの再ロード時に画像、ビデオ、スクリプトなどの他のすべてのコードを再要求すると、不要なリソースが浪費されます.ただし、非同期方式を使用する場合は、必要な部分しか読み込めません.
ユーザーの立場から見ると、画面をリフレッシュすることなく、リクエストと応答の間に他のことをすることができ、便利で速い環境を感じることができます.

Ajax Webアプリケーションの例




Ajax基本構造

$.ajax({
	url: "Ex00Ajax.html",		  // 데이터를 요청할 페이지
    type: "get",				  // 데이터 요청 방식(get, post)
    data: "num=12",				  // 전송할 데이터
    success: function(result){	  // 통신 성공시(보통 해당 부분에서 데이터 핸들링을 하면 된다.)
    	alert("success")
    },
    error: function(){			  // 통신 실패시
    	alert("error")
    }
})

Ajaxデータ型


1.CSV：容量は小さいが、可読性が悪い。


りんご、バナナ、ブドウ、オレンジ、こんにちは、お会いできて嬉しいです.
▲値をスペックルに分けてリスト形式でインポート

2.XML:タグの使用は可読性は良いが、データの基本体積は大きい。


ex.
<weeklyBoxOffice>
	<rnum>1</rnum>
	<rank>1</rank>
	<rankInten>0</rankInten>
	<rankOldAndNew>OLD</rankOldAndNew>
	<movieCd>20112207</movieCd>
	<movieNm>미션임파서블:고스트프로토콜</movieNm>
	<openDt>2011-12-15</openDt>
	<salesAmt>7840509500</salesAmt>
	<salesShare>35.8</salesShare>
	<salesInten>-1706758500</salesInten>
</weeklyBoxOffice>

3.JSON（JavaScript Object Notation）：属性値ペアからなるデータを渡すためのオープンスタンダードフォーマット



JSON data type
  • 文字列、数値、true/false、JSON object、array、null
    • ex.複数のデータ型を入れることができます.
    {
	"name":"홍길동",	// 문자열
	"age":100,		  // 숫자(정수)
	"weight":70.5,	  // 숫자(실수)
	"baby":false,	  // true/talse
	"money":null	  // null
}
    ex.JSONに別のJasonを入れることができます.
    {
	“info” : {"name":"홍길동", "age":12},
	“work” : 20
}
    複数のex.JSONオブジェクトを含む配列を作成することもできます.
    [
	{"name":"홍길동", "age":12},
	{"name":"김길동", "age":20},
	{"name":"오일남", "age":20},
	{"name":"성기훈", "age":35}
]

    JSON実習


    サーバにムービーデータを要求し、Ajaxを使用してみます.
    https://www.kobis.or.kr/kobisopenapi/homepg/main/main.do 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
	<button onclick="boxoffice()">요청</button>
    <div id="rank"></div>

    <script src="./js/jquery-3.6.0.min.js"></script>
    <script>
        function boxoffice(){
            $.ajax({
                url: "http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20211214",
                // 물음표 뒷부분 : 쿼리스트링 , key= 개개인의 인증키. 잘못적으면 동작하지 않음. 최근데이터로 바꾸고싶으면 targetDt 부분의 날짜를 바꿔주면 됨.
                type: "get",   // 요청방식을 적지 않으면 기본값은 get방식
                success: function(data){     //매개인자 자리로 들어옴 -> 변수로 받아주어야만 사용 가능
                    console.log(data)
                    var txt = "<table>"
                    txt+="<tr>"
                    txt+="<th>순위</th><th>제목</th><th>개봉일</th>"
                    txt+="</tr>"
                    for(let i=0; i<data.boxOfficeResult.dailyBoxOfficeList.length; i++){
                        let li = data.boxOfficeResult.dailyBoxOfficeList[i]
                        txt+="<tr>"
                        txt+="<td>"+li.rank+"</td><td>"+li.movieNm+"</td><td>"+li.openDt+"</td>"
                        txt+="</tr>"
                    }
                    txt+="</table>"
                    $('#rank').append(txt)
                    //append : 기존 요소 뒤쪽으로 요소 추가 기능 , prepend : 기존 요소 앞쪽으로 요소 추가 기능
                },
                error: function(){       // 실패시에는 응답받을 내용이 없으니 매개변수 자리 비워주기.
                    alert("통신실패")
                }
            })
        }
    </script>
</body>
</html>
    [白俊]1157単語を勉強-Java
    SpringBootテストコード