认识一下新的朋友——> Ajax

目录
1.Ajax简介；
2.Ajax实例；
3.Ajax的优缺点；
4.Ajax的应用；
1.Ajax的简介：
AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

2.Ajax的实例
（1）

使用 AJAX 修改该文本内容

修改内容 **3.Ajax的优缺点；** **（1）ajax的优点** **1**、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。 　 **2**、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。 　 **3**、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。 **4**、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。 **（2）ajax的缺点** 下面所阐述的ajax的缺陷都是它先天所产生的。 **1**、ajax干掉了back按钮，即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。虽然说这个问题是可以解决的，但是它所带来的开发成本是非常高的，和ajax框架所要求的快速开发是相背离的。这是ajax所带来的一个非常严重的问题。 **2**、安全问题 ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。 **3**对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。 **4**、破坏了程序的异常机制。至少从目前看来，像ajax.dll，ajaxpro.dll这些ajax框架是会破坏程序的异常机制的。给我们的调试带来了很大的困难。 **6**、一些手持设备（如手机、PDA等）现在还不能很好的支持ajax，比如说我们在手机的浏览器上打开采用ajax技术的网站时，它目前是不支持的，当然，这个问题和我们没太多关系。 4.Ajax的应用； （1）Ajax应用的五大步骤： 1.建立xmlHttpRequest对象 if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); if(xmlHttp.overrideMimeType) { xmlHttp.overrideMimeType("text/xml"); } } else if(window.ActiveXobject) { var activeName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]; for(var i = 0; i < activeName.length; i++) { try { xmlHttp = new ActiveXobject(activeName[i]); break; } catch(e) {} } } if(!xmlHttp) { alert("创建xmlhttprequest对象失败"); } else {} 2.设置回调函数 xmlHttp.onreadystatechange= callback; function callback(){} 3.使用OPEN方法与服务器建立连接 xmlHttp.open("get","ajax?name="+ name,true) 此步注意设置http的请求方式（post/get）,如果是POST方式，注意设置请求头信息xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded") 4.向服务器端发送数据 xmlHttp.send(null); 如果是POST方式就不为空 5.在回调函数中针对不同的响应状态进行处理 if(xmlHttp.readyState 4){ //判断交互是否成功 if(xmlHttp.status 200){ //获取服务器返回的数据 //获取纯文本数据 var responseText =xmlHttp.responseText; document.getElementById("info").innerHTML = responseText; } } （2）Ajax的应用场景： 1. 用Ajax进行数据验证 在填写表单内容时，需要保证数据的唯一性（例如新用户注册填写的用户名），因此必须对用户输入的内容进行数据验证。 数据验证通常有两种方式： 一种是直接填写，然后提交表单，这种方式需要将这个页面提交到服务器端进行验证，整个过程不仅时间长而且造成了服务器不必要的负担； 第二种方式是改进了的验证过程，用户可以通过点击相应的验证按钮，打开新窗口查看验证结果，但是这样需要新开一个浏览器窗口或者对话框，还需要专门编写验证的页面，比较耗费系统资源。而使用Ajax技术，可以由XMLHttpRequest对象发出验证请求，根据返回的HTTP响应判断验证是否成功，整个过程不需要弹出新窗口，也不需要将整个页面提交到服务器，快速而又不加重服务器负担。 2.按需取数据 分类树或者树形结构在web应用系统中使用得非常广泛，例如部门结构，文档得分类结构常常使用树形空间呈现。以前每次对分类树得操作都会引起页面重载，为了避免这种情况出现，一般不采用每次调用后台得方式，而是一次性将分类结果中得数据一次性读取出来并写入数组，然后根据用户的操作，用JavaScript来控制节点的呈现，这样虽然解决了操作响应速度，不重复载入页面以及避免向服务器频繁发送请求的问题，但是如果用户不对分类进行操作或者只对分类树中的一部分数据进行操作的话（这种情况很普遍的），那么读取的数据中就会有相当大的冗余，浪费了用户的资源。特别是在分类结构复杂，数据庞大的情况下，这种弊端就更加明显了。现在应用Ajax改进分类树的实现机制。在初始化页面时，只获取第一级子分类的数据并且显示；当用户点开一级分类的第一节点时，页面会通过Ajax向服务器请求当前分类所属的二级子分类的所有数据；如果再请求已经呈现的二级分类的某一节点时，再次向服务器请求当前分类所属的三级子分类的所有数据，以此类推。页面会根据用户的操作向服务器请求它所需要的数据，这样就不会存在数据的冗余，减少了数据下载总量。同时，更新页面时不需要重载所有内容，只更新需要更新的那部分内容即可，相对于以前后台处理并且重载的方式，大大缩短了用户的等待时间。

3.自动更新页面：在web应用中有很多数据的变化时十分迅速的，例如最新的热点新闻，天气预报以及聊天室内容等。在Ajax出现之前，用户为了即使了解相应的内容必须不断刷新页面，查看是否有新的内容变化，或者页面本身实现定时刷新的功能（大多数聊天室页面就是这样做的）。
有可能会发生这种情况；有一段时间网页的内容没有发生任何变化，但是用户并不知道，仍然不断的刷新页面；或者用户失去了耐心，放弃了刷新页面，却很有可能在此有新的消息出现，这样就错过了第一时间得到消息的机会。应用Ajax可以改善这种这种情况，页面加载以后，会通过Ajax引擎在后台进行定时的轮询，向服务器发送请求，查看是否有最新的消息。如果有则将新的数据（而不是所有数据）下载并且在页面上进行动态的更新，通过一定的方式通知用户（实现这样的功能正是JavaScript的强项）。这样即避免了用户不断手工刷新页面的不便，也不会因为重复刷新页面造成资源浪费。既然你己经对Ajax产生了兴趣，还要知道重要的一点，即什么时候应该使用Ajax技术，而什么时候不该用。首先，不要害怕在应用中尝试新的方法。我们相信.几乎每个web应用都能从Ajax技术中获益，只不过不要矫杠过正，过于离谱就行了。从验证开始就很合适，但是不要限制你的主动性。你当然可以使用Ajax提交数据，但也许不能把它作为提交数据的主要方法。其次，惟一会影响你应用Ajax的就是浏览器问题。如果大量用户(或者特别重要的用户)还在使用比较旧的浏览器，如IE 5 , Safari 1.2或Mozilla 1.0之前的版本，Ajax技术就不能奏效。如果这是一些很重要的用户，你就要使用针对目标用户的跨浏览器的方法，而放弃Ajax，或者开发一个可以妥善降级的网站。浏览器支持可能不是一个重要因素，因为netscape Navigaxar 4在市场上的份额很小。不过，还是应该查看Web日志，看看你的应用适用什么技术。如前所述，验证和表单填写就非常适合采用Ajax实现。还可以使用DOM的“拖”技术建立真正动态的网站，如google的个性化主页.
可以看到，Ajax为Web应用开发提供了新的机会。你不会再因为以往的专用技术或技术折中方案而受到妨碍。利用Ajax，胖客户与瘦客户之间的界限不再分明，真正的赢家则是你的用户。

---

以上内容来自菜鸟教程和别的博主博客所撰，后期积累的多了会自己原创的，后期跟大家分享一下心得和体会，让我们彼此进步和成长，收获成功的喜悦。