今年互联网上比较火热的话题当然是关于WEB2.0的应用,其中AJAX又是WEB2.0的核心之一。AJAX是Asynchronous JavaScript and XML 的缩写。它并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用,它包括:使用XHTML和CSS标准化呈现;使用DOM实现动态显示和交互;使用XML和XSLT进行数据交换与处理;使用XMLHttpRequest进行异步数据读取;最后用JavaScript绑定和处理所有数据。

  Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。

  我们以两个验证通行证帐号是否存在的例子来讲述AJAX在实际中的应用:

  (1)用文本字符串的方式返回服务器的响应来验证网易通行证帐号是否存在;

  (2)以XMLDocument对象方式返回响应来验证金山通行证帐号是否存在;

  首先,我们需要用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求, XMLHttpRequest 类首先由Internet Explorer以ActiveX对象引入,被称为XMLHTTP。 后来Mozilla﹑Netscape﹑Safari 和其他浏览器也提供了XMLHttpRequest类,不过它们创建XMLHttpRequest类的方法不同。

  对于Internet Explorer浏览器,创建XMLHttpRequest 方法如下:

xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");

  由于在不同Internet Explorer浏览器中XMLHTTP版本可能不一致,为了更好的兼容不同版本的Internet Explorer浏览器,因此我们需要根据不同版本的Internet Explorer浏览器来创建XMLHttpRequest类,上面代码就是根据不同的Internet Explorer浏览器创建XMLHttpRequest类的方法。

  对于Mozilla﹑Netscape﹑Safari等浏览器,创建XMLHttpRequest 方法如下:

xmlhttp_request = new XMLHttpRequest();

  如果服务器的响应没有XML mime-type header,某些Mozilla浏览器可能无法正常工作。 为了解决这个问题,如果服务器响应的header不是text/xml,可以调用其它方法修改该header。

xmlhttp_request = new XMLHttpRequest();
xmlhttp_request.overrideMimeType('text/xml');

  在实际应用中,为了兼容多种不同版本的浏览器,一般将创建XMLHttpRequest类的方法写成如下形式:

try{
 if( window.ActiveXObject ){
  for( var i = 5; i; i-- ){
   try{
    if( i == 2 ){
     xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );
    }else{
     xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
    }
   xmlhttp_request.setRequestHeader("Content-Type","text/xml");
   xmlhttp_request.setRequestHeader("Content-Type","gb2312");
   break;
  }
  catch(e){
   xmlhttp_request = false;
  }
 }
}else if( window.XMLHttpRequest ){
 xmlhttp_request = new XMLHttpRequest();
 if (xmlhttp_request.overrideMimeType) {
  xmlhttp_request.overrideMimeType('text/xml');
 }
}
}catch(e){ xmlhttp_request = false; }

  在定义了如何处理响应后,就要发送请求了。可以调用HTTP请求类的open()和send()方法,如下所示:

xmlhttp_request.open('GET', URL, true); xmlhttp_request.send(null);

  open()的第一个参数是HTTP请求方式—GET,POST或任何服务器所支持的您想调用的方式。 按照HTTP规范,该参数要大写;否则,某些浏览器(如Firefox)可能无法处理请求。

第二个参数是请求页面的URL。

  第三个参数设置请求是否为异步模式。如果是TRUE,JavaScript函数将继续执行,而不等待服务器响应。这就是"AJAX"中的"A"。

  用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求后,接下来要决定当收到服务器的响应后,需要做什么。这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名,如下所示:xmlhttp_request.onreadystatechange =FunctionName;

  FunctionName是用JavaScript创建的函数名,注意不要写成FunctionName(),当然我们也可以直接将JavaScript代码创建在onreadystatechange之后,例如:

xmlhttp_request.onreadystatechange = function(){
 // JavaScript代码段
};

  在这个函数中。首先要检查请求的状态。只有当一个完整的服务器响应已经收到了,函数才可以处理该响应。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。

  readyState的取值如下:

  0 (未初始化)

  1 (正在装载)

  2 (装载完毕)

  3 (交互中)

  4 (完成)

  所以只有当readyState=4时,一个完整的服务器响应已经收到了,函数才可以处理该响应。具体代码如下:

if (http_request.readyState == 4) {
 // 收到完整的服务器响应
} else {
 // 没有收到完整的服务器响应
}

  当readyState=4时,一个完整的服务器响应已经收到了,接着,函数会检查HTTP服务器响应的状态值。完整的状态取值可参见W3C文档。当HTTP服务器响应的值为200时,表示状态正常。

  在检查完请求的状态值和响应的HTTP状态值后,就可以处理从服务器得到的数据了。有两种方式可以得到这些数据:(1) 以文本字符串的方式返回服务器的响应

  (2) 以XMLDocument对象方式返回响应

  实例一: 用文本字符串的方式返回服务器的响应来验证网易通行证帐号是否存在

  首先,我们登陆网易通行证注册页面,可以看到检测用户名是否存在是将用户名提交给checkssn.jsp页面进行判断,格式为:

  reg.163.com/register/checkssn.jsp?username=用户名 根据上面讲到的方法,我们可以利用AJAX技术对网易通行证用户名进行检测:

  第一步:新建一个基于Xhtml标准的网页,在区域插入Javascript函数如下:

function getXMLRequester( )
{
 var xmlhttp_request = false;
 try{
  if( window.ActiveXObject )
  {
   for( var i = 5; i; i-- ){
    try{
     if( i == 2 )
     {
      xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );
     }
     else
     {
      xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
      xmlhttp_request.setRequestHeader("Content-Type","text/xml"); xmlhttp_request.setRequestHeader("Content-Type","gb2312"); }
    break;}
    catch(e){ xmlhttp_request = false;
    }
   }
  }
  else if( window.XMLHttpRequest )
  {
   xmlhttp_request = new XMLHttpRequest();
   if (xmlhttp_request.overrideMimeType)
   {
    xmlhttp_request.overrideMimeType('text/xml');
   }
  }
 }
 catch(e){ xmlhttp_request = false; }
 return xmlhttp_request ;
}

function IDRequest(n)
{
 //定义收到服务器的响应后需要执行的JavaScript函数 url=n+document.getElementById('163id').value;
 //定义网址参数 xmlhttp_request=getXMLRequester();
 //调用创建XMLHttpRequest的函数 xmlhttp_request.onreadystatechange = doContents;
 //调用doContents函数 xmlhttp_request.open('GET', url, true); xmlhttp_request.send(null); } function doContents()
 
 {
  if (xmlhttp_request.readyState == 4)
  {
   // 收到完整的服务器响应
   if (xmlhttp_request.status == 200) {
    //HTTP服务器响应的值OK
    document.getElementById('message').innerHTML = xmlhttp_request.responseText;
    //将服务器返回的字符串写到页面中ID为message的区域 }
   else {
    alert(http_request.status);
   }
  }
 }

  在区域建立一个文本框,id为163id

  再建一个id为messsge的空白区域用来显示返回字符串(也可以通过Javascript函数截取一部分字符串显示):

  这样,一个基于AJAX技术的用户名检测页面就做好了,不过这个页面将返回服务器响应生成页面的所有字符串,当然还可以对返回的字符串进行一些操作,便于应用到不同的需要当中。

  实例二: 以XMLDocument对象方式返回响应来验证金山通行证帐号是否存在

  在上面的例子中,当服务器对HTTP请求的响应被收到后,我们会调用请求对象的reponseText属性。该属性包含了服务器返回响应文件的内容。现在我们以XMLDocument对象方式返回响应,此时将不再需要reponseText属性而使用responseXML属性。

  首先登陆金山通行证注册页面,我们发现金山通行证用户名的检测方式为: pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=用户名,并且返回XML数据:

isExistedUid -2

  当result值为-1时表示此用户名已被注册,当result值为-2时表示此用户名尚未注册,因此通过对result值的判断可以知道用户名是否被注册。

  对上例代码进行修改:

  首先找到

document.getElementById('message').innerHTML = xmlhttp_request.responseText;

  改为:

var response = xmlhttp_request.responseXML.documentElement;
var result = response.getElementsByTagName('result')[0].firstChild.data;//返回result节点数据
if(result ==-2){
 document.getElementById('message').innerHTML = "用户名"+document.getElementById('163id').value+"尚未注册";}
else if(result ==-1){
 document.getElementById('message').innerHTML = "对不起,用户名"+document.getElementById('163id').value+"已经注册";}

  通过以上两个实例说明了AJAX的客户端基础应用,采用的是网易和金山现成的服务器端程序,当然为了开发合适自己页面的程序,还需要对自己编写服务器端程序,这设计到程序语言及数据库的操作,对于有一定程序基础的读者一定不是很难的事情。

转载于:https://www.cnblogs.com/lxinxuan/archive/2006/09/19/508390.html

Web 2.0中AJAX技术应用详解[转]相关推荐

  1. Ajax技术WEB开发__WEB2.0中AJAX应用的详解

    ====================================================== 注:本文源代码点此下载 ================================= ...

  2. WEB 2.0中AJAX应用的详细探讨

    最近互联网上比较火热的话题当然是关于WEB2.0的应用,其中AJAX又是WEB2.0的核心之一.AJAX是Asynchronous JavaScript and XML 的缩写.它并不是一门新的语言或 ...

  3. ajax技术基础详解

    一.概述 1.什么是ajax 可以与服务器进行[异步]交互的技术,浏览器无需刷新 2.什么时候出现ajax? -- XMLHttp 微软 1999年微软公司发布IE5版本,内嵌了ajax技术 什么时候 ...

  4. php中会话技术,PHP中会话技术Cooki详解

    在PHP中,所有数据(变量.常量.全局变量)的最大生命周期是一个脚本周期(即:浏览器 向服务器发送一个请求--->服务器响应请求并将该请求交由PHP处理---->PHP处理后返回给服务器- ...

  5. JQuery中$.ajax()方法参数详解(转)

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...

  6. Web端即时通讯技术原理详解

    Web端即时通讯技术原理详解 前言 在web端的IM即时通讯应用,由于浏览器的兼容性以及其固有的"客户端请求服务器处理并响应"的C/S通信模型,造成了要在浏览器中实现一个兼容性较好 ...

  7. Web 3.0 中常见的网络钓鱼攻击

    Web 3.0 中常见的网络钓鱼攻击 简要介绍 Web 3的网络钓鱼日益增多,一些主要的网络钓鱼技术包括: 使用不安全的Discord机器人在一些官方的Discord服务器上发布钓鱼链接: 直接发送钓 ...

  8. java 控制jsp_JSP学习之Java Web中的安全控制实例详解

    普通用户界面 修改登录的Servlet,修改后的代码如下: LoginProcess.java代码: package servlet; import javabean.User; import jav ...

  9. java n%9==0_用C++实现求N!中末尾0的个数的方法详解

    题目描述: 输入一个正整数n,求n!(即阶乘)末尾有多少个0? 比如: n = 10; n! = 3628800,所以答案为2 输入描述: 输入为1行,n(1≤n≤1000) 输出描述: 输出一个整数 ...

最新文章

  1. android保持服务不休眠(持续运行)以及唤醒屏幕的方法
  2. 树,二叉树,森林各种遍历总结:
  3. VTK修炼之道40:频域处理_快速傅里叶变换及其反变换1
  4. Java Web开发Tomcat中三种部署项目的方法
  5. JAVA 串口编程(二)
  6. jstorm 读取mysql_zookeeper,kafka,jstorm,memcached,mysql流式数据处理平台部署
  7. 代码的世界中,一个逻辑套着另外一个逻辑,如何让每一种逻辑在代码中都有迹可循?...
  8. 电路常识性概念(6)-VCC、VDD和VSS三种标号的区别
  9. Android 代码实现查看SQLite数据库中的表
  10. python 闭包中引用的变量值变更问题
  11. 浅谈软件测试人员不要这样写测试用例(给测试新手和老鸟的提示)
  12. iOS AFNetWorking源码详解(一)
  13. 用Not Exists 代替Not In
  14. iTunes只能装C盘吗_就这一篇:教你真正有效地解决爆满的C盘!
  15. 好记性不如烂笔头。 站在岸上学不会游泳。
  16. 持续学习:(Elastic Weight Consolidation, EWC)Overcoming Catastrophic Forgetting in Neural Network
  17. java后端开发工程师笔试_后端开发工程师面试参考
  18. idea Failed to clean project Failed to delete target
  19. 奇安信行业安全研究中心
  20. 嵌入式软件学习问题汇总(一)什么是嵌入式?

热门文章

  1. hn版是什么版本的教材_初中教材都有什么版本?
  2. Modelsim保存与打开仿真波形的方式
  3. 【FFmpeg】aac 编码的cbr和vbr 测试
  4. 凸轮结构c语言编程,凸轮设计_c语言编程
  5. ios 内购正式环境_iOS内购-部分玩家无法恢复购买
  6. Huffman树压缩程序(c实现)
  7. 一款不错的PHP在线文件管理系统,PHP WEBFTP
  8. 重新认识 Kubernetes 的核心组件
  9. 用友T6软件设置打印模板后预览没有变化-用友T6
  10. pandas操作两列日期类型数据相减并要求结果为整数类型