利用Ajax发送请求(一)

1. ajax是什么?

(asynchronous javascript and xml) 
ajax是一种用来改善用户体验的技术,本质是利用浏览器提供的一个 特殊对象(XMLHttpRequest,我们可以称之为ajax对象)向服务器发送异步请求;服务器返回部分数据(一般不需要返回一个完整的页面),浏览器利用这些数据对当前页面做部分更新;整个过程不打断用户的 操作,页面无刷新。
注:异步请求,指的是发请求时,浏览器不会销毁当前页面,用户仍然 可以对当前页面做其它操作。

2. 如何获得ajax对象?

3. ajax对象的几个重要属性

onreadystatechange

用来绑订事件处理函数(用来处理readystatechange事件)。
注:当ajax对象的readystate属性值发生了改变(比如从0变成了1, 就会产生readystatechange事件)。

readyState

它有五个值(0,1,2,3,4),表示ajax对象与服务器通信的进展, 其中4表示ajax对象已经获得了服务器返回的所有的数据。

responseText

用来获得服务器返回的文本数据。

responseXML

用来获得服务器返回的xml数据。

status

用来获得服务器返回的状态码。

4. 编程步骤

step1. 获得ajax对象。
比如: var xhr = getXhr(); 
step2. 利用ajax对象发请求。
(1)get请求:
比如:

true:异步 
false:同步(发请求时,浏览器会锁定当前页面,用户不能够对当前页面 做其它操作)。
(4)post请求:
比如:

注:按照http协议要求,如果发送的是post请求,必须在请求数据包里面 添加content-type消息头。ajax对象默认情况下,不会添加该消息头, 所以,需要调用setRequestHeader方法来添加。
step3. 编写服务器端的程序。 通常只需要返回部分数据。
step4. 编写事件处理函数。

注意:(一)按照http协议的规范,若发送post请求,则必须在请求数据包里添加content-type消息头,因为默认情况下ajax对象不带有消息头,需要自己设置

(二) IE浏览器中ajax使用缓存数据的问题

今天做了一个小功能:点击鼠标实时更新系统时间,采用ajax,过程很顺利,没遇到啥差错,谷歌,火狐,欧鹏一律通过,怀着忐忑的心情点开了IE8,果然,IE要对得起前端杀手的称号:更新不了时间。

查了一下这才发现IE一直存在这个问题,内部原因是:当第一次请求数据时能顺利返回,第二次以后IE会默认使用上次的缓存数据,这就造成了每次发送请求后返回的数据没有更新的原因。

解决方法:

1.最直接有效的就是在请求页后面加上随机函数,随机函数可以是Math.random(),也可以是new Date().getTime();这样URL每次都是新的。

之前代码:XHR.open('get', 'demo.PHP', false);

改进代码:XHR.open('get', 'demo.php?rand='+new Date().getTime(), false); //用new Date().getTime();

    或:xhr.open('get', 'demo.php?rand='+Math.random(), false);                 //用Math.random();

2.改用post提交方式也能解决这个问题。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

荒--

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值