ajax的核心技术解析

z_xiaofei168

浏览: 198029 次
性别:
来自: 北京

最近访客更多访客>>

qijiacj

lzylin

zjy_369

xctjtcc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ajax

Ajax 应用服务器浏览器 JavaScript JSP

ajax的核心技术解析
      读音：e:j^ks 。AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。Ajax：一种不用刷新整个页便可与服务器通讯的办法

Ajax的技术的产生
     Ajax被认为是(Asynchronous JavaScript and XML的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.“Ajax”这个名字是在2005年2月，Adaptive Path的Jesse James Garrett在他的文章Ajax:A New Approach to Web Application中创造。而 Ajax 这项技术，是 Google 在Google Labs发布Google Maps和Google Suggest后真正为人所认识。

同步交互和异步交互
举个例子：普通B/S模式(同步)       AJAX技术(异步)
    同步：提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事
    异步: 请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕
    同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
    异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式

    易懂的理解:
    异步传输: 你传输吧，我去做我的事了，传输完了告诉我一声
    同步传输: 你现在传输，我要亲眼看你传输完成，才去做别的事

不用刷新整个页面便可与服务器通讯的办法：
1、Flash
2、Java applet
3、框架：如果使用一组框架构造了一个网页，可以只更新其中一个框架，而不必惊动整个页面
隐藏的iframe
4、XMLHttpRequest：该对象是对 JavaScript 的一个扩展，可使网页与服务器进行通信。是创建 Ajax 应用的最佳选择。实际上通常把 Ajax 当成 XMLHttpRequest 对象的代名词

Ajax的工作原理

Ajax的核心是JavaScript对象XmlHttpRequest。
1、该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
2、AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。
3、用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。
4、AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。
5、使用AJAX，可以为JSP、开发人员、终端用户带来可见的便捷

Ajax工具包

Ajax并不是一项新技术，它实际上是几种技术，每种技术各尽其职，以一种全新的方式聚合在一起
服务器端语言：服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。
1、XML (eXtensible Markup Language，可扩展标记语言) 是一种描述数据的格式。Aajx 程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML 是其中的一种选择
2、XHTML（eXtended Hypertext Markup Language,使用扩展超媒体标记语言）和 CSS（Cascading Style Sheet,级联样式单）标准化呈现；
3、DOM（Document Object Model,文档对象模型）实现动态显示和交互；
4、使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取
5、使用JavaScript绑定和处理所有数据

AJAX的缺陷

AJAX不是完美的技术。也存在缺陷：
1    AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。
2   AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。
3    对流媒体的支持没有FLASH、Java Applet好。
4    一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax。

说了这么多，下面我们就做一个ajax的案例：

第一个案例是ajax的get方法：

getAjax.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>My JSP 'getAjax.jsp' starting page</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

	</head>

	<body>
		
		<input type="button" value="AjaxGet请求" onclick="getAjax()"/>
		<div id="content"></div>

	</body>
</html>
<script>
function $(id) {
	return document.getElementById(id);
}
//getAjax请求
//创建XMLHttpRequest对象
function getXhr() {
	var xhr;
	try {
		//IE浏览器
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	} catch (err) {
		try {
			//firefox opera 等其他浏览器
			xhr = new XMLHttpRequest();
		} catch (er) {
			alert("您的浏览器不支持ajax技术的操作,请您升级.....");
		}

	}

	return xhr;
}

function getAjax(){
     
     //获取xhr对象
     var xhr = getXhr();
     //规定请求类型
  
     /*
     open(method,url,async)
         method:get ,post /get与post的区别总结出来
                /get 地址栏中显示? & 2k
                /post:url
        url:相对路径 也可以使绝对路径
      
        async:true异步 false 同步
     */
     
        xhr.open("get","main.jsp?username=123",true);
        
        //get请求 就不必要设置 xhr.setRequestHeader(header,value)
        
        //发送请求,如果是get请求send(参数)参数：必须是null或者xhr.send();
        //备注：如果xhr.send(参数);参数不为空情况下,会自动转换成post请求方式
        //您可以通过request.getMethod();方法获取请求的方式
        xhr.send();
        /*当发送请求时:readyState对象状态会自动改变并且有服务器端发送给客户端
        * readyState的每次改变都会自动处理onreadystatechanage事件
       
          readystate的值：
           0：未处理
           1：读取中
           2：已读取
           3：交互中
           4：完成
         值的每一次改变都会处理：onreadystatechanage事件 事件可以采用以下两种方式处理
             1、xhr.onreadystatechange=function(){}
             2、xhr.onreadystatechange= 函数的名字;
        */
        xhr.onreadystatechange = function (){
        
          //判读是否处理完毕
          if(xhr.readyState==4){
               //判读服务器是否处理成功！
              if(xhr.status==200){
                  $("content").innerHTML = xhr.responseText;
              }
          
          }
            
        
        } 
        
}

</script>

main.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
   out.println("<font color='red'>服务器处理完毕</font>");
  
   //获取请求的方法 
    String method =  request.getMethod();
   out.println("<br/>您是通过<font color='red'>"+method+"</font>方法向服务器发送请求的！");
   //获取传递的参数
   out.println(request.getParameter("username"));
%>

第二个案例是ajax的post方法：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>My JSP 'getAjax.jsp' starting page</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

	</head>

	<body>
		<form action="" enctype="application/x-www-form-urlencoded"></form>
		<input type="button" value="AjaxPost请求" onclick="postAjax()"/>
		<div id="content"></div>

	</body>
</html>
<script>
function $(id) {
	return document.getElementById(id);
}
//getAjax请求
//创建XMLHttpRequest对象
function getXhr() {
	var xhr;
	try {
		//IE浏览器
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	} catch (err) {
		try {
			//firefox opera 等其他浏览器
			xhr = new XMLHttpRequest();
		} catch (er) {
			alert("您的浏览器不支持ajax技术的操作,请您升级.....");
		}

	}

	return xhr;
}

function postAjax(){
     
     //获取xhr对象
     var xhr = getXhr();
     //规定请求类型
  
     /*
     open(method,url,async)
         method:get ,post /get与post的区别总结出来
                /get 地址栏中显示? & 2k
                /post:url
        url:相对路径 也可以使绝对路径
      
        async:true异步 false 同步
     */
     
        xhr.open("post","main.jsp",true);
        
        //post请求在传递值的情况下必须设置 xhr.setRequestHeader(header,value)
        
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
        //发送请求,如果是post请求send(参数)参数：参数可以是null或者xhr.send()|send(带有参数的)
        xhr.send("username=345&pass=123");
        /*当发送请求时:readyState对象状态会自动改变并且有服务器端发送给客户端
        * readyState的每次改变都会自动处理onreadystatechanage事件
       
          readystate的值：
           0：未处理
           1：读取中
           2：已读取
           3：交互中
           4：完成
         值的每一次改变都会处理：onreadystatechanage事件 事件可以采用以下两种方式处理
             1、xhr.onreadystatechange=function(){}
             2、xhr.onreadystatechange= 函数的名字;
        */
        xhr.onreadystatechange = function (){
        
          //判读是否处理完毕
          if(xhr.readyState==4){
               //判读服务器是否处理成功！
              if(xhr.status==200){
                  //$("content").innerHTML = xhr.responseText;
                  alert(xhr.responseText);
              }
          
          }
            
        
        } 
        
}

  

</script>

4
顶

5
踩

分享到：

Spring2.5-----分散配置 | oracle之游标(九)

2011-04-18 08:51
浏览 1576
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论