XmlHttpRequest のフェッチ

XmlHttpRequest オブジェクトの理解

XMLHttpRequest オブジェクトは、XML ベースの HTTP リクエストです。これは、サーバーとやり取りするためのブラウザインターフェースです。XMLHttpRequest を介して、特定の URL をリクエストして、ページを更新せずにデータを取得できます。名前は XMLHttpRequest ですが、実際にはあらゆる種類のデータの取得に使用されます。

XMLHttpRequest オブジェクトの使用方法

XMLHttpRequest オブジェクトを作成する

var xhr = new XMLHttpRequest();

http 接続を確立する

xhr.open('GET', '/login');

リクエストを送る

xhr.send()

戻りデータを取得する

//就等待远程主机做出回应。这时需要监控XMLHttpRequest对象的状态变化，指定回调函数 
xhr.onreadystatechange = function(){
    
    
　　　　if ( xhr.readyState == 4 && xhr.status == 200 ) {
    
    
　　　　　　alert( xhr.responseText );
　　　　} else {
    
    
　　　　　　alert( xhr.statusText );
　　　　}
　　};

レディステート

価値	州	説明
0	`UNSENT`	XMLHttpRequest プロキシが作成されましたが、open() メソッドが呼び出されていません
1	`OPENED`	`open()`メソッドが呼び出されました
2	`HEADERS_RECEIVED`	send() メソッドが呼び出され、応答ヘッダーが受信されました
3	`LOADING`	レスポンスボディ部受信中
4	`DONE`	要求された操作が完了しました。これは、データ転送が完全に完了または失敗したことを意味します

リクエストを終了する

XMLHttpRequest.abort()
//当一个请求被终止，它的  readyState 将被置为0,并且请求的 status 置为 0。

フェッチ

概要

Fetch API は、 HTTP 要求と応答にアクセスして操作するための JavaScript インターフェースを提供します。また、ネットワーク全体で非同期にリソースを取得するための簡単で適切な方法を提供するグローバルfetch()メソッド。

特徴

標準の Promise 実装に基づいて、async / await をサポート
XHR からの脱却は、ES 仕様の新しい実装です。
構文は簡潔でよりセマンティックです

質問

fetch は中止をサポートしていません(xhr にはリクエストを直接ブロックできる xhr.abort メソッドがあります)
fetch にはリクエストの進行状況をネイティブに監視する方法はありませんが、XHR にはできます。
フェッチの互換性はあまり良くありません。IE はサポートしていません。

知らせ

fetch はネットワークリクエストのエラーのみを報告し、400 と 500 の両方が成功したリクエストと見なされます. サーバーが 400 と 500 のエラーコードを返す場合、サーバーは拒否しません. ネットワークエラーが原因でリクエストを完了できない場合のみ、fetch は拒否されます. 処理にはカプセル化が必要です。
fetch はデフォルトでは Cookie を取得しません。構成項目を追加する必要があります: fetch(url, {credentials: 'include'})

フェッチ使用

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

<!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>
    <form id="myform">
        <input type="text" placeholder="community" id="community">
        <input type="text" placeholder="parkingLotId" id="parkingLotId">
        <input type="text" placeholder="name" id="name">
        <input type="text" placeholder="status" id="status">
        <button>添加</button>
    </form>
</body>
<script>
    let form = document.querySelector('#myform')
    form.onsubmit = async function (e) {
    
    
        e.preventDefault();//阻止事件的默认行为
        //获取每个输入框的值
        let community = document.querySelector('#community').value
        let parkingLotId = document.querySelector('#parkingLotId').value
        let name = document.querySelector('#name').value
        let status = document.querySelector('#status').value
        let obj = {
    
     community, parkingLotId, name, status }
        //发起请求   
        let result = await fetch('/parking-lot/add', {
    
    
            method: 'post',
            headers: {
    
    
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(obj)
        });
        let data = await result.json();
        if (data.status == 201) {
    
    
            alert('添加成功')
        }
    }
</script>

</html>

XmlHttpRequest オブジェクトの理解

XMLHttpRequest オブジェクトの使用方法

フェッチ

概要

特徴

質問

知らせ

フェッチ使用

おすすめ