[自学笔记]AJAX一些容易被人忽略的重点

用AJAX开发的时间也有一段日子了,但是“走都没走好,就直接开始跑了”。因为之前在学的AJAX的时间并不多,基本上都是略过,挑一下重点来讲。然后直接学习了了DWR这个简单、强大、好使的框架。所以很多AJAX的基本都忽略了。最近重新学了一下,记下一些关键点。

忽略了这些,往往可能会让你的AJAX程序得到一些意料之外的结果。

[size=medium][b]1、初始化连接 request.open(Param1,Param2,Param3);和提交请求request.send(null);[/b][/size]
Param1:连接到服务器使用的方法,跟表单的method属性一样。"GET"或"POST"可选。推荐一般使用"GET",原因后续。
Param2:提交到服务器的URL地址。
Param3:Boolean类型,决定同步会异步操作。后续会解析。

request.send(null) 提交请求,null有些人可能不知道表示什么,其实就是附带给服务器的参数。就是POST方式提交的表单数据的消息体。

要点:

Param1,推荐使用"GET"。因为大多数情况下,通过AJAX提交的给服务器的参数并不多,使用"GET"的话更加简单,提交的时候直接使用 request.send(null);即可。如果使用"POST"的话,在提交请求的时候 request.send(null)的null就不能直接这样写了。null改为get里面的参数体,例如key=value。而且还必须设置消息体的类型,例如setRequestHeader("Content-Type", "application/x-www-form-urlencoded")。所以相对比较麻烦,但如何取舍才是需要考虑的。

Param2:除了服务器端的接口地址,一般都包含以URL方式传递的参数请求。但注意的是某些浏览器(IE、Opera)的内部缓存机制。这个解析起来有些麻烦,总之如果两次相同URL请求的话,浏览器会把第二次请求不提交到服务器上,而返回第一次已经获得的那次响应。某些情况下,这个是高效的,但是一些情况下却希望每次提交都是新的数据。所以需要加上一个dummy参数,确保每次的URL不同。这个dummy参数可以用当前时间(new Date().getTime())或者random方法生成。
另外,参数的value,可以使用JavaScript提供的escape方法来确保不出现一些非法的值而URL无效。所有的空格符、标点符号、特殊字符以及其他非ASCII字符都将被转化成%xx格式的字符编码(xx等于该字符在字符集表里面的编码的16进制数字)。比如,空格符对应的编码是%20。

Param3:通常情况下,异步或者同步其实差别不大,因为服务端的响应时间足够快的话。但如果处理时间比较长的话,就要考虑是否同步的问题了,其实同步与否,考虑的关键就是服务器处理请求的这段时间内允不允许用户在页面上做其他操作。

[size=medium][b]2、同步synchronous和异步asynchronous的区别。[/b][/size]
学AJAX的时候基本都会了解这点的。不过很多时候都一知半解,简单说明的话就是同步情况下,通过request.send提交的请求必须等服务器响应给浏览器的时候页面才能做其他操作,不然点任何操作都是一个繁忙状态,鼠标例如WINDOW的旋转漏洞。异步的话,不受这影响,请求完毕后,可以在页面上继续其他操作。
虽然通常情况下,服务端的响应都是十分快的。

要点:
如果是异步的话,注意request某些情况下会被覆盖。即第一个异步请求服务端没返回,第二个提交出去了。而使用同一个request对象的话,第一次的就被覆盖了。所以永远就只能得到一个返回数据了。所以异步情况下,推荐不使用全局request比较好。但request需要传参囖。并且回调函数使用完毕的时候记得初始化一下。

[size=medium][b]3、回调函数。[/b][/size]
一个完善的回调函数,必须有两个判断条件。第一个是判断HTTP就绪状态request.readyState,另外一个是服务器的状态码request.status。
一般是先判断request.readyState==4,然后request.status才真正执行回调函数体。
前者是因为每个request请求,一个HTTP就绪状态request.onreadystatechange共会产生4次。我们知道,当 request.readyState==4才是真正获得了request.responseText的时候。没了这个的话,回调函数就会运行多次了。
后者是因为调试提交到服务器的URL是否正确。一切顺利的话会返回200,找不到页面的话会404,资源被保护的话是403,这些常遇到的状态码相信大家也不会陌生。没了这个的话,开发的时候往往有时候会因为粗心写错URL但是又要花时间去找BUG。

例如:


if (request.readyState == 4) {
if (request.status == 200) {
//do something
} else
alert("ERROR! The request status of " + request.status);
}


[size=medium][b]4、关于操作DIV或SPAN元素。[/b][/size]
希望使用DOM方式操作,因为所有浏览器通常都是支持DOM操作的。避免使用innerHTML方式,因为被认为不安全和不稳定的。逐渐的浏览器会对innerHTML兼容性降低,甚至慢慢抛弃。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值