一、Ajax简介
Ajax应用 1、在钻石某一面拖动鼠标会带来动态效果 2、把鼠标放在影片的图片上就会出现一个气泡,提供这个影片的更多细节。页面不会刷新。客户也不必点击影片,看完信息再回到影片列表。 3、当用户输入邮政编码时,可以验证它是否正确,然后自动能够用相应的城市名和州名填充到表单中的其他部分 4、当用户选择美国时,可以引入美国各个州的一个下拉列表。
原来把Ajax认为是Asynchronous JavaScript+XML的缩写,但如今,这个词的覆盖面有所扩展,把允许浏览器与服务器通信而无需刷新当前页面的技术都涵盖在内
较旧技术优点 更新下拉列表信息:一个简单的请求,就能得到更新下拉列表所需的部分信息。 验证:使用XHR,可以对服务器做一个调用,触发一组验证规则,这些规则可能比你用JavaScript编写的任何规则都更丰富、更复杂。
作为Ajax的核心,XHR对象设计为允许从服务器异步获取任意的数据。
因为是部分刷新,用户有时可能不会注意到与以前有什么变化,为了这个问题引出了黄褪技术(Yellow Fade Technique,YFT),取页面中有变化的部分,并置为黄色。过段时间再让黄色逐渐褪色,直到恢复为原来的背景色。也可以选择其他颜色,只要能把用户注意力吸引至有变化的部分。
Ajax的缺点 1、通过XHR做出请求不会修改浏览器的历史栈。 2、Ajax不会修改地址栏中显示的链接。这表明你不能轻松地为一个页面建立书签,或者向朋友发送一个链接。 3、异步完成操作,会与用户习惯的请求/相应模式相悖。我们修改了页面地一部分,如果用户没想到这一点,他们可能会被搞糊涂。
Ajax相关技术 HTML、DOM、CSS、JavaScript、XML
测试驱动:JsUnit、Selenium
适合采用Ajax实现的功能: 验证、表单填写、DOM“拖”技术建动态网站,如google个性化主页。
设计考虑 要尽量减少客户和服务器之间的通信量。如果应用得当,Ajax会使你的应用响应更快。
安全问题 从浏览器查看源代码,任何人都能知道你使怎么创建小部件的。 建立XHR对象时必须包含统一资源定位符,可能会有恶意用户修改你的网站,运行他们自己的代码。 谨慎地使用Ajax可以降低这种风险。
小结 胖客户应用地开发人员饱受部署之苦,因为要把应用部署到数以千计地用户机器上。Ajax可以利用Web减轻他们的负担。
二、使用XMLHttpRequest对象
1、创建XMLHttpRequest对象
在使用XMLHttpRequest对象发送请求和处理响应之前,必须先用JavaScritp创建一个XMLHttpRequest对象。
Internet Explorer把XMLHttpRequest实现为一个ActiveX对象 其他浏览器把它实现为一个本地JavaScript对象。
通过检验是否对ActiveX对象支持来区分浏览器类型,从而确定创建XMLHttpRequest对象的实例。
var xmlHttp; //创建全局变量保存XHR对象的引用 function createXMLHttpRequest(){ if(window.ActiveXObject){ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest){ xmlHttp=new XMLHttpRequest(); } }
2、XMLHttpRequest对象的一些方法
abort() 停止当前请求 string getAllResponseHeaders() 返回一个串,其中包含Http请求的所有响应首部,首部包括Content-Length、Data、和 URL string getResponseHeader("header") 参数string header表示你希望得到的指定首部值并把这个值作为串返回。 open("method","url") 建立对服务器的调用。method参数可以时GET、POST或PUT。url参数可以是相对的URL或绝对 URL。这个方法还包括3个可选参数 send(content) 向服务器发送请求 setRequestHeader("header","value") 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()
3、XMLHttpRequest对象的一些属性
onreadystatechange 每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScritp函数 readyState 请求的状态。0=未初始化,1=正在加载,2=已加载,3=交互中,4=完成 responseText 服务器的响应,表示为一个串 responseXML 服务器的响应,表示为XML。这个对象可以解析为一个DOM对象 status 服务器的HTTP状态码,200—ok,404—Not Found等 statusText HTTP状态码的相应文本,OK或Not Found等
XMLHttpRequest对象的onreadystatechange属性存储了回调函数的指针。 当XMLHttpRequest对象的内部状态发生变化时,就会调用这个回调函数。
实例1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> <html xmlns="http://www.w3.org/1999/xhtml "> <head> <title>Simple XMLHttpRequest</title> <script type="text/javascript"> var xmlHttp;
function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function startRequest() { createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", "simpleResponse.xml", true); xmlHttp.send(null); } function handleStateChange() { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { alert("The server replied with: " + xmlHttp.responseText); } } } </script> </head>
<body> <form action="#"> <input type="button" value="Start Basic Asynchronous Request" οnclick="startRequest():"/> </form> </body> </html>
实例2
<%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title> <script language="javascript"> var http_request = false; function send_request(url) {//初始化、指定处理函数、发送请求的函数 http_request = false; //开始初始化XMLHttpRequest对象 if(window.XMLHttpRequest) { //Mozilla 浏览器 http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) {//设置MiME类别 http_request.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { // IE浏览器 try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!http_request) { // 异常,创建对象实例失败 window.alert("不能创建XMLHttpRequest对象实例."); return false; } http_request.onreadystatechange = processRequest; // 确定发送请求的方式和URL以及是否同步执行下段代码 http_request.open("GET", url, true); http_request.send(null); } // 处理返回信息的函数 function processRequest() { if (http_request.readyState == 4) { // 判断对象状态 if (http_request.status == 200) { // 信息已经成功返回,开始处理信息 alert(http_request.responseText); } else { //页面不正常 alert("您所请求的页面有异常。"); } } } function userCheck() { var f = document.form1; var username = f.username.value; if(username=="") { window.alert("用户名不能为空。"); f.username.focus(); return false; } else { send_request('sample1_2.jsp?username='+username); } } </script> <link href="css/style.css" rel="stylesheet" type="text/css"> </head>
<body> <form name="form1" action="" method="post"> 用户名:<input type="text" name="username" value=""> <input type="button" name="check" value="唯一性检查" onClick="userCheck()"> <input type="submit" name="submit" value="提交"> </form> <!--span style="cursor: pointer; text-decoration: underline" οnclick="send_request('2.jsp?username=educhina')">Send a request</span--> </body> </html>