Ajax的基本运作方式
2013-04-12 20:06
232 查看
Ajax并不是一个专门的产品,浏览器中也没有专门的Ajax函数集。Ajax无非就是将名为XMLHttpRequest的特殊javascript对象与javascript事件和动态HTML技术结合起来使用。这篇博文将XMLHttpRequest对象拿出来晒晒它的基本特性。
当我们实例化了一个XHR对象的时候,就要做下一步:发送请求。建立一个对服务器的调用所需要的基本信息,我们需要:
1.服务器资源的URL;
2.HTTP请求类型,通常是GET或者POST;
3.服务器资源所需的参数;
4.一个javascript函数,对服务器返回的结果进行解释和处理。
open(http_method,url,asynchronous)初始化一个指向URL的连接。如果asynchronous为true,那么请求会在后台运行,这允许用户在XHR请求处理的过程中执行其他工作。反之,则是传统的“工作等待”模式的web应用。
所以打开一个URL连接,我们可以这样写:
xhr.open('Get','serverlet/ajax/getItem?id=321','trueasynchronous')
第二步就是指派一个毁掉处理器函数来接收响应,回调处理器的名称为onreadystatechange。在XHR对象经理的每种就绪状态(ready state)上,毁掉函数都至少被调用一次。在onreadystatechange函数中,需要手动检查readyState属性,一次确定当前请求处于生命周期的哪个阶段,以及是否可以开始对最终结果进行处理。任何时候readyState总会是以下几个值之一:
0 Uninitialized 尚未调用open()
1 Loading 已经执行open()
2 Loaded 已经执行send()
3 Interactive 服务器返回了一个数据块
4 Complete 请求完成,服务器数据发送完毕
基本上你只需检测readyState==4,也就是查看请求是否完成。一个典型的回调函数如下:
当我们实例化了一个XHR对象的时候,就要做下一步:发送请求。建立一个对服务器的调用所需要的基本信息,我们需要:
1.服务器资源的URL;
2.HTTP请求类型,通常是GET或者POST;
3.服务器资源所需的参数;
4.一个javascript函数,对服务器返回的结果进行解释和处理。
open(http_method,url,asynchronous)初始化一个指向URL的连接。如果asynchronous为true,那么请求会在后台运行,这允许用户在XHR请求处理的过程中执行其他工作。反之,则是传统的“工作等待”模式的web应用。
所以打开一个URL连接,我们可以这样写:
xhr.open('Get','serverlet/ajax/getItem?id=321','trueasynchronous')
第二步就是指派一个毁掉处理器函数来接收响应,回调处理器的名称为onreadystatechange。在XHR对象经理的每种就绪状态(ready state)上,毁掉函数都至少被调用一次。在onreadystatechange函数中,需要手动检查readyState属性,一次确定当前请求处于生命周期的哪个阶段,以及是否可以开始对最终结果进行处理。任何时候readyState总会是以下几个值之一:
0 Uninitialized 尚未调用open()
1 Loading 已经执行open()
2 Loaded 已经执行send()
3 Interactive 服务器返回了一个数据块
4 Complete 请求完成,服务器数据发送完毕
基本上你只需检测readyState==4,也就是查看请求是否完成。一个典型的回调函数如下:
xhr.onreadystatechange=function(){ var ready=xhr.readyState; if(ready==4){ parseCompletedRespoinse(xhr); } }
相关文章推荐
- TensorsFlow学习笔记5----TensorFlow Mechanics 101基本运作方式
- ajax——客户端访问webservice基本使用方式
- ajax请求基本方式
- AJAX示例应用-2(两级菜单的联动)-方式1(服务器以字符串形式返回子类别的id,name)
- Struts在控制器内的三种基本接收参数的方式
- ajax方式提交file表单
- [React Native]Redux的基本使用方式
- Ajax推送与拉取方式的比较
- ASP.NET 与 Ajax 的实现方式
- Struts 2三种方式实现Ajax
- Java基本常量的输出方式和类型
- ViewPager 基本方式加载view
- 关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
- 图的基本存储的基本方式二 链表
- c语言基本数据类型及存储方式
- Swift 基本知识之十七 swift遍历数组的几种方式
- jQuery中ajax的4种常用请求方式
- SSM利用接口的方式上传文件,js调用接口上传文件,ajax利用接口上传文件
- AJAX中的请求方式以及同步异步的区…