Ajax中的XMLHttpRequest

Ajax是什么

Asynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种新技术，而是提出的新术语。XMLHttpRequest是其核心。

XMLHttpRequest

XMLHttpRequest是一个对象实例，目的是使javaScript能向服务器发送一个http请求。

创建请求

            let httpRequest = new XMLHttpRequest();
            //获得返回数据并处理
			httpRequest.onreadystatechange = function () {
				console.log(httpRequest.responseText);
			};
            //第三个参数代表是否为异步，true表示异步；false浏览器一般不支持
			httpRequest.open('GET', 'http://localhost:8088/jdbc', true);
			httpRequest.send();

onreadystatechange 属性

			//处理服务器响应
			httpRequest.onreadystatechange = function () {
                if (httpRequest.readyState === 4) {
                    if (httpRequest.status === 200) {
                    //httpRequest.responseText – 服务器以文本字符的形式返回
                    //httpRequest.responseXML – 以 XMLDocument 对象方式返回
                        console.log('ok')
                    }
                } else {
                    console.log('there is something wrong');
                }
			};

设置请求头

            httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            httpRequest.send('userName=' + encodeURIComponent(userName));

监测进度

              //progress 检索的数据量发生了变化。
              //load 传输完成，所有数据保存在 response 中。
            httpRequest.addEventListener("progress", updateProgress);
            httpRequest.addEventListener("load", transferComplete);
            httpRequest.addEventListener("error", transferFailed);
            httpRequest.addEventListener("abort", transferCanceled);

提交表单

		使用 纯ajax，POST 方法，设置enctype
		Content-Type: multipart/form-data
		Content-Type: text/plain
		Content-Type: application/x-www-form-urlencoded

		使用FormData

同步或异步

一般使用异步

    <script>
        //异步
        // 在一些需求情况下,必须读取多个外部文件. 这是一个标准的函数. 该函数使用XMLHttpRequest对象进行异步请求.
        // 而且可以为每个文件读取完成后指定不同的回调函数.
        function xhrSuccess() {
            this.callback.apply(this, this.arguments);
        }

        function xhrError() {
            console.error(this.statusText);
        }

        function loadFile(url, callback /*, opt_arg1, opt_arg2, ... */) {
            var xhr = new XMLHttpRequest();
            xhr.callback = callback;
            //截取loadFile函数中的第3个及之后的参数
            xhr.arguments = Array.prototype.slice.call(arguments, 2);
            xhr.onload = xhrSuccess;
            xhr.onerror = xhrError;
            xhr.open("GET", url, true);
            xhr.send(null);
        }

        function showMessage(message) {
            console.log(message + this.responseText);
        }

        loadFile("http://localhost:8088/jdbc", showMessage, "New message!\n\n");
    </script>

    <script>
        //同步
        var request = new XMLHttpRequest();
        request.open('GET', 'http://localhost:8088/jdbc', false);
        request.send(null);
        //不再需要callback
        if (request.status === 200) {
            console.log(request.responseText);
        }
    </script>

参考文档

MDN 使用 XMLHttpRequest