ajax入门之创建XHR对象

时间 2021-02-20

标签 javascript php html java ajax 浏览器异步函数 post url 栏目 Ajax 繁體版

原文原文链接

ajax入门之创建XHR对象

今天帮朋友写了一个简单的ajax的demo,发现了一些东西，决定写一篇文章记录一下，避免之后挖坑。javascript

建立XMLHttpRequest

一般

function createXHR(){
        if(XMLHttpRequest){
            return new XMLHttpRequest();
        }else{
            return new ActiveXObject('Microsoft.XMLHTTP')
        }
    }

这一段js代码来源自w3school,用于建立兼容各浏览器的XMLHttpRequest对象的含义：php

检测客户端是否有XMLHttpRequest，不然使用ActiveXObject

关于XMLHttpRequest对象，IE5是第一个引入XHR对象的浏览器，在IE5中，XHR是经过activeX对象实现的.所以在IE中可能遇到三种不一样版本的XHR对象，MXSML2.XMLHTTP，MXSML2.XMLHttp.3.0和MXSML2.XMLHttp.6.0。html

IE的坑

为了向咱们伟大的IE浏览器“致敬”，咱们必须添加额外的代码进行建立
如下代码适用与IE7如下的状况：java

function createXHR(){
    if(typeof argument.callee.activeXString != 'string'){
        var versions = ['MXSML2.XMLHTTP','MXSML2.XMLHttp.3.0','MXSML2.XMLHttp.6.0'];
        var i len;
        for(i = 0;len=versions.length;i<len;i++){
            try{
                new ActiveXObject(varsions[i]);
                argument.callee.activeXString = varsions[i];
            }catch{
                <!-- 跳过 -->
            }
        }
    }
    return new ActiveXObject(argument.callee.activeXString);
}

完整走一遍

但每每我不会考虑这么多，能看懂前面的函数也是很不容易了，再让我写出来，个人天！当你们和我这么懒的时候，能够直接使用第一份代码，也就是w3school那一套代码，咱们使用原生的XHR对象进行建立。
固然，咱们这里也给出完整的代码。ajax

function createXHR(){
    if(typeof XMLHttpRequest != 'undefined'){
        return new XMLHttpRequest();
    }else if(typeof argument.callee.activeXString != 'string'){
        var versions = ['MXSML2.XMLHTTP','MXSML2.XMLHttp.3.0','MXSML2.XMLHttp.6.0'];
        var i len;
        for(i = 0;len=versions.length;i<len;i++){
            try{
                new ActiveXObject(varsions[i]);
                argument.callee.activeXString = varsions[i];
            }catch{
                <!-- 跳过 -->
            }
        }
        return new ActiveXObject(argument.callee.activeXString);
    }else{
        throw new Error("没有XHR对象存在");
    }
}

用法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
</head>
<body>
        <form>

        <button onclick="returnText();return false">登录</button>
    </form>
    <script type="text/javascript">
        function returnText(){
            var xhr = createXHR();
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                        alert(xhr.responseText);
                    }else{
                        alert('获取失败'+xhr.status)
                    }
                }
            }
            xhr.open('get','demo.php',true);
            xhr.send(null);

        }
        function createXHR(){
            if(typeof XMLHttpRequest != 'undefined'){
                return new XMLHttpRequest();
            }else{
                return new ActiveXObject('Microsoft.XMLHTTP')
            }
        }
    </script>
</body>
</html>

建立好XHR对象只是第一步，才是咱们各类操做的开始。浏览器

open()

open()函数会启动一个请求,但并非发送，能够看做办事以前的准备。
它接受三个函数:异步

open(get/post,url,false/true)

请求类型:最经常使用的就是get和post函数
路径：就是要请求的操做的文件的urlpost
是否异步url

咱们这是使用的是get方式，由于咱们并无要发送的数据。
异步咱们选择了true,无心中发如今使用false时候，火狐出现了警告：

主线程中同步的 XMLHttpRequest 已不推荐使用，因其对终端用户的用户体验存在负面影响。

具体须要再了解。

send()

天然而然，准备好了就要发送，send()只接受一个参数，那就是要发送的数据。咱们使用的是get，没有数据，那就null好了。

php

由于这篇文章主要是讲ajax，因此php部分我只用了最简单的echo

<?php
    echo '成功了';
 ?>

这样就能在接受到请求后返回一个字符串。

回调函数

咱们怎么样才能直到php文件将数据处理完，返回给客户端了呢？
这时候咱们就须要监测XHR的readyState属性。先介绍如下readyState属性：

0：初始化未完成，未调用open()
1: 启动调永了open()函数，可是尚未send
2：发送，调永了send()函数，尚未接收到响应
3：开始接收,接收到部分的数据
4：完成，接收到了所有数据。

因此在上面的函数中咱们能够看到，咱们去监测readyState属性，等到等于4的时候，也就是数据接收完成以后，咱们开始对数据进行处理。

小结

这是一个手动建立XHR对象并使用最简单的方法。之后回继续进行更新。介绍其更详细的用法。