1,Ajax简介 传统web交互模型是通过浏览器直接将请求发送给web服务器,web服务器收到请求并对请求处理后,将处理结果以回送响应的方式直接发给浏览器。在这种交互模式下,请求和响应的整个过程中,不可避免地会出现时延,因为,用户在发出一条请求后必须等待服务器响应,等待屏幕刷新 ...
1,Ajax简介
传统web交互模型是通过浏览器直接将请求发送给web服务器,web服务器收到请求并对请求处理后,将处理结果以回送响应的方式直接发给浏览器。在这种交互模式下,请求和响应的整个过程中,不可避免地会出现时延,因为,用户在发出一条请求后必须等待服务器响应,等待屏幕刷新,等待请求返回和生成新的页面,之后才能再次发出下一条请求。因此,这种交互给用户带来的体验是非常差的,为了改善用户体验,Ajax应运而生。
Ajax,即异步的JavaScript和(Asynchronous JavaScript and )。Ajax通过在浏览器端引入ajax引擎对用户请求进行预处理后发送给web服务器,同时,ajax引擎还负责接收服务器响应并对响应进行相关处理再回送给浏览器,ajax引擎通过异步的方式允许用户在收到响应之前不断地发送多条请求。Ajax正是通过这种类似于缓冲器的设置,让用户产生请求——响应无延时的体验,从技术角度来说,它并非一种新的技术,而仅仅是几种原有技术的组合,Ajax通过对这些技术的组合有效地实现了web页面与web服务器的动态交互,从而很好地改善了用户体验。这些技术主要包括:
1,CSS和XHTML,用于页面布局和样式设置
2,DOM模型,用于实现各种交互和动态显示。
3,
4,javascript来绑定和调用相关函数,实现服务器响应向浏览器的回送。
简单来说,Ajax是通过
2,对象及其属性
下面简要介绍一下
onreadystatechange 状态改变时所触发事件的处理程序
responseText 用于指定以文本形式返回服务器响应信息。
response用于指定以DOM兼容的文档形式返回服务器响应信息
status 用于指定服务响应的http状态码,如404、500、200等。
status Text 用于指定http状态码说明信息。
readyState 用于设置5个状态值:
0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
1 (初始化) 对象已建立,尚未调用send方法
2 (发送数据) send方法已调用,但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过response和responseText获取部分数据会出现错误,
4 (完成) 数据接收完毕,此时可以通过response和responseText获取完整的响应数据。
open(参数列表); 用于启动ajax引擎,并通过参数设置请求类型和URL地 址及其他请求参数
send(参数列表); ajax引擎通过调用send方法向服务器发送http请求。
3,Ajax技术开发步骤:
完成一个ajax应用程序的开发通常需要实现以下5个步骤:
1.得到对象.(js对象)
2.注册回调函数
3.调用open函数,该函数只是用于设置请求方式 以及url,它不发送请求.
4.调用send函数发送请求,
5.在回调函数中处理数据。
下面通过一个简单的例子来演示一下ajax步骤的具体实现:
1,创建jsp页面,如图,在/webroot目录下创建一个名为ajax.jsp(文件名任取)的jsp页面。代码如下:
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 3 <!DOCTYPE HTML> 4 <html> 5 <head> 6 <title>ajax技术案例1--通过地址栏传递参数</title> 7 <script type="text/javascript"> 8 var = null; 9 //创建10 if(window.11 //现在的大多数浏览器包括IE7以上版本采用此方式创建12 = new 13 } else if(window.ActiveXObject) {14 //IE5,IE6版本采用以下方式创建15 = new ActiveXObject("Microsoft."); 16 }17 18 //步骤2 —— 注册回调函数,用于实现ajax引擎对服务器响应数据的接收和处理。19 = function(){20 //步骤5 —— 处理响应数据 当服务器的响应信息完整并成功返回时,ajax引擎调用以下代码向浏览器做出响应。21 if(== 4 && == 200) {22 alert(23 }24 }25 26 /* get请求方式,参数设置27 28 //步骤3 —— 启用ajax引擎并设置请求类型和URL地址,同时通过地址栏传递请求参数29 30 31 //步骤4 —— ajax引擎根据步骤3设置的URL向服务器发送请求32 33 */34 //post请求方式,参数设置35 "POST","${pageContext.request.contextPath}/ajax1"); 36 "content-type","application/x-www-form-urlencoded"); 37 "name=lzhp");38 </script>39 </head> 40 <body>41 42 </body>43 </html>
原标题:Ajax学习总结(一)
关键词:ajax
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。