본문 바로가기

ajax3

Ajax with Fetch Fetch는 Promise-based다.단, 브라우저 호환성(Internet Explorer 등)의 문제로 Polyfill이 필요할 수 있다. fetch 사용법은 매우 간단하다.fetch(''); 주의할 것은 Cross-Origin Issue가 있을 수 있다는 점이다.Fetch가 간편하고 XHR object를 대체한다고 해서, 비동기 네트워크 요청을 하는 데 필요한 본래의 규칙들을 모두 스킵할 수 있는 것은 아니다! Fetch도 여전히 자원을 공유하는 데 있어 cross-origin protocol를 따라야 한다. 즉 기본적으로, 데이터를 load하게 될 사이트와 동일한 도메인에 있는 데이터에 대한 요청만 할 수 있다(Same origin policy). Fetch에서 또 하나 추가된 것은 'Header.. 2018. 7. 3.
Ajax with jQuery jQuery는 각종 브라우저들이 아직 완전히 표준화되어 있지 않을 때, 개발자들이 태그 안에 jQuery를 포함시킴으로써 여러 브라우저에서 모두 JavaScript 코드가 잘 작동하도록 해주었다.최근에는 브라우저들이 꽤나 align 되어있는 상황이고, 따라서 jQuery가 꼭 필요하지는 않은 것이 사실이다. 하지만 jQuery가 제공하는 ajax() 메소드 만큼은 아주 강력하다. $.ajax();$.ajax({ url: 'https://swapi.co/api/people/1/' });위와 같은 방식으로 사용한다.즉 괄호 안에 Object를 넣어주면 된다. 하지만 이렇게만 하면 response를 받을 수 없다. done() 메소드를 사용해야 한다.function handleResponse(data) { c.. 2018. 7. 3.
Ajax with XHR Ajax AJAX는 "Asynchronous Javascript and XML"의 약자다. 그러나 최근에는 XML 뿐만 아니라 수많은 데이터 형태들(Javascript, JSON, html 등)을 모두 뜻하며, "어떤 데이터를 비동기적(Asynchronous)으로 요청하고, 요청이 돌아오면 그 데이터를 활용"하는 것으로 이해하면 된다.사실 최근에는 XML보다는 JSON이 훨씬 많이 쓰여서, AJAJ라고 하는 게 더 맞는 것 같기도 하다(물론 실제로 그렇게 부르진 않지만). AJAX의 Asynchronous, 즉 비동기라는 것은, "요청이 다른 이벤트의 발생을 막지(block) 않는다"는 뜻이다.대신, 페이지는 하던 일을 계속 하고, 서버로부터 응답으로 받은 데이터를 사용하게 된다. 만약 클라이언트가 동기.. 2018. 7. 3.