iShopping网上商城v技术交流AJAX.ppt

—高级软件人才实作培训专家! —高级软件人才实作培训专家! AJAX技术介绍 议程 AJAX基本介绍 AJAX实战 XMLHttpRequest对象介绍 AJAX工作原理  AJAX介绍  AJAX（Asynchronous JavaScript and XML）它是一种由多种技术组合的技术。 组合的技术包换HTML / XHTML ,CSS, JavaScript / DOM 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更 新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。  AJAX介绍  XHTML，CSS用于呈现 DOM实现动态显示和交互 XML和XSTL进行数据交换与处理 XMLHttpRequest对象用于进行异步数据读取 Javascript绑定和处理所有数据  AJAX工作原理  AJAX工作原理  AJAX工作原理 * 用 户 界 面 A J A X 引 擎 W E B 服 务 器 后 台 业 务 系 统 JavaScrip调用 HTML+CSS Http请求 XML,JSON数据 Web浏览器 后台服务器  Ajax采用异步方式与后台交互  ajax应用场景  * 采用AJAX技术提升用户体验  XMLHttpRequest对象工作六步曲 * 步骤： 1、使用open方法创建一个请求 2、使用send方法发送一个请求 3、使用onreadystatechange事件捕获请求状态变化 4、使用readyState属性判断请求状态变化 5、使用status属性判断请求的结果 6、使用responseText获得返回的文本 * function createXHR() { var xhr; //声明一个变量 try { //针对 Internet Explorer 6.0+ xhr = new ActiveXObject(“Msxml2.XMLHTTP”); } catch (e) { try { //试针对 Internet Explorer 5.5+ xhr = new ActiveXObject(Microsoft.XMLHTTP); } catch (E) { xhr = false; } } if (!xhr typeof XMLHttpRequest != undefined) { /句针对 Firefox、Opera 以及 Safari 浏览器。 xhr = new XMLHttpRequest(); } return xhr; } * script language=JavaScript type= var req; function checkUser(){ var checkResult=document.getElementById(checkResult); checkResult.innerHTML=checking the user name...; var userName=document.getElementById(userName).value; req= createXHR() ; req.open(get,checkUser.jsp?checkUserName=+userName); req.onreadystatechange =handleRequest; req.send(null); } function handleRequest(){ var checkResult=document.getElementById(checkResult); if(req.readyState==4){ if(req.status==200){ checkResult.innerHTML=req.responseText; } else{ alert(Anerror occurred:+req.statusText); } } } /script 生成XMLHttpRequest对象 function createX