用AJAX开发的时间也有一段日子了,但是“走都没走好,就直接开始跑了”。因为之前在学的AJAX的时间并不多,基本上都是略过,挑一下重点来讲。然后直接学习了了DWR这个简单、强大、好使的框架。所以很多AJAX的基本都忽略了。最近重新学了一下,记下一些关键点。
忽略了这些,往往可能会让你的AJAX程序得到一些意料之外的结果。
1、初始化连接 request.open(Param1,Param2,Param3);和提交请求request.send(null);
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:通常情况下,异步或者同步其实差别不大,因为服务端的响应时间足够快的话。但如果处理时间比较长的话,就要考虑是否同步的问题了,其实同步与否,考虑的关键就是服务器处理请求的这段时间内允不允许用户在页面上做其他操作。
2、同步synchronous和异步asynchronous的区别。
学AJAX的时候基本都会了解这点的。不过很多时候都一知半解,简单说明的话就是同步情况下,通过request.send提交的请求必须等服务器响应给浏览器的时候页面才能做其他操作,不然点任何操作都是一个繁忙状态,鼠标例如WINDOW的旋转漏洞。异步的话,不受这影响,请求完毕后,可以在页面上继续其他操作。
虽然通常情况下,服务端的响应都是十分快的。
要点:
如果是异步的话,注意request某些情况下会被覆盖。即第一个异步请求服务端没返回,第二个提交出去了。而使用同一个request对象的话,第一次的就被覆盖了。所以永远就只能得到一个返回数据了。所以异步情况下,推荐不使用全局request比较好。但request需要传参囖。并且回调函数使用完毕的时候记得初始化一下。
3、回调函数。
一个完善的回调函数,必须有两个判断条件。第一个是判断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);
}
4、关于操作DIV或SPAN元素。
希望使用DOM方式操作,因为所有浏览器通常都是支持DOM操作的。避免使用innerHTML方式,因为被认为不安全和不稳定的。逐渐的浏览器会对innerHTML兼容性降低,甚至慢慢抛弃。
分享到:
相关推荐
[STM32自学笔记].蒙博宇
通过“STM32自学笔记”这样的资料,你可以系统地学习STM32的基础知识和实践技巧,逐步掌握单片机开发的全貌。在实践中,不断实验和调试,加深对外设的理解,是提升技能的关键。同时,参与社区交流,参考他人的项目,...
本书不但讲述了AVR单片机的常用知识,还重点讲述了Bootl.oader及嵌入式操作系统AVRX的使用方法,更为重要的是书中还包括单色图形液晶屏绘图函数库的应用,同时将许多实际应用中的设计内容及调试经验融人到本书。...
STM8单片机自学笔记-范红刚著, 单片机自学系列的STM8自学教程,, 推荐给大家, 这个系列我一直在收集. 清爽版本
《STM32自学笔记》随书共享资料包含了学习STM32开发所必需的各种资源,包括书籍配套的光盘资料和STM32的3.5数据库及使用手册。 首先,STM32的3.5数据库可能是关于STM32的固件库或HAL库的更新版本,这些库为开发者...
### FPGA自学笔记——设计与验证公开版 #### 1. FPGA技术背景与发展趋势 随着FPGA技术的不断发展,从最初的简单逻辑粘合逐渐演变为现在的可编程片上系统(SoC),FPGA的应用范围也在不断扩大。例如Altera(现已被...
本资源“STM32自学笔记 随书资料”是一份全面的学习STM32开发的参考资料,旨在帮助初学者快速入门并深入理解STM32的工作原理和编程技巧。 一、STM32架构与特性 STM32系列涵盖了多种型号,主要基于Cortex-M0、M3、M4...
小梅哥的FPGA自学笔记是一份非常宝贵的资源,尤其对于初学者来说,它提供了深入浅出的FPGA学习路径。FPGA(Field-Programmable Gate Array)是一种可编程逻辑器件,允许用户根据需求定制电路,广泛应用于通信、图像...
**Ajax完全自学手册** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使得网页实现异步更新,提高了用户体验。本...
计算机网络自学笔记: 一、计算机网络基础 1. 计算机网络的定义 计算机网络是由多台计算机及相关设备组成,通过通信介质实现资源共享和信息交换的系统。网络中的设备可以通过特定的网络协议进行通信,而Internet...
STM8单片机自学笔记, 经典的单片机自学笔记,通俗易懂好学好用。
FPGA自学笔记--设计与验证的知识点: 1. FPGA的介绍与发展 FPGA(Field-Programmable Gate Array,现场可编程门阵列)是一种可以通过编程来配置其逻辑功能和互连结构的集成电路。FPGA的发展经历了从最初简单的逻辑...
RHCE 培训笔记和自学笔记RHCE 培训笔记和自学笔记RHCE 培训笔记和自学笔记
最后,笔记可能会提供一些实战项目或练习题,帮助考生巩固所学知识,模拟真实考试环境,提高解决问题的能力。同时,对于考试的格式、题型和评分标准,笔记也应有所介绍,以便考生了解考试要求,有针对性地进行复习。...
ARM-CORTEX-M4自学笔记,手把手教你学习MK60,
stm32自学教程。适合开发者,学生,单片机爱好者
本自学笔记主要围绕STM32的基础知识、开发环境搭建、程序编写和实践应用展开,旨在帮助初学者快速入门并掌握STM32的使用。 一、STM32基础 STM32系列涵盖多种内核类型,包括Cortex-M0、M3、M4和M7,不同内核提供了...
Cortex-M4自学笔记-基于Kinetis K60,方便大家写程序
【PHP自学笔记】是一份全面涵盖PHP学习路径的资料集合,旨在帮助自学者高效地掌握这一流行的后端编程语言。这份笔记集包含了从基础到进阶,甚至涉及到框架和服务器集群等多个方面,使得学习者可以按照系统化的路径...