웹 학습 일기 #1 Ajax 통신
JavaScript로 Ajax 통신
학습 강좌
udemy 「[HTML/CSS/JavaScript] 프런트 엔드 엔지니어가 되고 싶은 사람의 Web 프로그래밍 입문」
오늘은 Javascript로 Ajax 통신을 이용한 코딩을 실시했다.
지금까지 이미지를 표시시키고 싶을 때는 디렉토리내의 이미지 파일을 html 또는 css로부터 직접 패스를 지정해 참조하고 있었다.
이번에는 JavaScript에서 XMLHtmlRequest라는 서버와 통신하기위한 API를 사용하여 서버에서 json이라는 형식의 데이터를 받음으로써 데이터에있는 이미지의 경로와 텍스트를 사용하여 웹에 이미지와 텍스트를 표시했다.
코드
<script>
var ajax = new XMLHttpRequest(); //オブジェクトの作成
ajax.open('GET', 'https://h2o-space.com/htmlbook/images.php'); //送信時のメソッド、送信先のURLの設定
ajax.responseType = 'json'; //jsonタイプを受け取る
ajax.send(null); //サーバーへリクエスト
ajax.onreadystatechange = function() { //読み込み中の状態が変わるごとに処理する
if(ajax.readyState === XMLHttpRequest.DONE && ajax.status === 200) { 読み込み完了&&ステータスが200
for(var i = 0; i < this.response.length; i++) {
var data = this.response[i];
var img = document.createElement('img');
img.setAttribute('src', data.path);
var caption = document.createElement('div');
caption.className = 'inner';
caption,innerHTML = '<p>' + data.caption + '<span>' + data.name + '</span></p>';
var div = document.createElement('div');
div.className = 'photo';
div.appendChild(img);
div.appendChild(caption);
document.getElementById('img_unit').appendChild(div);
}
}
};
</script>
Reference
이 문제에 관하여(웹 학습 일기 #1 Ajax 통신), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yu1781/items/ad76be1a8038ecf079a8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)