定义
Ajax全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的技术。Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
传统的网页(不使用Ajax)如果需要更新内容,需要重载整个网页。
Ajax工作原理
Ajax的工作原理相当于在用户和服务器之间加了一个中间层(Ajax引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像一些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Ajax其核心由JavaScript、XMLHttpRequest、DOM对象组成,通过XMLHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。
1.创建Ajax对象( XMLHttpRequest / ActiveXObject(“Microsoft.XMLHTTP”) )
2.判断数据传输方式(POST/GET)
3.打开链接 open()
4.发送 send()
5.当Ajax对象完成第四步(onreadystatechange)数据接收完成,判断http响应状态(status) 200~300之间或304(缓存)执行回调函数
优点
1.局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验
2.按需取数据,减轻服务器的负担,最大程度减少冗余请求
3.异步方式与服务器通信,不需要打断用户的操作,具有更加迅速地响应能力
4.基于xml标准化,并被广泛支持,不需要安装插件等,进一步促进页面和数据的分离
缺点
1.Ajax只是局部刷新,所以页面的后退按钮是没用的
2.对流媒体还有移动设备的支持不是太好
3.Ajax大量使用了JavaScript和Ajax引擎,这些取决于浏览器的支持
4.客户端过肥,太多客户端代码造成开发商的成本,编写复杂、容易出错,冗余代码比较多,破坏了web的原有标准
Ajax注意点及适用和不适用场景
注意:
Ajax开发时,网络延迟——即用户发出的请求到服务器发出响应之间的间隔——需要谨慎考虑。不给予用户明确的回应,没有恰当的预读数据,或者对XMLHttpRequest的不恰当处理,都会使用户感到延迟,这是用户不希望看到的,也是他们无法理解的。通常的解决方案是,使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。
适用场景
1.表单驱动的交互
2.深层次的树的导航
3.快速的用户与用户间的交流响应
4.类似投票,yes/no等无关痛痒的场景
5.对数据进行过滤和操纵相关数据的场景
6.普通的文本输入提示和自动完成的场景
不适用场景
1.部分简单的表单
2.搜索
3.基本的导航
4.替换大量的文本
5.对呈现的操纵