Ajax & fetch

5062 ワード
JavaScript テキストリンク
Ajax(Asynchronous JavaScript and XML)
Ajax関連リンク
Ajaxは、非同期JavaScriptやサーバと通信するためのFetch、XMLHttpRequestなどを使用してサーバからリソースを要求および受信し、DOMの一部をJSに変更します.
  • Ajaxを導入する前に、静的ページレンダリングが行われました.
  • The old way
    -タグを使用したページ切り替えとリクエストへの応答
  • ページ遷移は、必要な部分だけでなく、すべてのページをロードします.
  • dynamic web page
  • サーバと自由に通信可能
    -XMLHttpRequest(XHR)
  • ページを点滅させることなくシームレスに操作
    -JavaScriptとDOM
    • を使用
  • は単純なWebページではなく、より大きなアプリケーションがダウンタイムし、
    • が表示されます.
    fetch
  • サーバリソースを取得するためのAPI
  • は非同期で動作します.
    • fetchの使い方
    1.fetchを使用すると、Http応答がオーバーフローします.
    2.http.json()を使用すると、http応答のbody部分がjsonに分割されます.
    3.JSON.parseを書くと、Http応答全体がグループ化され、Http応答にはヘッダ、ボリュームなどが含まれているので書けません.
    fetch(url) //url 서버에 접근한다. Promise를 반환한다.
.then(response => response.json()) 
// response는 단순한 HTTP Response이며, 실제 JSON이 아니기 때문에 Response에 내장되어 있는 json()을 이용하여 JSON화 시킨다.
.then(json => console.log(json))//JSON화 된 자원을 콘솔에 출력
  • 以上のコードは最も簡単なfetchの使用例である.fetchにurlのみが記載されている場合、GETプロトコルが使用される.
    • let data = {
  'name': '김코딩',
  'age': 25
}
fetch(url, {
  method: 'POST',
  body: JSON.stringify(data),
  headers: 'Content-Type': 'application/json'
}) //url 서버에 접근한다. Promise를 반환한다.
.then(response => response.json()) 
// response는 단순한 HTTP Response이며, 실제 JSON이 아니기 때문에 Response에 내장되어 있는 json()을 이용하여 JSON화 시킨다.
.then(json => console.log(json))//JSON화 된 자원을 콘솔에 출력
  • ビットコードは、POSTプロトコルを利用する方法である.POSTは、サーバにリソースを格納するためのHTTP methodである.そのため、この場合はHTTP methodを記入し、サーバに格納するデータJSON化してbodyに入れ、headers部分を記入する必要がある.
    • なぜfetchを使うのですか?
  • サーバリソースを取得します.
  • XHR、jQuery ajaxもサーバのリソースをもたらすことができますが、fetchコードは可読性が高く、他のAPIよりも書きやすいです.
    • [伯俊]9237招待する
    Activityロック状態でのライフサイクル