JavaScript: XMLHTTPRequest

XMLHttpRequest (javascript.info)

<body>
    <script>
        // Create a new XMLHTTPRequest object
        let xhr = new XMLHttpRequest()
        xhr.timeout = 5000  // timeout in ms
        let url = new URL('https://cursive.winch.io/cookie.png')
        url.searchParams.set('q', 'test me!')  // https://cursive.winch.io/cookie.png?q=test+me%21
        // Configure
        xhr.open('GET', url)
        // Send the request over the network
        xhr.send()
        // This will be called after the request is complete (even if HTTP status is like 400 or 500), and the response is fully downloaded
        xhr.onload = function () {
            if(xhr.status != 200) {
                console.log(`Error: ${xhr.status}: ${xhr.statusText}`)
            } else {
                console.log(`Done: ${xhr.response} bytes`)
            }
        }
        // When the request couldn't be made, e.g. network down or invalid URL https mistach
        xhr.onerror = function () {
            console.log('onerrror')
        }
        // Triggers periodcally while the response is being downloaded, reports how much has been downloaded
        xhr.onprogress = function (event) {
            // event.loaded - how many bytes downloaded
            // event.lengthComputable = true if the server sent Content-Length header
            // event.total - total number of bytes (if lengthComputable)
            if(event.lengthComputable) {
                console.log(`Received ${event.loaded} of ${event.total} bytes`)
            } else {  // no Content-Length
                console.log(`Received ${event.loaded} bytes`)
            }
        }
        xhr.onreadystatechange = function () {
            console.log(xhr.readyState, 55)
            if(xhr.readyState === XMLHttpRequest.HEADERS_RECEIVED)
                console.log('HEADERS_RECEIVED')
            else if(xhr.readyState === XMLHttpRequest.LOADING)
                console.log('LOADING')
            else if(xhr.readyState === XMLHttpRequest.DONE)
                console.log('Done')
        }
    </script>
</body>

setup

Response Type

<body>
    <script>
        let xhr = new XMLHttpRequest()
        xhr.open('GET', 'http://cursive.winch.io:3000/xhr')
        xhr.responseType = 'json'
        xhr.send()
        xhr.onload = function () {
            console.log(typeof this.response)
            console.log(this.response)
        }
    </script>
</body>

测试发现json,任何Content-Type都能解析, document可不设置或必须正确设置

Synchronous 绑定事件需在send前, 否则事件绑定无效

<body>
    <script>
        console.log('start')
        // 1. 创建ajax对象 synchronous
        const xhr = new XMLHttpRequest()
        // 2. 配置请求信息, synchronous
        xhr.open('get', 'http://cursive.winch.io:3000/xhr', async = false)
        // 4. 发送请求
        xhr.send()
        // 3. 绑定事件
        xhr.onload = function () {
            console.log('xhr.onload', this)
            console.log(JSON.parse(this.response))
        }
        console.log('end')
    </script>
</body>

ReadyState

<body>
    <script>
        /**
         * readyState == 0 创建ajax对象成功, XMLHTTPRequest.UNSENT, initial state
         * readyState == 1 配置请求信息完成, XMLHTTPRequest.OPENED, open called
         * readyState == 2 响应报文回到了浏览器, XMLHTTPRequest.HEADERS_RECEIVED, response headers received
         * readyState == 3 浏览器正在解析响应报文, XMLHTTPRequest.LOADING, response is loading (a data packet is received)
         * readyState == 4 解析响应报文成功, 可使用xhr.response, XMLHTTPRequest.DONE, request complete
         *
         * 同步时, 只有 0 1 4 没有 2 3 状态
         * 异步时 0 1 2 3 4
         */
        const xhr = new XMLHttpRequest()
        console.info(`xhr.readyState = ${xhr.readyState} UNSENT`)  // 0
        xhr.open('get', 'https://cursive.winch.io:/cookie.png', async = true)
        console.info(`xhr.readyState = ${xhr.readyState} OPENED`)  // 1
        xhr.onreadystatechange = function () {
            console.info(`xhr.readyState = ${xhr.readyState}`)  // 1
            if(xhr.readyState === XMLHttpRequest.HEADERS_RECEIVED)
                console.info(`xhr.readyState = ${xhr.readyState} HEADERS_RECEIVED`)  // 1
            else if(xhr.readyState === XMLHttpRequest.LOADING)
                console.info(`xhr.readyState = ${xhr.readyState} LOADING`)  // 1
            else if(xhr.readyState === XMLHttpRequest.DONE)
                console.info(`xhr.readyState = ${xhr.readyState} DONE`)  // 1
        }
        xhr.send()

    </script>
</body>