你的位置:首页 > 软件开发 > Java > Ajax学习总结(一)

Ajax学习总结(一)

发布时间:2016-05-25 18:00:22
1,Ajax简介  传统web交互模型是通过浏览器直接将请求发送给web服务器,web服务器收到请求并对请求处理后,将处理结果以回送响应的方式直接发给浏览器。在这种交互模式下,请求和响应的整个过程中,不可避免地会出现时延,因为,用户在发出一条请求后必须等待服务器响应,等待屏幕刷新 ...

Ajax学习总结(一)

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 (#换成@)。