Ajax设计入门(2)

2016-02-19 14:08 8 1 收藏

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的Ajax设计入门(2),手机电脑控们准备好了吗?一起看过来吧!

【 tulaoshi.com - Web开发 】

三、概述
  
  虽然Garrent列出了7条Ajax的构成技术,但个人认为,所谓的Ajax其核心只有JavaScript、XMLHTTPRequest和DOM,如果所用数据格式为XML的话,还可以再加上XML这一项(Ajax从服务器端返回的数据可以是XML格式,也可以是文本等其他格式)。
  
  在旧的交互方式中,由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。
  
  而使用Ajax后用户从感觉上几乎所有的操作都会很快响应没有页面重载(白屏)的等待。
  
  1、XMLHTTPRequest
  
  Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。这样就可以向再发桌面应用程序只同服务器进行数据层面的交换,而不用每次都刷新界面也不用每次将数据处理的工作提交给服务器来做,这样即减轻了服务器的负担又加快了响应速度、缩短了用户等候时间。
  
  最早应用XMLHTTP的是微软,IE(IE5以上)通过允许开发人员在Web页面内部使用XMLHTTPActiveX组件扩展自身的功能,开发人员可以不用从当前的Web页面导航而直接传输数据到服务器上或者从服务器取数据。这个功能是很重要的,因为它帮助减少了无状态连接的痛苦,它还可以排除下载冗余HTML的需要,从而提高进程的速度。Mozilla(Mozilla1.0以上及NetScape7以上)做出的回应是创建它自己的继承XML代理类:XMLHttpRequest类。Konqueror(和Safariv1.2,同样也是基于KHTML的浏览器)也支持XMLHttpRequest对象,而Opera也将在其v7.6x+以后的版本中支持XMLHttpRequest对象。对于大多数情况,XMLHttpRequest对象和XMLHTTP组件很相似,方法和属性也类似,只是有一小部分属性不支持。
  
  XMLHttpRequest的应用:
  
  ·XMLHttpRequest对象在JS中的应用
  
  varxmlhttp=newXMLHttpRequest();
  
  ·微软的XMLHTTP组件在JS中的应用
  
  varxmlhttp=newActiveXObject(Microsoft.XMLHTTP);
  
  varxmlhttp=newActiveXObject(Msxml2.XMLHTTP);
  
  XMLHttpRequest对象方法
  
  /**
  
  *Cross-browserXMLHttpRequestinstantiation.
  
  */
  
  if(typeofXMLHttpRequest==’undefined’){
  
  XMLHttpRequest=function(){
  
  varmsxmls=[’MSXML3’,’MSXML2’,’Microsoft’]
  
  for(vari=0;imsxmls.length;i++){
  
  try{
  
  returnnewActiveXObject(msxmls[i]+’.XMLHTTP’)
  
  }catch(e){}
  
  }
  
  thrownewError("NoXMLcomponentinstalled!")
  
  }
  
  }
  
  functioncreateXMLHttpRequest(){
  
  try{
  
  //Attempttocreateit"theMozillaway"
  
  if(window.XMLHttpRequest){
  
  returnnewXMLHttpRequest();
  
  }
  
  //Guessnot-nowtheIEway
  
  if(window.ActiveXObject){
  
  returnnewActiveXObject(getXMLPrefix()+".XmlHttp");
  
  }
  
  }
  
  catch(ex){}
  
  returnfalse;
  
  };
  
  XMLHttpRequest对象方法
  
  方法描述
  
  abort()停止当前请求
  
  getAllResponseHeaders()作为字符串返问完整的headers
  
  getResponseHeader("headerLabel")作为字符串返问单个的header标签
  
  open("method","URL"[,asyncFlag[,"userName"[,"password"]]])设置未决的请求的目标URL,方法,和其他参数
  
  send(content)发送请求
  
  setRequestHeader("label","value")设置header并和请求一起发送
  
  XMLHttpRequest对象属性
  
  属性描述
  
  onreadystatechange状态改变的事件触发器
  
  readyState对象状态(integer):
  
  0=未初始化
  
  1=读取中
  
  2=已读取
  
  3=交互中
  
  4=完成
  
  responseText服务器进程返回数据的文本版本
  
  responseXML服务器进程返回数据的兼容DOM的XML文档对象
  
  status服务器返回的状态码,如:404="文件末找到"、200="成功"
  
  statusText服务器返回的状态文本信息
  

来源:http://www.tulaoshi.com/n/20160219/1606261.html

延伸阅读
标签: Web开发
AjaxTags项目是在现有的Struts HTML标记库的基础上,添加对AJAX支持。 AjaxTags改写了Struts标签类org.apache.struts.taglib.html.FormTag和org.apache.struts.taglib.html.BaseHandlerTag,并使用Struts的plugin技术,使得Struts提供了对AJAX的支持。 以下是JSP中简单的示例: <html:form action="example1" ajaxRef="example1"> Firs...
标签: Web开发
静态页面 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head title无标题页/title script type="text/javascript" src="jquery/jquery.js" //这里不可以用script type="" src="" / /script sc...
标签: Web开发
1.创建 XMLHttpRequest 对象 现在的浏览器有很多种,创建 XMLHttpRequest 的方法也不相同,所以为了兼容各种浏览器,在创建 XMLHttpRequest 时也应该考虑到各种浏览器的情况。目前主流的浏览器在Windows下有IE、Firefox及Opera,所以我们写的代码要尽量兼容这几个浏览器。在参考了一些资料后,我用下面的方法来创建 XMLHttpRequest 对象: CO...
标签: Web开发
jQuery为AJAX提供了非常丰富的支持,参见 Ajax 其中最基本当属$ajax(),通过不同的参数,这个方法可以录活支持各种AJAX应用场景。如: $.ajax({ url: "test.html", cache: false, success: function(html){ $("#results").append(html); } }); 完整参数列表参见: options 当然,常用的应该是这些: load()--直接将AJAX请...
标签: Web开发
      Ajax 简介 Ajax 全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 主要包含了以下几种技术: Ajax (Asynchronous JavaScript + XML)的定义 基于web标准(standards-based presentation)XHTML+CSS的表示; 使用 DOM(Document Object Model...

经验教程

878

收藏

18
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部