AJAX总结

hold_on

浏览: 456567 次
性别:
来自: 深圳

最近访客更多访客>>

java_oygm

smh0310

汀雨晓洛

zhangweihong_zyj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Ajax 浏览器应用服务器 JavaScript 编程

1、什么是AJAX？

AJAX = 异步 JavaScript 及 XML（Asynchronous JavaScript and XML）
AJAX 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。通过 AJAX，您的 JavaScript

可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，您的 JavaScript 可在不重载页面的情况与

Web 服务器交换数据。

2、AJAX中用到的技术

实际上，Ajax 不是一种技术，而是几种技术。每种技术都具有独特之处，合在一起就形成功能强大的新技术。Ajax 包括：

javaScript: 实现客户端的数据发送和界面更新，是ajax 实现的编程语言；

XMLHttpRequest ：浏览器内置的用以进行异步数据发送和接收的对象，是AJAX 核心对象；

Css+div: 对用户而言，AJAX 的价值是用户界面更加友好--- 这当然还是依靠css+div 实现；

DOM 模型： AJAX 常见的技巧就是使用js 响应dom 组件事件或更新其；

Xml: XML 仅是一种传输数据的格式，在ajax 应用中常以xml 格式在c/s 间交换数据；

Html: 这个不用说了，浏览器上展示东东归根到底是靠这玩意。

如果你在实践本节应用时，对css+div+dom 技巧还不是很熟练，就做做边回头看我们前面所讲的css+div 和js+dom 技术的教程

。

你可能很奇怪，AJAX 技术中没有java 的身影。即确如此，AJAX 所关注的是，如何在用户端的展示，即浏览器上，java 的代码，除

了正在淘汰中的applet, 是不可能跑到游览器上的。可以这样理解：ajax 是独立与后端服务器的一种技术，应用AJAX 时，与后端采

用何种编程语言无关, 当然与你对这种语言的熟练程序有关。

3、AJAX与传统web的区别

传统web都是“请求--响应”模式，如果客户需要与服务器进行交互，比如说,登陆界面，当客户输入的用户名和密码有误时，应该在

登录页面给予错误提示，按照传统web，流程是这样的：

1、浏览器提交登录请求

2、服务器解析请求，用户名或密码错误，给予响应，再重发整个登录界面给客户

3、浏览器接收服务器响应（这时客户端接收的是服务器响应后的整个登陆界面（即页面刷新），而其区别仅仅比登陆前的界面多出

了一个，这显然不是我们希望的）

而AJAX代码运行在浏览器和服务器之间，通过编程，你可以让AJAX代码（核心：XMLHttpReques异步请求对象）从服务器仅提取需要

改变的数据，也只改变页面中需要改变的某一部分，按照AJAX，以上登录过程流程是这样的：

1、浏览器提交登录请求

2、服务器解析请求，用户名或密码错误，给予响应，仅仅发送“错误提示”部分数据给客户

3、浏览器通过AJAX中的XMLHttpRequest(异步请求对象)解析服务器响应客户请求的数据，再在客户端本地进行处理（显示登录的错

误提示），注意：此时浏览器并没有重新刷新页面

下面我们用AJAX来写一个登陆界面对重复用户名的验证

AJAX三部曲：

第一步、创建XMLHttpReques对象

< script type = "text/javascript" >

// 定义了XMLHttpRequest 对象

  var request;

   // 创建XMLHttpRequest 对象函数

     function getRequestObject() {

        if (window.ActiveXObject) { //判断客户端浏览器是否是IE

          request= new ActiveXObject( "Microsoft.XMLHTTP" );

        } else if (window.XMLHttpRequest) { //判断客户端浏览器是否是firefox或者其他浏览器

          request= new XMLHttpRequest();

        } else {

          window.alert( " 你的浏览器不支持XMLHTTPRequest ，将无使用AJAX 功能！" );

        }

     }

  </ script >

第二步、编写回调方法：

  // 回调方法实现: 将服务器返回的消息更新到div 中

function processResult() {

       if ((request.readyState == 4) &&

             (request.status == 200)) {

          //1. 弹出对话框以便调试

         alert( " 服务器返回的是: " +request.responseText);

         // 显示到指定的组件中

       document.getElementById( "divErrorName" ).innerHTML=request.responseText;

        }

     }

回调方法：实际上就是一个监听器，当浏览器状态满足request.status == 200&& request.readyState == 4时，浏览器成功接收服

务器发送过来的响应，再在本地对数据进行处理，对响应的html页面做出改变

关于readyState和status参数的值的意义：

readyState:

第一如果返回0：则表示XMLHTTPRequest对像已经创建成功，但并没有初始化，open方法还没有调用．只是做好了工作准备而已．

第二如果返回1：则表示XMLHTTPRequest已经开始工作，并调用了open方法，而且根据open方法里的参数开始向
服务端发送请求．

第三如果返回2：则代表服务端已收到了请求．并且已向客户端传回了被请求的原始数据，此时返回的数据还不能够供客户端使用，

只是为responseText或responseXML接收数据做准备．

第四如果返回3：则表示正在解析原始数据．将原始数据解析为可以responseText,responseXML,responseBody接收到的格式，但还不

能获取．

第五如果返回4：则表示数据解析完毕．整个发送和传回过程一切正常．可以使用responseText,responseXML,responseBody获取数据
，
另外值得一提的是：其实readyState每改变一次状态．都会触发XMLHTTPRequest对像中的onreadystatechange属性．

status:

200:OK 一切正常，对GET和POST请求的应答文档跟在后面。

关于readyState和status的区别：

readyState是返回XMLHTTPRequest本身的请求工作状态．而status是返回当前http请求状态．想要知道当前的http请求有没有成功

status会返回详细结果．当然只有在readyState状态为3或4的时候，才可以调用status属性。

第三步：发送异步请求

// 发送请求, 绑定回调方法

  function sendRequest() {

          // 创建XMLHTTPRequest 对象

          getRequestObject();

           // 绑定回调方法，

          request.onreadystatechange=processResult;

          // 发送请求

         // request.open("GET", "index.jsp", true);

         // 发送Post 请求

          request.open( "POST" , "servlet/CheckUserNameServlet" , true );

        //设置XMLHttpRequest对像请求的http头：要提交的数据类型

          request.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" );

          var userName=document.getElementById( "userName" ).value;

          // 将userName 做为请求参数发送上去

          request.send( "userName=" +userName);

        }

以下是页面的html代码：

< html >< head >

< meta http-equiv = "Content-Type" content = "text/html; charset=GBK" >

< title > AJAX 检测重复用户名 蓝杰信息@NetJava.cn </ title >

</ head >

< body >

 

< br > 注册用户名: < input type = "text" name = "userName" />

<!-- 这个div 层内将显示ajax 从服务器返回的消息 -->

< div id = divErrorName " style = "color:red;" ></ div >

< br > 注册  密码: < input type = "password" name = "userPWD" />

< br >< input type = "button" name = "regUser" value = " 注册" />

</ body >

</ html >

后台CheckUserNameServlet中的service方法如下：

response.setContentType( "text/html;charset=GBK" );

    PrintWriter out = response.getWriter();

        String userName=request.getParameter( "userName" );

        System. out .println(System.currentTimeMillis ()+ " 请求参数userName: " +userName);

        String temMsg= "" ;

        if ( null ==userName||userName.equals( "" )){

            temMsg= "<h3> 必须输入注册用户名！</h3>" ;

        } else {

        // 假设到数据库表中查找看是否有重名存在：

        //boolean hasName=DBA.checkUserName(userName);

            temMsg= "<h3> 要注册的用户名" +userName+ " 己存在！</h3>" ;

        }

        out.println(temMsg);

        out.flush();

        out.close();

总之一句话概括AJAX主要作用：即在不重载页面的情况与 Web 服务器交换数据。

分享到：