注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

栖客技术札记

栖客王近东,山东泰安人。本杂记主要收录工作、学习、生活中遇到的问题及解决方法。

 
 
 

日志

 
 
关于我

主要收录在技术学习和技术应用方面的文章,有原创、有引用、有转载,学以致用,欢迎浏览。(我的教育类文章发布在http://wjd.blog.edu.cn上)

网易考拉推荐

AJAX,浏览器的一个助手  

2011-10-14 14:32:30|  分类: Web |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

所谓AJAX就是:”Asynchronous JavaScript and XML”,中文意思:异步JavaScript和XML。AJAX并不单单指一门技术,可以简单的理解成Javascript+XMLHttpRequest+Css+服务器端 的集合。

       ajax是浏览器端的一项技术,在用户不知情的情况下悄悄的把用户在浏览器端发给服务器的请求发送出去,并悄悄的把数据内容带回给浏览器,通过浏览器解析这些数据最后呈现给用户看。而且使用ajax技术在实现分页显示数据的功能时可以实现请刷新的效果,减少浏览器向服务器的交互次数,减轻服务器的压力,并且在浏览器端减少用户的等待时间,几乎实现肉眼以为是在本地取数据那么流畅的效果。(关于用ajax实现分页的功能下次再介绍)

       AJAX技术的核心是XMLHttpRequest。

      今天抛开一些官方的解释,小谈一下我眼中理解的AJAX。

      之前当我们通过浏览器端向服务器提交某种请求的时候,浏览器会亲自跑去向服务器提交,在服务器尚未返回响应请求的过程中我们(用户)一直都都在等着,什么操作也做不了,直到浏览器拿到从服务器返回的数据后才能解析给我们看,假设:服务器当时比较繁忙,不顾的处理浏览器提交过去的请求,那么我们就得一直在浏览器端等待,这样的网页相信你下次一定不会再想打开。

       相反,有了AJAX后,AJAX相当于浏览器的一个助手,当客户在浏览器端向服务器端提交某种请求的时候,浏览器会把向服务器端提交请求并返回数据这项任务分派给ajax去做,而在 ajax返回从服务器端带回的数据前浏览器可以继续跟用户交互,这样就节省了用户的时间,不至于使用户一直干等着某一项请求的完成。(跟前面介绍过的多线程相比,ajax就相当于一个新的线程,当浏览器把这个新的线程派出去后,还可以跟客户交互)

 

那么ajax这个小助手是如何为浏览器办事的呢?下面用一个派助手去买啤酒的例子来解释一下:

1.首先要叫一个助手过来(创建一个XMLHttprequest对象)

   XMLHttpRequest xhr=new XMLHttpRequest();

2.告诉助手用什么方式去、去哪里买啤酒,并让助手带上钱(调用XMLHttpRequest对象的open()方法,并设置它的参数)

  xhr.open("get","url",true);

 open()方法有三个参数,第一个参数:使用get方式提交还是用post方式提交;第二个参数:提交到的页面url路径;第三个参数:是否使用异步的方式执行(true和false)。

3.出发前告诉助手买回来的啤酒应该放哪(设置onreadystatechange事件并触发一个回调函数,并根据readyState属性值的不同来判断ajax是否顺利从浏览器带回了数据)

  xhr.onreadystatechange=function (){

      if(xhr.readyState==4){

         var result=xhr.responseText;       

         alert(xhr.);

       }

 }

4.告诉助手可以出发了(send()方法)

  xhr.send(null);

 关于send()方法里面的参数,当上面的open()方法的第一个参数是get的时候send()方法里面的参数应该是null,因为即便是要传递某些数据给请求的页面也是在url路径后面写数据,而不用在send()里面传参;比如要传一个name=admin的值给url则:

xhr.open("get","url?neme=admin",true);

xhr.send(null);

  而当我们在 open()方法中设置成post方式时,则所要传递的数据就应该在send()方法中写了,还是上面的例子:

xhr.open("post","url",true);

xhr.send(name=admin);

这样就把一个最简单的委派助手(ajax)买啤酒的任务实现了。

注:在使用ajax实现异步的过程中还有好多的情况发生,比如XMLHttpRequest对象的Status属性要是返回服务器端的状态不是200(200表示服务器已经找到浏览器请求的页面并返回给浏览器相应的内容)的时候应该如何处理,readyState属性共有5个值(从0到4)分表表示正处在什么情况下,要是想传递多个数据给服务器端应该怎么传,等……

  上面的这些情况还需要根据我们的需求来做相应的判断。

  评论这张
 
阅读(347)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017