Ajax使用小结
来源:互联网 发布:苹果手机怎么清除游戏数据 编辑:程序博客网 时间:2024/06/06 06:43
本科做课设的时候也用过ajax,但是当时做出来的东西在大部分浏览器中都没法异步更新页面内容,当时也就得过且过了。
前段时间做demo(万恶的demo让我复习了多少东西……)又把ajax拿过来复习了一遍,终于可以适应主流的ie、firefox、chrome三大浏览器的较新版本(最近1年的版本吧,再早的版本没有试过,但想必也没什么问题)了。
小结如下:
1、ajax的实现步骤
s1: 获取一个XMLHttpRequest对象
s2: 编写一个处理函数,绑定到XMLHttpRequest对象的onreadystatechange事件上,该处理函数用于在ajax请求的状态发生变化时进行相应的处理
s3: 在XMLHttpRequest对象上open一个request,形如:xmlHttp.open("GET", "status.jsp?id="+Math.random());
s4: setRequestHeader("header", "value");可以设置各种header,如果服务器端不需要header信息,也可已省略这一步
s5: send() request
最为关键的就是s2和s3.
2、获取XMLHttpRequest对象
var xmlHttp;function createXmlHttpRequest(){if (window.XMLHttpRequest){xmlHttp=new XMLHttpRequest();}else if (window.ActiveXObject){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}}
3、编写处理函数
处理函数基本就是这样:
function processXXX(){if (xmlHttp.readyState==4){if (xmlHttp.status==200){//……}}}
可以通过xmlHttp得到responseText或者responseXML,分别得到服务器端的字符串形式或者xml形式的响应,前者通常是一段可以直接用来更新页面的内容,而后者是xml格式的数据,可以用js取出其中的元素值。根据需要选用一种之一即可。例如更新页面上的一个统计数值的处理函数如下:
function processStatistics(){var responseContext;if (xmlHttp.readyState==4){if (xmlHttp.status==200){responseContext=xmlHttp.responseText;document.getElementById("statistics").innerHTML=responseContext;}}}
4、发送异步请求
这一步是ajax的关键,通过调用xmlHttp的open和send方法来完成,例如:
xmlHttp.open("GET", "status.jsp?id="+Math.random(), true);xmlHttp.send(null);
一般request参数不多时用GET方式就可以,open的第二个参数是要请求的服务器端的一个url,可以是jsp或者servlet,也可已是struts2 action。如果是struts2 action的话,那么在自定义的action控制器中不要配置返回视图,直接在execute方法中用servlet api拿到PrintWriter、写入要返回的内容并flush+close PrintWriter,在execute方法中return null(不跳转到某个试图)即可。url中的id参数是一个无实际意义的参数,但是非常重要,很多浏览器中都会有cache,请求一个地址时,浏览器会检查cache中是否有最近的该url的响应内容,如果有就不会向服务器发送请求,而是直接返回cache中的内容,这样可以提高浏览的速度。浏览器cache是基于这样一个假设:网页的内容不会在很短的一段时间内更新。但对于ajax,有时需要频繁地进行异步更新(如定时更新页面上的系统状态),所以需要加上一个随机的参数,防止cache中的内容影响页面的更新。open的第三个参数为true表示采用异步方式处理请求,ajax必须用true,一般该参数在缺省情况下都是true。
send方法的参数在GET方式下为null即可,在POST方式下send的参数就是要发送的key-value数据,多条数据之间用&分隔,如果post要以表单的形式发送数据,还需要设置header:
setRequestHeader("Content-type", "application/x-www-form-urlencoded");
- Ajax 使用小结
- jquery ajax使用小结
- Ajax使用小结
- Ajax使用小结
- .net2003 使用 Ajax.dll 小结
- [学习小结]Ajax_使用 XMLHttpRequest 实现 Ajax
- prototype.js Ajax.Request使用小结
- jQuery AJAX传JSON数据使用小结
- AJAX小结
- AJAX 小结
- AJAX小结
- ajax 小结
- Ajax小结
- Ajax小结
- ajax小结
- ajax小结
- AJAX小结
- ajax小结
- Android 检查是否有网络
- INCORRECT RESULT SIZE: EXPECTED 1, ACTUAL 0错误以及解决方法
- 简单三步教你破解SharpPlus Sqlite Developer
- 【LoadRunner】解决HTTP请求中传参的base64加密方法
- C_C++ _________________this指针----类的理解
- Ajax使用小结
- JiaThis™“分享到”工具式按钮代码:
- 黑马程序员--------java基础--函数和数组的常用的排序方法
- android开发中ScrollView中嵌套ListView造成ListView无法独立滚动的解决方法
- 银行卡号 输入4位自动加入空格符
- .net 程序中几种常见的语法
- 初识Ildasm.exe——IL反编译的实用工具
- 驰骋即时通讯系统CCIM安装
- XCode各版本对应的Mac OS操作系统版本