四条地铁线带你通往Ajax的大门

　　Ajax,国内翻译为"阿贾克斯",一开始听到这个名字的时候就给我一种高大上的感觉，确实，现在只要是比较大型的网站，都用到了Ajax，对于一个前端开发者而言，不会使用Ajax，基本上就失去了很多优势，因为只要是大型的公司，基本都是要前后端进行交互，Ajax扮演了一个相当于月老的作用，将前端后台进行完美结合，所以，掌握Ajax，对于一个前端开发者而言是必不可少的。当然那些立志于只做网页重构的，只在公司负责将UI的图还原出来的人，可以忽视此篇文章。

　　Ajax，比较官方的说法是:"通过在浏览器和服务器之间添加Ajax中间层，允许浏览器异步发送请求，同时允许动态加载服务器响应。用户的请求不再直接向服务器提交，而是使用XMLHttpRequest异步地向服务器发送，从而避免丢弃当前页面"。大神们一开始看不看得懂这话我不清楚，反正对于像我这种天生愚钝的人而言，这段话让我对Ajax变得似乎可望而不可及，之后观看了相关的视频以及书籍学习，用四条地铁线来表述一个完整的Ajax构造流程，这种方式让我在每次运用Ajax时，思路都很明确，无论是做省级联动，还是分页等效果。下面就来进行详细介绍。

一:一个生动的例子来诠释整个流程

　　在我看来，Ajax的整个流程可以相当于团队每周三进行的例会，例会当然也就需要一个人来主持大局，这个时候他突然因为废寝忘食，肚子实在是饿的不行了，如果这个时候他不去海轩小卖铺买面包这个会就开不下去，如果这个时候他狠心抛下大众，果断先填饱肚子先，因为没有主持人，这个会就处于一片空白，这个就类似于传统的的web应用，当其向服务器发送请求时，整个页面处于空白的状态，但是如果他这个时候选择另外一种方式，他如果叫在场的一个人去帮他买，他继续开会，那么这个时候整个会还是可以继续开，类似于使用了Ajax后，整个页面不会处于空白的状态，用户可以继续浏览，它不会让用户处于等待的状态，那么他叫的这个去买面包的人就是一个我们new出来的XMLHttpRequest对象，他执行了其工作，那么海轩小卖铺就相当于服务器，他向其发出请求，就是买面包，用到了send()函数，那么小卖铺给他的东西就是服务器返回出来的数据，其中可以分为三种类型，即数据格式文本，xml和json,那么买完之后中怎样处理这个面包，是要选择直接给他还是说等会开完了再给他，对于这个面包的处理方法就是第四步，就是反馈的函数。大致的流程图可以见下面这张图。基本上记住了这张图接下类在使用Ajax时候思路都是比较明确的。

下面就来讲述使用Ajax的四条线路

一号线：创建Ajax对象

　　这里的创建对象要根据浏览器的不同而进行创建，但是，这里的浏览器可以分为两种，就是IE与非IE，至于为什么这么分，就要追溯到之前的历史，当然这里不是我们要谈论的重点，我们的目的只是要去使用Ajax，至于之前关于什么浏览器的事情，不在我们重点的谈论范围内，这里关于创建的方法网上有很多种版本，我就列举一个比较常用的版本吧。

var xhr=null;
try{
    xhr=new XMLHttpRequest();
}
catch{
    xhr=new ActiveObject('Microsoft.XMLHttp');
}

　　当然，这只是其中一部分比较关键的代码，具体讲述怎样针对浏览器进行创建Ajax对象，其中的ActiveObject就是针对IE的，至于具体的原由这里不再过多的进行阐述。

二号线：进行Http请求

　　这条线大致分为三个重要的部分，1：通过open方法与服务器取得连接；2：指定回调函数；3：发送请求，这看起来貌似有点晕，不多说废话，具体就以一个例子来进行说明

function sendRequest(){
    //input是指单行文本框
    var chatMsg=input.value;
    //这是创建Ajax对象,将其封装成一个函数,封装关键代码上面有详细介绍
    creatXMLHttpRequest()
    //定义发送请求的URL
    var url="chat.do"
    //通过open方法与服务器取得联系
    xhr.open("POST",url,true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //定义回调函数,也就是4号线
    xhr.onreadystatechange=chuli;
    //发送请求
    xhr.send("chatMsg="+chatMsg)
    }

　　具体就以该段代码来讲述整个过程，其中涉及到的相关的html代码，这里不详细说明。1：首先，2号线一定是要建立在1号线的基础上的，就像买面包一样，去买的时候一定要有人去买，所以就有了上面的creatXMLHttpRequest()函数，它是将第一步进行封装成一个函数，这里直接调用。2：然后就是open()方法，这里涉及到三个参数，其中第一个为method,也就是方法，这里只有两种，分为post和get，如果是post,就要写下面那段长长的请求头，建议平时需要使用到post使，这段代码直接进行复制粘贴，因为我们完全没有必要也没有办法去知道它的详细解释，这也包括了一些大牛级的人物，在敲这段代码的时候，都是直接进行复制，因为直接敲的话可能会出错，得不偿失，如果是get的话，它和post有几个不同点，第一，就是不用写那个长长的请求头，第二，使用get，它传递的参数都是写在地址栏上的，所以在send时内容就可以为null，至于url和true，使用post和get没区别。总的来说，两者有好有坏，但是一般的话使用post的会情况会比较多一点，因为get的参数是暴露出来的，相对安全性会比较差一点，请求参数比较繁琐，当数据太多时，可能丢失参数，而更致命的是，当两次get请求参数相同时，IE将直接使用服务器上次的缓存，根本不会重新发送请求，这对于刷新页面相当不利。所以这里着重介绍post。还有一点就是关于第三个的true,表示异步，false表示同步，因为几乎所有情况都是使用true所以默认就写true。3：就是send()函数，其实第二点已经说过了，如果是get，为null，因为它的参数是在地址栏的，但是post，就要写所要传的参数。

三号线：http响应

　　这里的返回的数据格式一般分为三种，分别是text,也称为html格式，一种是xml格式，另外一种就是json格式，因为json的使用情况比较多，因为时间的关系，这里就着重的介绍下json，它是一种文本字符串，函数eval会将一个字符串当做它的参数，然后这个字符串会被当做js代码来执行，因为js字符串就是由js代码构成的，本身可执行。它的格式如下："{属性名:属性值,属性名:属性值,....}"它是一种原生态的数据，因此其数据格式很稳定，描述能力强，这也是为什么被广泛应用的原因。第二:就是数据的扩展问题，如果服务器返回的是多组数组，在对象接收到json数据后，应该将其装换为对象数组，类似于var books=eval(xhr.responseText)这种形式，通过books可以获得你想要的任何一个值，books[?].属性名，剩下的就是DOM编程了。具体要结合具体来代码进行分析。总的来说，使用json是很有方便的，主要是由于以下三个理由，1:同样的数据，装换为XML格式比装换为JSON格式的数据量要大。2:使用XML响应必须在服务器端生成符合XML格式的字符串，编程更加复杂。3：浏览器获得XML响应之后，需要使用DOM解析XML响应，也是一道复杂的程序。由于以上的三个理由，所以现在的Ajax技术已经逐步使用json响应来取代传统的XML响应。当服务器响应数据较大，而且响应数据有复杂关系结构时，使用JSON响应是一个最佳的选择。但是凡事有利有弊，它使用js内置的eval()函数解析json格式的字符串可能有一些潜在的安全问题，因此，现在大多数人也是选择使用更加安全的js库提供的函数来解析json字符串，比如Prototype。

四号线：回调函数

　　这个没什么好说的，主要就是注意两个，一个是Ajax对象的readyState属性，代表响应完成，响应完成之后，还不够，还有判断响应是否正确，这个可以通过Ajax对象的status值进行判断，当它为200时，服务器响应正确，其他代表不正常，至于出现什么数对应的解析，比如什么404代表需要访问的资源不存在这些，这里就不再进行详细的解释。我们只要牢牢记住这两个值就行。只要这两个数据符合之后，接下来就可以尽情的写我们想要进行的回调函数了。下面就举个例子说明具体代码

function chuli(){
    if(xhr.readyState==4){
        if(xhr.status==200){
            document.getElementById("chatArea").value=xhr.responseText;
            }
        else{
            window.alert("你所请求的页面有异常")
            }
        }
    }

五：写成一个ajax.js文件

　　综合以上的介绍，我将其写成一个完整的代码，下次在使用ajax的时候就直接调用就好了，方便省事，当然如果一些热爱敲代码的人可以直接忽视。

function ajax(method, url, data, success) {
    var xhr = null;
    try {
        xhr = new XMLHttpRequest();
    } catch (e) {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    
    if (method == 'get' && data) {
        url += '?' + data;
    }
    
    xhr.open(method,url,true);
    if (method == 'get') {
        xhr.send();
    } else {
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send(data);
    }
    
    xhr.onreadystatechange = function() {
        
        if ( xhr.readyState == 4 ) {
            if ( xhr.status == 200 ) {
                success && success(xhr.responseText);
            } else {
                alert('出错了,Err：' + xhr.status);
            }
        }
        
    }
}

下次在使用Ajax的时候直接调用就好啦。

六：它将用户的快乐建立在别人的痛苦上

　　Ajax在网页中的使用是必不可少的，当然，也并不是说要尽量多的去使用Ajax，因为其存在以下几个方面的缺陷

1:安全性方面

　　Ajax比传统的Web应用多了一个Ajax引擎，其实质就是js代码，它能在客户端保存用户状态而无须使用Sesson，能将控制器的部分功能移到客户端页面，这必然导致安全性问题。这个也是需要我们进行注意的。

2：代码量

　　Ajax大部分技术都是依赖于js代码来实现，严重降低了程序员的开发速度,加上js并没有一个完善的调试工具，这也加重了程序员的负担，所以严格上讲，将用户的快乐建立在程序员的痛苦上，而Ajax就是始作俑者。

3：服务器的负担

　　大量的使用Ajax将导致服务器的负担大大加重，它相比传统的网页发送更多的请求，比如一个自动完成的输入框，传统的web应用不需要发送任何请求，静静的等待用户的输入即可，但是如果使用Ajax。每输入一个字符，就得向服务器发送一次请求，所以，用户的快乐不仅是建立在程序上的痛苦上，同时也是建立在服务器的痛苦上，而Ajax依旧是始作俑者。

七：菜鸟自诉

　　本人只是一个前端中的菜鸟级别的人，说句真心话，自己对于前端并不是真正的喜欢，当初只是因为太讨厌自己的专业了，硬件的东西实在是学习不下去了，但是又觉得自己的大学不能堕落，所以就误打误撞的走上这条路，最初是在淘宝上买了一套视频进行边看边学，记得就是号称代码女神清心总监的视频，前端就是入门很简单，但是深入的话，你会被搞的很烦，因为技术更新的很快，进入团队之后，我的学习前端的时间也是比较少的，至少比起其他人的来说我是少了很多，主要原因还是因为电子信息工程这个让我后悔的想拿刀捅死自己的专业，它最可怕的不是学习知识有多难，最可怕的是就算你将来势必是不会走上这条路的，它依旧不会给你翻身的机会，因为不仅课程量多，而且大量难搞的作业，数不清的实验以及实验报告，还有天数级别的专业书，搞的我进了团队之后，学习前端的时间严重不足，学习前端，建议一定要有一颗不断学习的心，因为技术更新的很快，这点我是比较惭愧的。至于学习顺序什么的，这里就不再多说，因为前面两个前端的小伙伴们已经讲过了。

还是那句话，我只是个菜鸟，这篇文章也没什么技术含量，就是将自己关于Ajax的理解的大概以一个本人认为是一个比较清晰的流程显示出来而已，因为之前两位前端的伙伴都写了关于鸡汤之类的东西，不想再重复写了，所以就写出了这篇这么没有水准的文章，因为临近考试，所以写的比较急，难免有错误，请各位大神们千万不要喷我，也欢迎各位前端的爱好者跟我一起谈论学习，女人因前端而变得更美，男人因前端而变得更加刚柔并济。