XMLHttpRequest使用

1.什么是XMLHttpRequest

XMLHttpRequest是一个浏览器接口，使得Javascript可以进行HTTP(S)通信，这就是我们熟悉的AJAX。
早期，各个浏览器的实现都不同，HTML5之后，W3C进行了统一。

2.XMLHttpRequest使用示例

        function verifyCode(dologin){
            var xhr = new XMLHttpRequest();
            xhr.timeout = 30000;
            xhr.ontimeout = function (event) {
                $scope.changeImg();
                alert("登录超时，请重试！");
                return;
            }
            
            //post方式
            /*var formData = new FormData();
            formData.append('code', $scope.user.code);
            xhr.open('POST', $scope.verifyCodeUrl);
            xhr.send(formData);*/
            
            //get方式
            xhr.open('get',$scope.verifyCodeUrl+'?code=' + $scope.user.code);
            xhr.send(null);
            xhr.onreadystatechange = function(){
                /*if(xhr.readyState == 0)console.log('请求未初始化，还没有调用 open()')
                if(xhr.readyState == 1)console.log('请求已经建立，但是还没有发送，还没有调用 send()')
                if(xhr.readyState == 2)console.log('请求已发送，正在处理中（通常现在可以从响应中获取内容头）。')
                if(xhr.readyState == 3)console.log('请求在处理中；通常响应中已有部分数据可用了，没有全部完成。')*/
                if(xhr.readyState == 4 && xhr.status == 200) {
                    if(xhr.responseText != 'true'){
                        $scope.changeImg();
                        $scope.loginError = '验证码错误！';
                        ($scope.$$phase || $scope.$root.$$phase) ? '' : $scope.$apply();
                        return;
                    }
                    dologin();
                }
            }
        }

属性说明：

• xhr.readyState：XMLHttpRequest对象的状态，等于4表示数据已经接收完毕。
• xhr.status：服务器返回的状态码，等于200表示一切正常。
• xhr.responseText：服务器返回的文本数据
• xhr.responseXML：服务器返回的XML格式的数据
• xhr.statusText：服务器返回的状态文本。

3.跨域资源共享（CORS）

XMLHttpRequest可以向不同域名的服务器发出HTTP请求，叫做CORS
可以进行CORS有两个条件:
1)浏览器要支持CORS
2)服务器允许跨域：响应头需要添加一下选项

self.set_header('Access-Control-Allow-Origin', '*')
self.set_header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS')
self.set_header('Access-Control-Max-Age', 1000)
self.set_header('Access-Control-Allow-Headers', '*')
self.set_header('Content-type', 'application/json')

参考原文：https://www.cnblogs.com/shijingjing07/p/7096657.html