必威的官网网络

当前位置:必威的官网-必威体育 > 必威的官网网络 > 使用 XML 和 XSLT 进行数据交换及相关操作

使用 XML 和 XSLT 进行数据交换及相关操作

来源:http://www.jlqfjt.com 作者:必威的官网-必威体育 时间:2019-07-06 06:05

前不久去面试,面试官问ajax原理,偶只精通大概的野趣,并不能够搞清楚ajax的办事原理,所以及早补充一下学问。
AJAX全名字为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创制交互式网页应用的网页开辟能力。 

要害满含了以下几种本领

Ajax(Asynchronous JavaScript XML)的定义 

基于web标准(standards-based presentation)XHTML CSS的表示; 

应用 DOM(Document Object Model)举行动态展现及互相; 

动用 XML 和 XSLT 举办数据调换及连锁操作; 

利用 XMLHttpRequest 进行异步数据查询、检索; 
选取 JavaScript 将享有的事物绑定在联合。葡萄牙语参见Ajax的倡导者Jesse JamesGarrett的初稿。

恍如于DHTML或LAMP,AJAX不是指一种单一的本领,而是有机地选择了一层层有关的才能。事实上,一些基于AJAX的“派生/合成”式(derivative/composite)的本领正在出现,如“AFLAX”。 

AJAX的选取使用帮忙上述技艺的web浏览器作为运维平台。那个浏览器近些日子席卷:Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。不过Opera不帮衬XSL格式对象,也不帮衬XSLT。

与理念的web应用比较

古板的web应用允许用户填写表单(form),当提交表单时就向web服务器发送三个央求。服务器收到并管理传来的表单,然後重返三个新的网页。这几个做法浪费了无数带宽,因为在前後三个页面中的大多数HTML代码往往是一律的。由于每一次应用的竞相都须要向服务器发送央求,应用的响应时间就依靠于服务器的响应时间。这导致了用户分界面包车型客车响应比本地利用慢得多。 

与此不相同,AJAX应用能够仅向服务器发送并收复必需的数额,它利用SOAP或其余一些基于XML的web service接口,并在客户端选择JavaScript管理来自服务器的响应。因为在服务器和浏览器之间沟通的数据大量滑坡,结果大家就会见到响应更加快的施用。同不日常候广大的管理工科作得以在发出央浼的客户端机器上变成,所以Web服务器的拍卖时间也减小了。

Ajax应用程序的优势在于:

  1. 经过异步格局,进步了用户体验

2. 优化了浏览器和服务器之间的传输,裁减不须求的数量往返,减弱了带宽占用

3. Ajax引擎在客户端运转,承担了一片段当然由服务器担负的办事,进而减弱了大用户量下的服务器负荷。

Ajax的专门的学问规律

Ajax的中坚是JavaScript对象XmlHttpRequest。该目的在Internet Explorer 5中第一遍引入,它是一种帮助异步央求的技巧。简单来讲,XmlHttpRequest令你能够应用JavaScript向服务器提议呼吁并处理响应,而不 阻塞用户。

在创制Web站点时,在客户端奉行显示器更新为用户提供了极大的灵活性。上面是应用Ajax能够实现的成效:

动态更新购物车的货品总量,无需用户单击Update并等待服务注重新发送全数页面。

升迁站点的品质,那是经过减弱从服务器下载的数据量而达成的。譬如,在某购物车页面,当更新篮子中的一项物品的数码时,会另行载入整个页面,那必须下载整 个页面包车型客车多少。假使应用Ajax总计新的总的数量,服务器只会回去新的总数值,因而所需的带宽仅为原来的百分之一。 化解了历次用户输入时的页面刷新。举例,在Ajax中,如果用户在分页列表上单击Next,则服务器数据只刷新列表并不是一切页面。 
间接编辑表格数据,并非讲求用户导航到新的页面来编排数据。对于Ajax,当用户单击Edit时,能够将静态表格刷新为剧情可编写制定的报表。用户单击Done之后,就能够爆发四个Ajax央浼来更新服务器,并刷新表格,使其涵盖静态、只读的数量。

全套都有望!但愿它能够激发您起初支付本人的依附Ajax的站点。不过,在起来以前,让大家介绍一个存世的Web站点,它服从守旧的提交/等待/重新展现的轨范,大家还将斟酌Ajax怎样进级用户体验。

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)可能不能够管理须要。 

其次个参数是呼吁页面包车型客车USportageL。

其多个参数设置央求是或不是为异步情势。若是是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函数截取一有的字符串突显): 

<input type=text id="163id">
<span id="message"></span>

那样,三个基于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的客户端基础运用,选拔的是腾讯网和金山现存的服务器端程序,当然为了支付适合自个儿页面包车型大巴程序,还亟需对友好编辑服务器端程序,那设计到程序语言及数据库的操作,对于有早晚程序基础的读者必定不是很难的事务。

原来的书文地址:

分类: Web技术

版权申明:本文为博主原创小说,未经博主允许不得转发。


本文由必威的官网-必威体育发布于必威的官网网络,转载请注明出处:使用 XML 和 XSLT 进行数据交换及相关操作

关键词: 必威体育娱乐

上一篇:TWIG 分页宏(基于 bootstrap)

下一篇:没有了