前言

一直以来，Ajax这个词对于我这个刚初涉前端的小白来说，在我的心头之上，犹如背负着一块大石头，走在人群中，总感觉比人矮了一节似的，仰望于高个子之间，总想体会那种临空俯视茫茫人海是种什么样的感觉。在自己的面试当中，面不可少的环节，人家就是总喜欢问你，会不会Ajax？然而我总是模模糊糊的敷衍了事，支支吾吾的，对与它，总是有种雾里看花，犹抱琵琶半遮面的感觉，似懂非懂，之前总觉得那是属于后台技术，我干前端的，我又不懂后台，不会java,.net,数据库，我干不来啊，总感觉它是一种很高大上的技术，明明之中就对它产生了恐惧的心里，一直把它神秘化了，始终是自己心中一座不可逾越的高山。其实，不管它有多么难，多么神秘，我们终将都得面对，都得跨都过去，今天我就对我所理解的Ajax进行了一次简单的梳理，因本人知识水平有限，文有不恰之处，谢谢您的指出，还请读者多给些意见，本小白不甚感激

正文从这里开始~

引例： 其实在生活中，如果我们稍稍留意下，便会发现有着很多“Ajax”的影子，比如说：1：我们上KTV唱歌时，那个点歌系统，我们点击那个歌曲按钮列表把它加入到下一波播放列表后，我们可以看到在我之前选中的歌曲过了一段时间会静悄悄的在当前的荧屏上方提示即将播放，我们可以边选边唱，不会出现你点了预备歌曲时，荧屏上出现卡顿，暂停，奔溃的状况:2：当我们在逛公园或者去电影院，或者路过一些政府机关的门口时，我们看到显眼的地方伫立着一块大的荧光LED显示屏，上面每天都有着固定板块内容，而这大的广告屏，有的区域部分是固定不会变化的，而有的局部区域每天都有新的内容呈现的。3：不管我们是从电脑还是手机上，用浏览器浏览新闻时，我们会发现，当我们使劲往下拉，我们原本想一次看到底，但是总是拉不到底，拉不到尽头，无限加载的，而就在下拉的同时，我们无需傻等待，还可以干点别的事情，在当前页面，浏览其他的图片，新闻，查询其他信息等等的，而当在返回来时，当前的页面又一堆新的新闻呈现在我们面前，似乎永远也拉不到头.. 像这种例子，生活中有很多，大家可以自行体会下，就不一一列举了的，毕竟生活是生活，终究还是逃离不了现实啊！还是讲讲下一些平时Ajax应用案吧： 以上列出的163邮箱的注册，新浪的点赞，及评论加载，百度图片，拉钩网上的分页等等的，以及上面引例中的广告栏，内容块局部更新，以及手机浏览新闻，无限的下拉加载，这些毫无凝问都是用了ajax技术，此刻，我借助注册网易邮箱的示例：来聊一聊ajax，看看发生了些什么事情 从上面的图片可以看出：当我在邮箱地止填入邮箱时，我们打开控制台，就在我失去焦点的一瞬间，network下便会发生了变化，可以看到底下状态栏中静悄悄的多个两个文件，其实那便是2个请求文件，200成功状态码，请求对象为xhr(XMLHttpRequest),总共大小557，花了12.08秒，看到编号3 4 5 6 7中，他们分别代表的是概括，响应头部，请求头部，查询字符串参数，数据来源，等，其中我们比较关注的是：响应头部，和请求头部，和响应主体，图片上附加了解释的，值得一提的是响应主主体，我们看到的它给我们返回的是一种json文件的格式 其中vip163.1,vip126:1,vip:188:1,126.com:1这些参数表示我们是可以注册的，我们可以看到邮箱注册地止，下方都有提示，他们是一对应的，除了163邮箱不能注册，其他的都能注册。 讲了这么多，其实，其实就是在说明一个东东，就是我在填写表单信息时，页面也并没有整体刷新，当我在页面中触发了一个动作，这里是失去焦点，其他的地方可能是点击按钮，下拉滚动条等等的，我们在没有浏览器刷新页面的情况下，浏览器静悄悄的，异步的向服务器发出了若干个http请求，服务器收到请求后，后台便会做出相应的处理，然后向客户端(浏览器)传回格式化数据(通常是json格式或者XML，或者其他的)，然后通过XMlHttpRequest对象，进行了处理，将传来的字符串通过JSON.parse或者jquery中的内置的jquery.parseJSONn方法将接收到服务端返回的文本来解析json,转化成对象，然后利用动态的DHTML，css,javascript，也就是DOM来操作数据，逻辑处理等，将新的数据进行呈递显示，页面达到仅局部刷新，这给浏览者一种更连续的体验，使互联网的网页具有更好的人机交互和更美好的界面，不会存在我做一件时，浏览器出现停滞，卡死，持续等待这种情况的 下面画一图:感受一下上面的所发生的内容:

稍微对上图进行解释一下的吧，毕竟有时候看图挺纠结的，也不知道从哪里看起，用之前的那个网页注册的页面来说，首先当我填写表单时，其实浏览器自身就已经便从对我开始有了监控，当我失去焦点的一瞬间，浏览器便偷偷的通过XMLHttpRequest对象向服务端发送若干个http请求（可以连续触发，不用等待前一次的请求便可以得到响应，这个你可以打开控制台，多多尝试一下的）,我们在浏览器端便是依赖这个XMLHttpRequest对象，我们暂且把当做穿梭于前后台之间的神秘信使，把服务器端当做是党支部**直属机构，正因为有了它，我借助它身下的奇淫技巧，它通常有open()方法，send()，onreadstatechange,readyState，status,respenseText,setRequestHeade,等等一些属性方法的，注意有的方法中间大写，有的小写的，刚开始我也很混乱，总是记不清，但是没办法，硬着头皮，只有多写几次吧，直到把它写熟为止的，然后，信使(XMLHttpRequest)向党支部**直属机构（服务器端）发送请求，然后它发送请求的方式Method，假设请求一批振灾物资，有两种方式get请求，和post请求，而我把get这种请求相当于我直接打电话给**领导发出请求的，这种方式是赤裸裸的暴露的，毫无凝问这种方式很容易被些贪官小人给窃取信息，难免会从中作梗，捞油水的，而另外一种方式，我是通过传统的方式，书信的方式，通过韵达快递，发出post请求，而这种请求方式是隐蔽的，旁人很难窃取信息，胡作非为的，是很安全的一种方式，传递的信息量也很大，我可以无限制的描述请求信息的，而相比之前那种电话的get请求方式，就受局限大的多，具体的get，和post请求方式以后在详谈，今天只是初略的过一过的，当信使向**发送请求后，**直属机构（服务器后台）肯定会告知我们一个具体的地止嘛也就是url,我们也可以在地止的后面写上请求的具体物资，要求哪些好的领导下来视察监督重建家园的，添上username,等等一些信息的，当然我们不希望信使寄完信**党支部的信之后，它便会妨碍我们在给其他人写信，所以它是异步的，也就是true,我们仍然可以利用它向别人发出更多的请求，然而我们发送请求之后，肯定是要，进行等待的，进行处理，注意这里，当我们使用get方式请求时，服务端应该也是get的方式，post请求的方式，对应应该也是，一一对应的，这个好比你别人给你用中通给你寄快递，寄过来之后，发现，货不对称，那么你还是用中通快递给它寄回去嘛，不能说我换别家的快递的。等待**处理之后，它就变化返回我们一些物资拉，哈哈，然后我们拿到这些物资就由我们通过一些具体发方案，酌情处理，合理的分配物资了。。不知道这个例子是否恰当，不当之处还请读者就当看笑话的吧^_^，临时给想出来的，回归正题，我们上面网易登陆好比就是这个过程，当触发了某一一个动作，浏览器会自动的悄悄发出请求，服务器接收到请求之后，然后进行了处理，返回格式化数据(通常是json的数据格式)，然后我们就可以利用dom来操作返回的数据了，将数据实时的显示到页面中去的。

基本概念就不跟上次一样罗列一大串的，今天换种方式边讲边实例边解释的吧 应该了解的基本概念: Ajax(Asynchronous javascript And XML):异步javascript和XML，首先从它名字上是知道它是异步的，所谓异步简单点理解就是前面的运行的代码对后面没有影响，你走你的阳光道，我过我的独木桥，二是：javascript，它是依赖于javascript的，进行dom操作的，三：XML：它是一种数据交换格式，不过现在很多都不用它了的，它比较笨重，繁琐，用的最多的是json,理应来说叫Ajaj的，哎但是叫比较别扭的，必将XML比json早出生，大家已经约定俗成的把它喜欢的叫Ajax了的，总是它是一种数据格式，无论它是XML还是json甚至其他的，所以归纳起来讲，Ajax是个杂交品种，是由不同的技术混合而组成的一门技术 下面通过一个demo 演示一下具体完成一个发送请求的流程：

1. 初始化XMLHttpRequest对象(XML是一种种数据格式，http代表的是网络协议，request代表的是请求，其实它是一种特殊的javascript对象与javascrot事件和动态的ＤＨＴＭＬ结合起来用的技术)
2. 打开与服务器的链接，打开链接时，指定发送的方法，通常有get或者Post两种方式，指定是否带参数，是否异步(open(meth,url,?username&password),true/false)
3. 设置监听XMLHttpRequest状态改变时事件处理的函数(onreadystatechange)
4. 发送请求，如果采用post方法发送请求，可发送带参数的请求,注意在使用get请求，值得注意的是，在调用send("")/send(null)方法时，里面记得带上null,或者一个空字符串，这是为了考虑兼容性，firefox等浏览器要求调用send()方法时，必须传入参数

首先学习Ajax肯定要有一个服务器的环境，可以选择的服务有：Apache(php),IIS(..net),tomcat(java),nginx等，我选择的是Apache(php)，phpnow，百度百科上直接可以下载的，当然也可以用 wampserever,xammp的，都是免费使用下一步下一步安装就好了 目标：我想在一个页面中，点击一个按钮，然后把一个文本的内容显示到当前页面中来实现了一个简易的Ajax发送请求及响应的过程

在回忆一下这张图: 你可以看到到点击按钮时，发生的事： 从上面的例子当中可以看到一个简单的Ajax请求小例子非常简单的实现了的，没有涉及到一丁点的高大尚的东西，都是基于XMLHttpRequest对象下面的方法，做一事情，get和post两者的方式也没有过多的讲了，以后单独的把它两者梳理一下的，对比性的来一文的，怎么解析json来木有聊，总之今天都是枯燥的理论比较多，但是过程大体都是这样的，拿到后台给的json，然后通过浏览器内置的方法或者利用jquery中提供的方法进行解析，转化为json对象，然后利用javascript进行dom操作，其实我觉得拿到数据是不困难，觉得Ajax比较棘手难的地方，就是进行dom操作，和数据逻辑处理的，这个我也很弱，只有多加强加强的才能提高的 下面是提供的一个JsonAPI，有兴趣的可以研究研究的:

json免费的天气接口

json免费接口

以下是本篇提点概要

• 用了几个引例下抛砖引玉的联系到了Ajax
• Ajax具体在开发中应用到哪些实例当中
• 借助163网易注册邮箱用户名，简单了讲了一下Ajax的工作流程(其实只要记住一句话：在浏览器不刷新页面的情况下，浏览器静悄悄的向Http发送了一个请求，服务器收到响应之后，并做出响应，通常是返回一格式化数据(一般是json格式的)，然后在浏览器端拿到json数据后，进行解析，解析完后，利用dom操作，把后台所提供的数据在页面中给呈现出来，达到页面局部不刷新的目的，提升了用户体验)
• Ajax是什么
• 一个简易的demo，通过添加一个点击按钮事件，然后把文本内容显示到当前页面上来，实现了一个Ajax发送请求和响应的过程

更多精彩内容,读书,技术,生活，扫一扫二维码,即可关注