AJAX工作原理与缺点
1.概念:什么是AJAX
AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。
2.为什么要使用他?
最大的优点:不刷新整个页面的情况下与服务器通信保持原有页面状态,通俗点,浏览网页的时候回有两种情况,点击,1,白屏,等待跳转到另一个页。2.页面不刷新,局部出现新内容获得更好的用户体验。
3.基本原理
先看图
XHR相当于是一个通信兵,来负责客户端与服务器之间的通信传输。要打仗了,前方阵地不可能只等着通信兵传递消息其他什么也不干吧,所以前方阵地还在干着自己的事情派通信兵去请求后方指挥的命令(服务器),指挥下达命令指挥,通信兵再吧命令传到前方阵地(客户端),然后客户端吧数据渲染到页面。
那什么是XHR?(AJAX工作原理)
他的全称是XMLHttpRequest,AJAX就是通过浏览器的内置对象XHMHttpResquest来发送异步请求的,异步请求不会妨碍前方阵地(客户端)的任何操作。
4.了解异步和同步
刚才说了异步,那什么是同步,同步就是前方阵地和通信兵一起去像服务器请求数据,直到通信兵请求到数据我才开始渲染页面,在请求的过程中一直是白屏等待的。
5.XMLHttpResquest对象的属性有哪些?
AJAX既然是通过浏览器的内置对象XMLHttpRequest来处理异步请求的那我们先来了解下他又哪些属性
属性 描述
1. onreadyStatechange 状态改变的事件触发器每个状态改变时都会触发 这个事件处理器,通常会调用一个javaScript函数
2. readyState 请求的状态:
0>.请求未初始化
1>.服务器链接已建立
2>.请求已接收
3>.请求处理中
4>.请求已完成,响应已就绪
3.responseText 返回请求数据文本
4.responseXML 返回XML文档对象
5.status 返回状态码 如404 200
6.创建XMLHttpRequest对象并发送AJAX请求
为了应对所有的现代浏览器,检测是否支持XMLHttpRequest对象
window.onload = function(){
//1.创建XMLHttpRequest对象考虑兼容性
var xhr = null;
if(window.XMLHttpRequest){
//现代浏览器
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');//IE5/6
}
}
console.log('状态A'+xhr.readyState); //2.设置请求方式。第一种方式get请求(2)post请求
var url = '数据' ;
//get请求,true异步请求,false,同步
xhr.open('get', url, true);
console.log('状态B'+xhr.readyState);
/*(2)post请求 必须添加请求头
var url = '数据';
xhr.open('post', url, true);
xhr.setRequestHander('Content-type','application/x-www-form-urlencoded');
*/
//3.发送请求
xhr.send();
console.log('状态C'+xhr.readyState);
//4.回调函数
xhr.onreadyStatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.resposeText); //字符串
//console.log(xhr.resposeXML)
}
}
AJAX的优点:
1.最大的优点就是页面无需刷新,在页面内与服务器通信,非常好的用户体验。
2.使用异步的方式与服务器通信,不需要中断操作。
3.可以把以前服务器负担的工作转嫁给客户端,减轻服务器和带宽,可以最大程度减少冗余请求。
缺点:
1.AJAX干掉了Back和History功能,即对浏览器机制的破坏。
在动态更新页面的情况下,用户无法回到前一个页面状态,因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙;用户通常会希望单击后退按钮能够取消他们的前一次操作,但是在Ajax应用程序中,这将无法实现。
2.安全问题技术同时也对IT企业带来了新的安全威胁,ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来,允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点,诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。
3.对搜索引擎的支持比较弱。如果使用不当,AJAX会增大网络数据的流量,从而降低整个系统的性能。
4.、一些手持设备(如手机、PDA等)现在还不能很好的支持ajax,比如说我们在手机的浏览器上打开采用ajax技术的网站时,它目前是不支持的,当然,这个问题和我们没太多关系。(这个时候我们可以用其他的插件来代替)
转自:https://blog.csdn.net/youjinli122/article/details/77412851
AJAX工作原理与缺点的更多相关文章
- ajax工作原理及jsonp跨域详解
一.Ajax简介 ajax = 异步 JavaScript 和 XML. ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.我们知道,传统的网页(不使用ajax)如果需要更新内容, ...
- 简要总结ajax工作原理及优缺点
虽然在实际的项目中使用多种ajax请求,但就其工作原理,优缺点尚未深入总结, 参考:http://www.cnblogs.com/SanMaoSpace/archive/2013/06/15/3137 ...
- 【java项目实践】具体解释Ajax工作原理以及实现异步验证username是否存在+源代码下载(java版)
一年前,从不知道Ajax是什么,伴随着不断的积累,到如今常常使用,逐渐有了深入的认识. 今天,假设想开发一个更加人性化,友好,无刷新,交互性更强的网页,那您的目标一定是Ajax. 介绍 在具体讨论Aj ...
- Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
- ajax工作原理,Jsonp原理
Ajax工作原理是 相当于在用户和服务器之间加了-个中间层(AJAX引擎),使用户操作与服务器响应异步化. 对于用户请求ajax引擎会做一些数据验证和数据处理,不是所有请求都提交给服务器,当需要从服务 ...
- ajax工作原理/实例
ajax是什么? 是一种创建交互式网页应用的一种网页技术.简单来说,就是向服务器发起请求,获得数据使交互性和用户体验更好. ajax不是一种新的技术,是一些技术的集合体.有 1.XHTML和CSS 2 ...
- Ajax工作原理
在写这篇文章之前,曾经写过一篇关于AJAX技术的随笔,不过涉及到的方面很窄,对AJAX技术的背景.原理.优缺点等各个方面都很少涉及null.这次写这篇文章的背景是因为公司需要对内部程序员做一个培训.项 ...
- AJAX工作原理及其优缺点
1.什么是AJAX?AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.它 ...
- 关于Ajax工作原理
1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...
随机推荐
- MT【297】任意四边形的一个向量性质
在平面四边形$ABCD$中,已知$E,F,G,H$分别是棱$AB,BC,CD,DA$的中点,若$|EG|^2-|HF|^2=1,$设$|AD|=x,|BC|=y,|AB|=z,|CD|=1,$则$\d ...
- Hdoj 1548.A strange lift 题解
Problem Description There is a strange lift.The lift can stop can at every floor as you want, and th ...
- 2019 校内赛 RPG的地牢猎手(bfs+优先队列)
Problem Description Luke最近沉迷一款RPG游戏,游戏中角色可以进入地牢关卡,只要顺利走出地牢就可以获得奖励.地牢表示为n行m列的块矩阵,其中每个块只可以是障碍块.入口.出口或数 ...
- QQ邮箱无限扩容 + XMind8 Update8 Crack 小记
QQ邮箱扩容 三个月后还可以扩容 XMind8 Update8 Crack 软件地址 软件下载地址:https://www.xmind.cn/download/xmind8 补丁地址 破解补丁下载地址 ...
- JQ动态生成的元素,原事件绑定失效
Old Code: $('code').click(function () { console.log($(this).text()); }); New Code:(.container 是<c ...
- 关于overflow-x: hidden隐藏滚动条失效的解决方案
在苦逼写页面的时候,发现有种情况overflow-x: hidden失效了,chrome表现完好,qq浏览器有问题,微信上面展示有问题. 微信上面展示是一样能够滑动的. 如果出现类似问题的同学,请试一 ...
- 分布式链路跟踪 Sleuth 与 Zipkin【Finchley 版】
原创: dqqzj SpringForAll社区 今天 Spring Cloud Sleuth Span是基本的工作单位. 例如,发送 RPC是一个新的跨度,就像向RPC发送响应一样. 跨度由跨度唯一 ...
- 百度地图API:自定义控件
HTML: <!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu ...
- LINQ的基础使用方法
//新建一个项目 //项目下新建一个App_Code文件夹 //在文件夹内添加一个LINQ TO SQL,这个操作就相当于创建了一个实体类 //连接数据库后把表拖入到服务器资源管理器中 //创建数据访 ...
- 【洛谷P2257】YY的GCD
题目大意:有 \(T\) 个询问,每个询问给定 \(N, M\),求 \(1\le x\le N, 1\le y\le M\) 且 \(gcd(x, y)\) 为质数的 \((x, y)\) 有多少对 ...