原生 AJAX 入门

在使用 jQuery 开发了很多网站之后，对原生的 JS 是越来与生疏了，但是对于任何一门语言来说，框架只会让事情事半功倍，但归根结底，还是语言原生的特性是根本。
　　对于JS来说，基于浏览器这个宿主环境，其有很多尴尬的地方，例如兼容性不好，对于多种浏览器来实现兼容，导致代码很臃肿；原生的很多方法属性使用十分不便捷等。但对于一门语言要想深入，掌握其原生的特性还是十分必要的，毕竟相对于 jQuery 这种类库或者框架来说，要知其然，还要知其所以然。
　　来自维基百科的关于AJAX 的解释是：Asynchronous JavaScript and XML（异步的JavaScript和XML技术，但其实AJAX的实现不一定和 XML 有关系，也即AJAX和数据格式无关），是一种创建交互式网页应用的网页开发技术，是多种技术的组合。目的就是让前台的数据交互变得更快捷，不用刷新页面就可以完成数据的更新。
　　AJAX 的优点很明显，利于用户体验，在不刷新页面的情况下利用DOM交互可以更新页面内容，不会打断用户的操作，由于其获取和发送的数据量小的特点（获取数据格式可以使XML或者JSON或者其他，不是整个页面），减小服务器压力也是它的一个优点。
　　而缺点，就是倍受人们关注的SEO问题（Google使用#!这种规定来支持AJAX的SEO，但是百度貌似还没有支持，所以做互联网的人，如果用百度的话，我劝你趁早转行，不要告诉我不稳定，不会那啥），前进后退问题（可以用其他方法解决HMTL5新增了相应的API），以及必须重视的安全问题等都是它现存的一些缺点。
　　而AJAX 的应用范围，这其实这是一个太宽泛的问题，各人及各项目都有不同的用处，只要是能够提升用户体验的地方，都可以使用AJAX，但是对于什么是用户体验，又是一个写几本书都写不完的东西了。举例子来说，对于Gmail这类应用，其实可以看做SPA(单页面应用,Single Page Application)应用，所以整站都不需要刷新，而对于G+ 这种网站来说，虽然可以不整站刷新，但是整站刷新其实并没有什么不妥的地方，而不整站刷新，反而带来了页面假死的现象。据说知乎内部也有类似于G+的项目，但是我觉得这种应用，对于知乎来说，其实并不一定适合，在越来越快的网速这种情况下，其实还是整个页面刷新来的舒服，当然了，这个只是个人观点。而对于小面积更新数据来说，比如对用户名或者邮箱唯一性（输入框失去焦点后）等数据判断、选项卡（选项卡切换AJAX加载）、弹出的登录注册窗口（可以AJAX返回HTML结构）以及用户提交表单信息后的反馈信息等等，这种形式确实非常合适的。
　　来了这么多开胃菜，其实很多人已经烦了，那么我们就开始来点干货，下面将通过一个新用户注册的过程来浅尝辄止的讲解下AJAX的基础知识。
　　注册表单要求：用户名为邮箱，唯一性，密码必须大于六位，为了简单起见，这里不做过多合法性验证。
　　AJAX出现之前，如果要注册新用户的话，用户必须填写完所有必填信息，然后单击提交按钮，将数据提交到服务器之后，才能验证数据的合法性，例如验证邮箱唯一性，提交表单之后，必须经过服务器判断邮箱的唯一性，然后刷新页面在显示此邮箱是否是唯一的，可用来注册的（其实还可以用隐藏iframe来实现）。而有了AJAX之后，当用户将邮箱输入完成，此输入框失去焦点的时候，通过AJAX查询服务器，然后给出邮箱是否是唯一的结果，虽然也经过了服务器的交互，但是页面没有刷新，并且交互的数据量非常小，发送的数据除了必要的头信息就是查询数据，而接受的数据除了头信息之外，甚至可以减少到只用数字0或者1来表示数据是否合法。
　　来看HTML结构代码：

<form id="register" method="POST" action="register.php">
    <label>邮 箱：<input type="text" id="email" placeholder="请输入邮箱地址"></label>
    <label>密 码：<input type="password" id="password" placeholder="请输入密码"></label>
    <input type="submit" value="提交">
</form>

　　除了表单页面之外，还需要有一个后端页面register.php来负责验证数据的合法性以及注册过程，这里是后端页面，就不给出具体代码了。
　　接下来就交给AJAX来实现了，当邮箱输入框失去焦点时使用 GET 方式来和后台交互以验证此邮箱的唯一性。
　　而当点击提交按钮时，使用 POST 方式来和后台交互，以验证是否能够注册成功。
　　除了HTML和PHP之外，接下来就是AJAX发挥作用的时候了。
　　提到AJAX，就不得不提XMLHttpRequest（XHR） 对象，它是W3C的一个标准，也是AJAX最核心也是最底层的对象，但是悲剧的是IE系列，直到IE7+ 才实现了W3C的标准XHR对象，但是我们还是要支持IE6的啊（万恶的IE6，这里不得不说，其实很多地方都误解了微软，在IE5中微软就实现了XHR对象，后来各个浏览器厂商才逐渐的实现此对象，只不过IE5/IE6是按微软自己的方式来实现的，使用的是ActiveX对象），所以不得不做兼容性处理。
　　为了兼容IE6，那我们就写兼容性的代码吧。

function creatXHR(){
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    } else {
　　  alert(‘此浏览器不支持 XHR ！’);
    }
}

　　使用此代码来创建一个创建兼容XHR对象的函数，第二行先判断window是否有XMLHttpRequest这个属性，如果有则证明是支持W3C标准的XHR对象，否则就是IE6了（已经可以不用考虑其他浏览器了），使用微软的方式来创建XHR对象，所幸的是其他浏览器的实现和IE早期的实现在内部是兼容的，W3C也兼容（其实W3C的很多标准都是采纳于各个浏览器已经实现的事实标准）。
　　我们先来想想数据验证的过程，获取数据，创建XHR对象，然后使用XHR对象的方法来与服务器交互。先不管具体的交互过程，不管是数据验证还是注册，都是这么三步，那么接下来就实现另外的函数。
　　发送数据并验证：

function validateData(obj,method,url,data){
    var xhr      = creatXHR(),iscancel = setTimeout(function(){xhr.abort();console.log("超时取消！");},5000); // 设定超时取消

    xhr.onreadystatechange = function() {  //绑定事件
        if (xhr.readyState == 4 && xhr.status ==200){ //此时数据可用

            var res = (window.JSON)?(JSON.parse(xhr.responseText)):(eval("("+xhr.responseText+")"));//解析 json字符串

            obj.nextSibling.innerHTML = res.msg;

            if (res.code == 0 || res.code == 2) {
            obj.nextSibling.style.color = 'red';
        } else {
        obj.nextSibling.style.color = '#5B636A';
        };

        clearTimeout(iscancel);//如果响应成功，取消定时函数

        }
    }

    //检测 Method 方法，GET POST
    if (method.toLowerCase() === "get") {
        xhr.open("GET",modiUrl(url,data),true);
    xhr.send(null);
    } else if (method.toLowerCase() === "post"){
    xhr.open("POST",true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.send(serialize(data));
    };      
}

　　然后来详细阐述一下这个xhr对象的相关内容(获取输入数据就是很正常的获取数据的过程,这里不多说了)。
　　对于vliData() 函数中的XHR而言（并不只是此函数中，所有的XHR对象都一样，后面相同，此处只是为了好说明），要使用XHR对象时，必须调用的第一个方法是open()，即：xhr.open();此方法需要接收三个参数：
　　第一个参数是要发送的请求的类型（GET POST等），
　　第二个参数即请求的 URL，GET请求可以将查询参数追加到URL的末尾，但是每个参数的名值对必须经过encodeURIComponent() 编码才可使用，不然容易发送错误（虽然一般情况下参数的名称都为拼音或者英文，但是还是应该养成每次编码的好习惯）。
　　第三个参数即表示是否是异步发送请求，布尔值，true或者false。上例中已有使用，即：

xhr.open("GET","register.php?"+encodeURIComponent('email')+"="+ encodeURIComponent(email),true);

　　这里使用了 get 方法，异步获取register.php 这个url的数据（url必须同域同端口同协议，否则报安全错误，可以绝对路径或者相对路径）。但是当调用open() 方法的时候并不会真正的发送请求，而是启动一个请求以备发送。而要发送请求，就必须调用send()方法才行。例如上面的代码所示，即：

xhr.send(null);

　　这里的send()必须接受一个参数，即：要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入 null ，因为不传入的话，有些浏览器会报错。
　　好了，数据发送完毕了。
　　数据发送完毕，等到服务器处理完毕并返回，浏览器收到响应的时候，相应的数据就会自动填充XHR对象的相应属性。XHR对象的相应属性主要包括以下几种。
　　responseText : 作为响应主体被返回的文本。
　　responseXML : 如果响应的内容类型是text/xml 或者 application/xml 的时候，这个属性保存这响应数据的XML DOC 文档。
　　status : 响应的http状态。
　　statusText : http状态的说明
　　在接收到响应之后，第一步就是要检查 status 属性，以确定响应已经成功返回，一般来说，可以将http的状态码为200时作为成功的标志（其实还有304等），此时responseText 的内容已经就绪，如果内容类型正确的话，responseXML 也已经可以访问。
　　但是我们这里使用的是异步请求，不像同步请求那样会将JS执行阻塞，当收到响应后才会执行后面的代码。因此要通过事件来确定XHR的状态，因为XHR对象的open() 或者 send() 方法被调用之后，并不清楚XHR 到达什么状态了，所以还要判断 XHR 的状态决定之后该如何处理。
　　对于 XHR 状态的判断，可以检测 XHR 对象的 readyState 属性，该属性表示 XHR 对象请求/响应过程的当前活动阶段，可取值如下：
　　0 ： 未初始化，即尚未调用 open() 方法，
　　1 ： 启动，已经调用open() 方法，但尚未调用 send() 方法，
　　2 ： 发送，已经调用send() 方法，但尚未接收到响应，
　　3 ： 接收，已经接收到部分响应数据，
　　4 ： 完成，已经接收到全部响应数据，即可以在客户端使用数据了。
　　同时，XHR 对象还有一个事件readystatechange ，而readyState 属性的值每变化一次，都会触发一次readystatechange 事件，因此可以通过检测此事件每次触发时readyState属性的值，一般情况下，我们只对readyState的值为 4 时的情况感兴趣，因为此时所有的数据已经就绪可用，不过为了确保浏览器的兼容性，必须在调用 open() 之前指定readystatechange事件处理程序。如上代码所示。

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status ==200){
　　    alert(xhr.responseText);
　　}
}

　　在onreadystatechange事件每次触发时，检测readyState的值，若为 4 ，且status 为200（http状态，前面已说明）时才可以使用此数据。
　　另外，在接收到响应之前，还可以使用 abort() 来取消异步请求。例如当请求相应时间超长时，可以调用此方法，然后将其异步请求取消。如：

var iscancel = setTimeout(function(){xhr.abort();},5000);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status ==200){
        alert(xhr.responseText);
　　  clearTimeout(iscancel);
　　}
}

　　即可在超过5秒钟未收到响应，由于超时而取消本次请求。
　　如果请求发送成功，并且也接收成功的话，responseXML或者responseText也就可用了，此时可以按返回不同的数据来进行处理。目前为了开发简便起见，一般返回的就是html结构或者json数据，关于数据的处理和使用，这里就不涉及了。
　　对于 HTTP 来说，每个请求和响应都会包含相应的头部信息，有的有用，有的没用，同时 XHR 也提供了相应的方法来操作这两种头部的信息，因为其用处不是非常大，所以这里就不再展开了（不过有时候可以通过自定义的头部信息加上后端的配合来实现一些额外的功能），只是在使用 POST 方式请求的情况下，需要用到setRequestHeader() 方法。
　　以上就是一个完整的利用原生的 JS 来写的GET 方式下的 AJAX请求，而POST 方式下的请求我们还没有接触到。那么我们下面就开始阐述一下POST方式下原生 JS 的AJAX请求的实现方法。
　　前面已经说过，XHR对象调用的第一个方法是open()，open() 方法的第一个参数是请求类型，所以POST 方式的 open() 方法即为：

xhr.open("POST","register.php,true);

　　而第二步就是将发送的数据通过 send() 方法发送出去（前面已经讲过）。但是服务器端对于提交的web表单必须经过处理，因为对于POST提交的非表单数据，其处理方式是不同的，也就是后端程序必须要读取前端发过来的原始表单数据，并从中解析出有用的部分，因此我们必须通过XHR模拟表单数据的提交，这也就用到了自定义头部信息。为了保证兼容性，使自定义头部发送成功，必须在open() 方法之后，在 send() 方法之前，设定自定义头部（如果不设定自定义头部的话后端是否可以获取提交的数据呢，答案是可以，但是就不能使用$_POST这种超级全局变量，而只能通过$HTTP_RAW_POST_DATA来获取了，此处基于PHP而言）。

xhr.open("POST",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(data);

　　自定义头部的意思就是表单提交时的内容类型。
　　然后就是要发送的数据了，因为最初XHR设计主要是为了处理 XML，所以这里可以传入XML DOM文档，传入的文档在经过序列化之后作为请求主体被提交到服务器，当然了，这里也可以传入任何想发送到服务器的字符串。我们这里使用提交字符串方式。
　　由于 POST 数据的格式与查询时（GET）字符串格式相同，所以只需要将表单中的数据进行序列化，然后通过XHR发送到服务器即可。

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status ==200){
        alert(xhr.responseText);
    }
}
xhr.open("POST","application/x-www-form-urlencoded");
xhr.send(data);

　　然后就是对表单数据的序列化了。其实和GET数据格式相同，即email=a@b.com&site=yimity.com,但是要编码。这里就不多做讨论了。
　　最终的代码为：

var data = "email=yimity%40gmail.com&password=123456";
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status ==200){
        alert(xhr.responseText);
    }
}
xhr.open("POST","application/x-www-form-urlencoded");
xhr.send(data);

　　通过一个例子，将AJAX最基本的 GET 和POST 讲清楚了，其实AJAX还可以用来上传文件，不过这都需要支持HTML5的浏览器才可实现（隐藏的iframe也可以实现，但不属于纯AJAX了），HTML5 中的 XMLHttpRequest 2 级实现了很多XMLHttpRequest 1级中的细节，并且实现了很多非常有用的API，例如文件上传， FormData 等，但是这些不属于基础的AJAX交互范畴，所以这里就不涉及了。
　　
　　打完收工，其实代码这东西，还是例子最重要，不过我的代码很丑。点此查看。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!