Js 深入理解Ajax

ajax的工作原理:

ajax的工作原理相当于在用户和服务器之间加了一个中间层(ajax引擎) ,使用 户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,只有确定需要从服务器读取新数据时再由ajax引擎代为向服务器提交请求。


ajax的核心:

有javascript, XMLHT TPRequest, DOM对象组成,通过XMLHTTPRequest对象来向服务器异步请求,从服务器获得数据,然后用javascript来操作DOM来更新页面,这其中最关键的一步就是从服务器获得请求数据。


XMLHTTPRequest对象:

AJAX的最大特点是无需刷新页面便可向服务器传输或读写数据,这一特点主要得益于XMLHTTP组件的XMLHTTPRequest对象。


创建AJAX的过程:

XMLHttpRequest是AJAX的基础, 用于在后台与服务器交换数据,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

1、创建XMLHTTPRequest对象: (兼容处理)
var xhr = null;
//前面必须添加window否则报错(不能拿一个不存在的对象作为判断条件)
if(window.XMLHttpRequest) { 
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}


2、建立对服务器的调用
xhr.open(method, url, async);
method: 请求数据类型(get, post, options, head, put, delete, trace, connect) 

get请求: 
xhr.send()

post请求:
xhr.setRequestHeader("Content type", "application/x-www-form-urlencoded"); 
//向请求添加HTTP头
xhr.send("fname=Bill&lname=Gates");

GET 还是POST?

与POST相比,GET更简单也更快,并且在大部分情况下都能用。


然而,在以下情况中,请使用POST请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • b.向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST比GET更稳定也更可靠
  • url:文件在服务器上的位置
  • async: true (异步)或false (同步)
  • 同步:指发出数据后,等接收到响应以后再发送下一个数据包
  • 阐述:提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事情; 当前只能做一件事情,其它事情必须等当前的事情完成,才能继续后面的事
  • 异步:指发出数据后,不用等待接收到响应,接着发送下一个数据包
  • 阐述:提交请求->等待服务器处理(这时浏览器仍然可以做其他事情) ->处理完毕;三心二意,同时可以做多件事情

XMLHttpRequest对象有 三个重要的属性:

  1. onreadystatechange 状态改变的事件触发器,每个状态改变时都会触发这个事件处理器
  2. readyState从0到4发生变化
  • 0 =未初始化
  • 1 =正在加载/服务器连接已建立
  • 2 =已加载/请求已接收
  • 3 =交互中/请求处理中
  • 4 =请求完成
  1. status服务器的HT TP状态码:
  • 1字头: 消息。这一类型的状态码,代表请求已被接受,需要继续处理。
  • 2字头:成功。 这一类型的状态码, 代表请求已成功被服务器接收、 理解、并接受。( 200:'OK')
  • 3字头:重定向。这类状态码代表需要客户端采取进一步的操作才能完成请求。( 304:'Not Modified' )
  • 4字头:请求错误。这类的状态码代表了客户端看起来可能发生了错误,妨碍了服务器的处理
  • 5、6字头: 服务器错误。这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生

Ajax的优点

  1. 无刷新更新数据
    AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互,并避免了在网络上发送那些没有改变的信息, 减少用户等待时间, 带来非常好的用户体验。

  2. 异步与服务器通信;
    AJAX使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。优化了Browser和Server之间的沟通,减少不必要的数据传输、时间及降低网络上数据流量。

  3. 前端与后端负载平衡
    AJAX可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。
    并且减轻服务器的负担,AJAX的原则是“按需取数据”,可以最大程度的减少冗余请求和响应对服务器造成的负担,提升站点性能

  4. 基于标准被广泛支持:
    AJAX基于标准化的并被广泛支持的技术,不需要下载浏览器插件或者小程序,但需要客户允许JavaScript在浏览器.上执行。随着Ajax的成熟, 一些简化Ajax使用方法的程序库也相继问世。同样, 也出现了另一种辅助程序设计的技术,为那些不支持JavaScript的用户提供替代功能。

  5. 界面与应用分离:
    Ajax使WEB中的界面与应用分离(也可以说是数据与呈现分离) 有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在
    的发布系统。


Ajax的缺点

  1. AJAX干掉了history功能, 即是对浏览器机制的破坏:
    在动态更新页面的情况下, 用户无法回到前一个页面状态,因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙;
    用户通常会希望单击后退按钮能够取消他们的前一次操作,但是在Ajax应用程序中, 这将无法实现。
    用过Gmail的知道,Gmail 下面采用的Ajax技术解决了这个问题,在Gmail' 下面是可以后退的,
    但是,它也并不能改变Ajax的机制,它只是采用的一个比较笨但是有效的办法,即用户单击后退按钮访问历史记录时,
    通过创建或使用一个隐藏的IFRAME来重现页面.上的变更。一个相关的观点认为,使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现,大部分都使用URL片断标识符(通 常被称为锚点,即URL中#后面的部分)来保持跟踪,
    允许用户回到指定的某个应用程序状态。 (许多浏览器允许JavaScript动态更新锚点,这使得Ajax应用程序能够在更新显示内容的同时更新锚点。)这些解决方案也同时解决了许多关于不支持后退按钮的争论

  2. AJAX的安全问题:
    AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁,Ajax技 术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。
    Ajax的逻辑可以对客户端的安全扫描技术隐藏起来,允许黑客从远端服务器,上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点,诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。

  3. 对搜索引擎支持较弱:
    对搜索引擎的支持比较弱。如果使用不当,AJAX会增大网络数据的流量, 从而降低整个系统的性能。

  4. 基于标准被广泛支持:
    AJAX基于标准化的并被广泛支持的技术,不需要下载浏览器插件或者小程序,但需要客户允许JavaScript在浏览器.上执行。随着Ajax的成熟, 一些简化Ajax使用方法的程序库也相继问世。同样, 也出现了另一种辅助程序设计的技术,为那些不支持JavaScript的用户提供替代功能。

  5. AJAX不能很好支持移动设备:
    一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax,比如说我们在手机的浏览器上打开采用Ajax技术的网站时,它目前是不支持的。

  6. 客户端过肥,太多客户端代码造成开发上的成本
    编写复杂、容易出错;冗余代码比较多(层层包含js文件是AJAX的通病, 再加.上以往的很多服务端代码现在放到了客户端) ;破坏了Web的原有标准。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容