前言Ajax是AsynchronousJavaScriptandXML的缩写，它是JavaScript、XML、CSS、DOM等多种技术的结合体。Ajax的工作原理是一个页面的指定位置可以加载另一个页面的所有输出内容，这样一个静态页面也可以在数据库中获取返回的数据信息。因此，Ajax技术使静态网页无需刷新整个页面即可与服务器通信，减少了用户等待时间，减少了网络流量，增强了客户体验的友好性。本文将为大家详细介绍Ajax的工作原理和实现步骤。1.Ajax的概念？《以往浏览器是如何实现通信的：》jsp页面发送请求--->servlet接收--->将数据放入domain对象--->同步转发给jsp页面发送请求：这个请求的特点，每次我们转发时，浏览器都必须重新渲染整个页面。假设我的页面有100k的数据，只需要刷新1k的数据。如果采用转发的方式，每次渲染的数据为100k，这样浏览器的渲染压力会增加。《Ajax技术实现通信》：介绍Ajax：假设我们使用Ajax技术，那么我们的100k数据和99k数据不需要刷新，只需要刷新这1k数据即可，一开始就是Ajax，所有浏览器都没有支持所谓的局部刷新技术，一开始大多数浏览器并不看好这项技术。异步请求的概念在中引入，后来看到了Ajax在浏览器上的出色表现，于是其他浏览器厂商也介绍了Ajax的技术含义：Ajax是一种在网页上进行局部刷新的技术2.优缺点Ajax技术的《Ajax技术优势：》核心技术：Ajax的核心技术是XMLHttpRequest，它是JavaScript中的一个对象，可以减轻服务器端的负担，将之前由服务器端承担的部分工作转移到客户端执行.利用客户端的空闲资源进行处理。更新页面仅局部刷新，提高页面响应速度，用户体验更友好。《Ajax技术缺点》：Ajax的缺点是不利于SEO的推广和优化，因为搜索引擎不能直接访问到Ajax请求的内容3.Ajax技术能做什么？《主要功能：》发送同步或异步请求，对网页进行局部刷新。下拉列表的数据来自服务器对前后分离的开发表单元素的动态认证4、Ajax技术的具体使用《使用步骤：》创建获取Ajax对象的方法函数getAjax(){varajax;try{ajax=newActiveXObject("microsoft.xmlhttp");}catch(e){try{ajax=newXMLHttpRequest();}catch(e){alert('你没有异步改变你的浏览器...');}}returnajax;}获取Ajax对象varajax=getAjax();准备发送Ajax请求ajax.open("GET","${pageContext.request.contextPath}/dates.action");发送Ajax请求ajax.send(null);监控Ajax中的4个状态ajax.onreadystatechange=function(){if(ajax.readyState==4){/}}判断服务器是否响应成功if(ajax.status==200){//表示服务器的响应是正确的vartime=ajax.responseText;//将这个数据直接分配给一个标签document.getElementsByTagName('span')[0].innerText=time;}获取方法数据传输(放在url后面)ajax.open("GET","${pageContext.request.contextPath}/dates.action?userName=qianyu&password=123");Post方法发送请求和数据//设置请求头ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");//发送数据ajax.send("userName=qianyu&password=123");结语本文对Ajax的介绍先到此结束，后续会陆续发布更多关于Ajax的系列文章，感谢大家的支持！
