XMLHttpRequest -リロードせずにWebページを更新するための素晴らしいオブジェクト

5891 ワード
beginners javascript html tutorial テキストリンク
の場合は、ユーザーが単一のボタンをクリックしてバックグラウンドでの要求をAPIに要求を送信することができます、単純なWebページを作成したいと思いますpublicly available API , そして、一旦その要求に対する応答が受信されたならば、それをウェブページの上の良い方法で表示してください
さて、これはXMLHttpRequestのおかげで、クライアント側から可能です.

APIとWebページの目的の選択


この例では、waifu.im
Webページは、このAPIによって提供されるランダムなイメージを表示することができなければなりません/random/ ユーザが特定のボタンをクリックするたびに
このイメージは、2つのラジオを使用してユーザーが指定したパラメータに適合します.<input type="radio"> )

HTMLファイルの作成


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>getWaifu</title>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body>

        <!-- 1st part: Allow the user to specify what sort of image they want -->
        <div id="parameters">
            <div id="img_type" class="parameter">
                <input type="radio" id="png_jpg" name="img_type" value="PNG_JPG" checked>
                <label for="png_jpg">Not Animated (PNG/JPG)</label><br>
                <input type="radio" id="gif" name="img_type" value="GIF">
                <label for="gif">Animated (GIF)</label><br>
            </div>
            <div id="safe" class="parameter">
                <input type="radio" id="sfw" name="safe" value="SFW" checked>
                <label for="sfw">Safe For Work (SFW)</label><br>
                <input type="radio" id="nsfw" name="safe" value="NSFW">
                <label for="nsfw">Not Safe For Work (NSFW)</label><br>
            </div>
        </div>

        <!-- 2nd part: Give the user an image that matches the parameters -->
        <button id="trigger" onclick="waifu('random', document.getElementById('parameters'), document.getElementById('display'))">Get a Waifu!</button>

        <!-- 3rd part: Create a "home" or "container" for the image -->
        <div id="display">
            <span style="display: none">Placeholder~</span>
        </div>

    </body>
</html>
ボディの第1の部分は、パラメータを保持します:ユーザーは、イメージがアニメーションでなければならないかどうか、そして、それが「仕事のために安全であるべきかどうか」を決定します
本体の2番目の部分は機能を呼び出す一つのボタンですwaifu() ) ファイルをクリックすると、将来のJSファイルで指定されます"random" 第1および第3の部分の引数と同様に
ボディーの第3の部分は、我々が見えないところを取り替えて、イメージが現れることを望むところですspan プロセス中のプレースホルダ

JSファイルの作成


function waifu(route, params, display) {

    // Figure out what are the specified parameters
    let inputs = params.getElementsByTagName("input")
    let gif = inputs.gif.checked
    let nsfw = inputs.nsfw.checked

    // Create the request
    let xhr = new XMLHttpRequest()
    xhr.open("GET", `https://api.waifu.im/${route}?is_nsfw=${nsfw}&gif=${gif}`)
    xhr.setRequestHeader("Accept", "application/json")

    // Specify the behaviour upon receiving a response
    xhr.onreadystatechange = () => {
        if (xhr.readyState !== 4) return
        let data = JSON.parse(xhr.response).images[0]

        // Create the image element
        let image = document.createElement("img")
        image.setAttribute("src", data.url)
        image.setAttribute("alt", "Couldn't load the image... ><")

        // Put it on the website
        display.replaceChild(image, display.lastElementChild)
    }

    // Send the request
    xhr.send()
}
第一に、我々はparams ユーザーが望むイメージがGIFでなければならないかどうか、そして、それがNSFW
一旦それがされるならば、我々はリクエストを構築するために必要なすべてを持っていますxhrリクエストのURLでroute 常に"random" その関数を呼び出す唯一のボタンが
私たちは単純なGETリクエストをしています、そして、我々は応答のデータがJSON形式であると思っています
次に、リクエストのステータスが変更されたときに何が起こるかを指定しますif (xhr.readyState !== 4) return 行は、応答が受信されない限り、以下のコードを実行すべきではないことを意味します
下記のコードでは、我々はimg レスポンス内で受信したプロパティを使用する要素data.url ) そして、我々はウェブサイトにその要素を使用してdisplay , 何でも取り替えて!(関数がコールされた最初の場合、プレースホルダ
このコードは多くのプロパティdata 保持し、それはあなたがイメージについての詳細をたくさん表示することができます、もっとたくさん持っている!
リクエストのすべての詳細が指定されたので、リクエストをxhr.send() , そして魔法が起こる!

結果を見る


注:上記のすべてのコードのライブの例here
今私たちが完了したら、ブラウザでHTMLファイルを開くことができますし、ネットワークのモニタを開くことができます(Ctrl + Shift + e Firefoxで、Ctrl + Shift + Jをクリックして“ネットワーク”の任意のクロムベースのブラウザ)をクリックし、Webページ上のイメージを取得するボタンをクリックしてください!

最後の2つのリクエストを見ますか?最初の要求は、APIを取得するにはdata そしてそれを使用してWebページを変更するには!
番目の要求は、実際に画像を取得するものです最初のリクエストでは、画像のURLを<img> 要素、しかし、この要素がウェブページにある今、それはそのsrc 属性!もちろん、そのsrc 属性は最初のリクエストから取得したURLです
私は、これがほとんどすべてをカバーすると思っています!
XMLHttpRequestは本当にクレイジーです、それはあなたがユーザーの要求をし、任意のデータを受信することができますように、いつでも(何かをクリックするだけではない!)そして、あなたがそれを望むならば、そのデータについて何かをするために、ユーザーのウェブページを変えることを含むその完全性に!
私はあなたがこれを行うことができます楽しいことを想像し、さらにもっと楽しく実際にそれを作ることを望む!
Activity(2.ジャンプ)
オブジェクト指向プログラミング