Ajax技术介绍
(本文内容参照了Headerfist-Ajax和w3schools,所有代码均通过验证)
Ajax概要: Ajax不是个全新的技术,它是多种技术合并在一起产生的,包括XHTML,CSS,JavaScript,XmlHttpRequest,XML,JSON,DOM等 优点:(这也解释了为何我们需要Ajax技术) 传统页面被点击将与服务器通信后将刷新整个页面。用Ajax只需刷新局部,而且如果数据在本地,根本不必和服务器通信。 缺点:Ajax整合了大量技术,因此可能会有浏览器兼容性问题,如果该浏览器不支持某项技术,就可能导致运行失败,因此一定要多浏览器测试。 步骤: 用传统JavaScript方式开发个使用Ajax技术的web页面的话可细分为以下5个步骤: Step1:编写HTML和CSS来布局页面 Step2:编写一个函数初始化页面 Step3:编写一个函数创建请求对象 Step4:从服务器得到数据Step5:在页面上更新显示 现在很多库(如jQuery,Backbone)都提供了便利的ajax函数供使用,但究其本质就是将上述步骤3进行封装,以简化代码开发
Step1详解:(编写HTML和CSS来布局页面) (该步骤需要有HTML和CSS知识储备,非本文详解内容) 用HTML和CSS先编写个静态页面,页面内有个用户名控件: 我们希望在输入完用户名后,Textbox失去焦点后,就自动将用户名发送到服务器端去验证。 如果是验证结果失败(如该用户名已被注册)则Textbox右侧显示个叉图标。如果验证结果成功,Textbox右侧显示个勾图标。
Step2详解:(编写一个函数初始化页面) js文件里需要使BOM的window对象在加载页面时对页面先初始化(类似jQuery的$(document).ready(function(){...}) window.onload = initPage;<pre name="code" class="javascript"> function initPage() { document.getElementById("username").onblur = checkUsername; //用户名失去焦点时触发回调函数 } function checkUsername() { //检查用户名的回调函数暂时TBD alert("Username lose focus"); } 输入好用户名后,离开Textbox将弹出警告框 Step3详解:(编写一个函数创建请求对象) function createRequest() { try { request = new XMLHttpRequest(); } catch (tryMS) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (otherMS) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = null; } } } return request; }从函数中也可以看出,IE和其他浏览器对请求对象的实现有所不同。甚至低版本IE和IE7以上版本的请求对象的实现亦不同。因此要对IE和非IE区别实现才能全浏览器适用。 更多请参照w3schools:http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp 有了请求对象之后就可以完成步骤2里的检查用户名的回调函数了: function checkUsername() { request = createRequest(); //new一个请求对象 if (request == null) alert("Unable to create request"); else { var username = escape(document.getElementById("username").value); //获取页面上用户输入的用户名 var url= "checkName.php?username=" + username; //将用户名作为URL的一部分(因用Get而非Post方式)传给服务器端验证脚本 request.onreadystatechange = showUsernameStatus; //注册回调函数,服务器端验证完毕后会调用该函数 request.open("GET",url,true); //用Get而非Post方式发送请求给服务器,true表示异步 request.send(null); //不需要额外的参数,如用Post方式需要传递参数 } } function showUsernameStatus() { //服务器端验证完毕后调用该回调函数,暂时TBD alert("Call Web Server success"); } 服务器端新建验证用户名的PHP脚本checkName.php,如该用户名已注册可返回denied,未注册可返回okay。PHP非本文内容不详解。
Step4详解:(从服务器得到数据) 如果你顺利做到Step3,会发现用户名Textbox失去焦点后,弹了5次”Call Web Server success“警告框。因为服务器收到请求对象后会将请求对象的readyState属性从0~4依次返回,共返回5次。请求对象的各属性详解: 请求对象的各属性请参照:http://www.w3schools.com/dom/dom_http.asp (XMLHttpRequest Object Properties) readyState属性:0表示连接尚未初始化,1表示连接初始化了,2表示请求正在处理,3表示得到服务器响应,4表示服务器处理完请求。 state属性:服务器返回的一个HTTP状态码,如request.status == 200表示成功,404表示没找到 responseXML属性:服务器返回的XML格式的信息,如果返回的非XML格式的信息该值为空 statusText属性:如有问题,可从这个属性得到问题的描述 responseText属性:服务器返回的文本信息,如果返回的非文本格式信息该值为空 onreadystatechange属性:回调函数 function showUsernameStatus() { //Step3里创建的回调函数 if (request.readyState == 4 && request.status == 200) { //请求处理成功处理完毕 if (request.responseText == "okay") { //Step3里的PHP里验证成功将返回字符串okay alert("username OK"); } else { alert("username has been registed"); } } }
Step5详解:(在页面上更新显示) 将Step4里的回调函数根据业务需要补充完整: function showUsernameStatus() { if (request.readyState == 4 && request.status == 200) { if (request.responseText == "okay") { document.getElementById("username").className = "approved"; document.getElementById("register").disabled = false; } else { document.getElementById("username").className = "denied"; document.getElementById("username").focus(); document.getElementById("username").select(); document.getElementById("register").disabled = true; } } } 如果服务器端PHP返回okay,则将用户名Textbox的CSS式样更新为approved。CSS式样中会在Textbox右侧显示勾图片:
如果服务器端PHP返回denied,则将用户名Textbox的CSS式样更新为denied。CSS式样中会在Textbox右侧显示叉图片:
总结: 传统页面只能和服务器同步交互。即发出请求后,在得到服务器响应前页面将呈现“僵死”状态,用户体验很糟糕。得到服务器响应后,需要刷新全页面,速度也比较慢。 而Ajax技术使得页面能够和服务器异步交互。即发出请求后,在得到服务器响应前页面仍能被用户正常使用。得到服务器响应后,也只需要刷新局部页面即可。数据碎片化,速度快。 另外jQuery库中除了提供ajax方法外,还提供get,getJSON,getScript,post,load几个快捷方式,它们最终都将调用ajax方法。(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |