Ajax

15389 ワード
Webプログラミング テキストリンク
Ajaxを使用して1ページのアプリケーションを実装できます
// Ajax 코드 예시
<article> </article>
<input type="button" value="fetch" onclick="
    fetch('hi.html').then(function(response){
        response.text().then(function(text){
            if(response.status == '404'){
    			alert('Not found');
			}                                
            document.querySelector('article').innerHTML = text;
        })
    })
">
ブラウザは
  • fetch APIを介してWebサーバ「hi」に向かいます.htmlファイルを要求します.
  • サーバからの応答が完了すると、then()の関数が実行されます.(非同期)
  • の後にコールバック関数が与えられる場合、fetch APIは応答オブジェクトを最初のパラメータの値とする.

    • Hashbang(#!)


    ハッシュ(#)ブックマーク機能を使用してurlを変更し、画面を移動する(ページ再ロードx)
    ページにidが存在しない場合はurlのみ変更
    単一ページアプリケーションでのページ移動
    // 해쉬뱅 사용 예시
<a href="#!example.html" onclick="fetchPage('example.html')">Example</a>

<script>
function fetchPage(name) {
	fetch(name).then(...);
}

// 사용자가 url을 직접 입력하여 들어온 경우 onclick이 발생하지 않으므로 따로 처리
if(location.hash) {	// url에 해쉬가 있다면, location.hash : 현재 url의 해쉬
	fetchPage(subStr(1,location.hash)); // !를 제거해서 fetchPage를 호출
} else {
	fetchPage('welcome.html');
}
</script>
    Ajaxで検索エンジンを最適化できないなどのデメリットがあり、最近ではPjaxを使っています

    データと論理を分離する

    // before
<body>
  ...
  <ul id="nav">
	<li><a href="#!html" onclick="fetchPage('html')">html</a></li>
    <li><a href="#!css" onclick="fetchPage('css')">css</a></li>
    <li><a href="#!javascript" onclick="fetchPage('javascript')">javascript</a></li>
  </ul>
</body>
    // after 1
// list 파일 :  li 태그들이 존재 
<body>
  <ul id="nav">
  </ul>

  <script>
    fetch('list').then(function(response){
    	response.text().then(function(text){
        	document.querySelector('#nav').innerHTML = text;
        })
	});
  </script>
</body>
    // after 2
// list 파일 : "html, css, javascript"
  <script>
  fetch('list').then(function(response){
    response.text().then(function(text){
      var items = text.split(',');
      var i = 0;
      var tags = '';
      while(i<items.length){
        var item = items[i];
        item = item.trim();
        var tag = '<li><a href="#!'+item+'" onclick="fetchPage(\''+item+'\')">'+item+'</a></li>';
        tags = tags + tag;
        i = i + 1;
      }
      document.querySelector('#nav').innerHTML = tags;
    })
  });
  </script>

    polyfill


    polyfillをWebサーバにダウンロードし、ページにを含めると、APIをサポートしていないブラウザはpolyfillで置き換えられ、最新のブラウザは独自のAPIを使用します.

    키워드

  • XML
  • JSON
  • PJAX : pushState + Ajax
  • Progressive Web Apps : SPA + offline
    • Amazon Mock Interview
    Different platform, different keycodes