码迷,mamicode.com
首页 > Web开发 > 详细

浅谈Ajax

时间:2015-05-30 13:23:12      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:

   最近又学习关于jquery中封装的Ajax的方法,越来越感觉到Ajax的好用,所以就想总结一下Ajax的强大之处。

         Ajax全称Asynchronous JavaScript and XML,顾名思义:异步的 JavaScript 和 XML,当然XML已经逐渐被Json所取代了。在2005年,Google通过其Google Suggest使Ajax变得流行起来。Google Suggest 使用Ajax创造出动态性极强的web界面:当您在谷歌的搜索框输入关键字时,JavaScript会把这些字符发送到服务器,然后服务器会返回一个搜索建议的列表。Ajax就像是一门艺术,它在与服务器数据交互的同时并且不在刷新网页的情况下就可以完成网页的部分更新,是一种使用现有标准的新方法,Ajax已经得到越来越多人的青睐,如新浪微博、Google 地图、开心网、百度等等都有使用Ajax的地方。

         学习Ajax之前当然要对Html、css、javascript的知识有一定的了解,下面我就来谈谈Ajax的使用原理。首先声明一个保存XMLHttpRequest对象的xmlHttp变量。然后使用XMLHTTP=new XMLHttpRequest()来创建此对象。这条语句针对Firefox、Opera以及Safari浏览器。假如失败,则尝试针对Internet Explorer6.0+的xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"),加入这也不成功,则尝试针对Internet Explorer5.5+的 xmlHttp=new ActiveXObject("Microsoft。XMLHTTP")。假如这三种方法都不起作用,只能说明你使用的浏览器已经太过时了,你会看到一声明此浏览器不支持AJAX的提示,大家都知道,对于IE8以前的版本,一些兼容性的问题都是很恼火的,对此我只能表示"呵呵"了。上面这些浏览器定制的代码很长,也很复杂。不过,每当您希望创建XMLHttpRequest对象时,这些代码就能派上用场,因此您可以在任何需要使用的时间拷贝这些代码。接着,我们在向服务器发送数据之前,有必要了解一下XMLHttpRequest对象的三个重要的属性,即onreadystatechange、readyState、responseText,onreadystatechange和readyState就是代表后台发送数据过来后的状态,然后我们就可以执行回调函数。接着就是最重要的环节了,要想把请求发送到服务器,就需要设置我们的发送信息,调用open()方法和send()方法。open()方法需要三个参数。第一个参数定义发送请求所使用的方法(Get还是POST)。第二个参数规定服务器端脚本的URL。第三个参数规定应到对请求进行异步的处理。设置好这三个参数,然后用send()即可将请求送往服务器。

         再来谈谈Ajax的跨域访问的问题,我们都知道Ajax是不支持跨域访问的,但我们可以通过一些方法解决跨域访问问题。第一,在服务器加上允许跨域访问的响应头。第二,使用JSONP解决跨域访问问题。第三,采用代理服务器。这样Ajax就比较完美了。

         最后总结一下Ajax适用的场景:1.表单驱动的交互。2.深层次的树的导航。3.快速的用户与用户的交流响应。4.类似投票、yes/no等无关痛痒的场景.5.对数据进行过滤和操纵相关数据的场景。6.普通的文本输入提示和自动完成的场景。再说说不适用的场景:1.部分简单的表单。2.搜索、基本的导航3.替换大量的文本。4.对呈现的操纵。总的来说,Ajax技术是一种革新,是IT技术人员智慧的结晶!

浅谈Ajax

标签:

原文地址:http://www.cnblogs.com/jiangyunfei/p/4540184.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!