AJAX学习

最新推荐文章于 2024-11-03 23:16:52 发布

SUDALYL

最新推荐文章于 2024-11-03 23:16:52 发布

阅读量108

点赞数

分类专栏：综合技术文章标签： Ajax 应用服务器 JavaScript 浏览器网络应用 ViewUI

综合技术专栏收录该内容

8 篇文章 0 订阅

订阅专栏

好久没碰AJAX了，最近感觉要用所以拿出来复习下：

AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。AJAX带来的用户体验是有目共睹的，传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然後返回一个新的网页。这个做法浪费了许多带宽，因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。而 AJAX能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

当然AJAX也有些缺点：

它可能破坏浏览器后退按钮的正常行为。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面。

一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax;

　　用JavaScript作的Ajax引擎，JavaScript的兼容性和DeBug都是让人头痛的事;

Ajax的无刷新重载，由于页面的变化没有刷新重载那么明显，所以容易给用户带来困扰――用户不太清楚现在的数据是新的还是已经更新过的；现有的解决有：在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等。

对串流媒体的支持没有FLASH、Java Applet好。

总结XMLHttpRequest的五步方法：

1.建立XMLHttpRequest对象

2.注册回调函数

3.使用open方法设置和服务器端交互的基本信息

4.设置发送的数据，开始和服务器交互

5.在回调函数中判断交互是否结束，响应是否正确，并根据需要获取服务器返回数据，更新页面内容。

=========================华丽的分割线======================================

下面我们就来做一个简单的例子吧：

检测用户名是否存在，首先我们创建一个web project:

在index.jsp中加入输入框，提交按钮，还有我们的核心，javascript代码：

<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>AJAX</title>
    <script type="text/javascript" language="javascript">
        var xmlhttp;
        function submit()
        {
            //1.创建XMLHttpRequest对象
            if(window.XMLHttpRequest){
                //IE7,FireFox等 alert("IE7");
                xmlhttp=new XMLHttpRequest();
                if(xmlhttp.overideMimeType){
                    xmlhttp.overrideMimeType("text/xml");
                }
            }else if(window.ActiveXObject){
                //IE6,IE5等 alert("IE5");
                var activexName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0",
                       "MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0",
                       "MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
                for(var i=0;i<activexName.length;i++){
                     try {
						xmlhttp=new ActiveObject(activexName[i]);
						break;
					} catch (e) {
					}
                }
            }
            
            if(xmlhttp==undefined||xmlhttp==null){
                alert("当前浏览器不支持XMLHttpRequest对象，请更换对象！");
                return;
            }
            //alert(xmlhttp);
            //2.注册回调方法，希望在服务器的数据返回给xmlhttp对象后，可以执行回调方法
           //不能写成callback()，我们只需要将方法名给他即可
            xmlhttp.onreadystatechange=callback;
            
            //获取文本框中用户的输入内容
            var userName=document.getElementById("UserName").value;
          
            //3.设置和服务器交互的对应参数，这边我们使用的是get,使用post后面会有所改动
            xmlhttp.open("GET","Ajax1?username="+userName,true);
            
            //4.设置向服务器端发送的数据，启动和服务器端的交互
            //使用GET就不需要填写了，直接写成null
            xmlhttp.send(null);
        }
        
        function callback(){
            //判断和服务器端的交互是否完成，还要判断是否正确返回数据
            if(xmlhttp.readyState==4)
            {
                //表示和服务器端的交互已经完成
                if(xmlhttp.status==200)
                {
                    //表示服务器正确返回数据
                    //纯文本数据
                    var message=xmlhttp.responseText;
                    //XML数据对应的DOM对象的接受方法
                    //使用前提是服务器需要设置content-type为text/xml
                    //var domXml=xmlhttp.responseXML;
                    
                    //向div标签中填充文本内容
                    var div=document.getElementById("message");
                    div.innerHTML=message;
                }
            }
        } 
    </script>
	
  </head>
  
  <body>
    <input type="text" id="UserName" name="username"/>
    <input type="submit" value="检验用户名" οnclick="submit()"/><br/>
    <div id="message"></div>
  </body>
</html>

而我们在服务器端，就是我们写的servlet中代码是很简单的（在web.xml中配上我们的servlet）：

public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=gb2312");
		PrintWriter out = response.getWriter();
		try {
			String name=request.getParameter("username");
			if (name==null) {
				out.println("用户名不能为空！");
			}else {
				String username=new String(name.getBytes("ISO8859-1"),"GB2312");
				if (username.equals("sudalyl")) {
					out.println("用户名【"+username+"】已经存在！");
				}else {
					out.println("用户名【"+username+"】可以注册！");
				}
		   }
		 }catch (Exception e) {
			 e.printStackTrace();
		}finally{
			out.close();
		}
		
	}

好了，一个简单的AJAX实例就搞定了。