2、AJAX常用模式.ppt

五种Ajax应用模式 目标 替换 HTML 片段 读取 XML 数据 读取 JavaScript 数据 避免浏览器缓存 替换多个 HTML 片段 替换 HTML 片段 21-1 向服务器请求HTML响应， 并使用它来更新部分页面。这是最常见的 Ajax 任务 示例1：pat1_replace_div.html从服务器请求一个HTML响应（ pat1_content.html ），然后将得到的响应放入它的 div 标记中，从而刷新页面。代码如下： 替换 HTML 片段 21-2 html script var req = null; //引用XMLHttpRequest对象的变量 // 处理服务器返回的HTML响应的回调函数 function processReqChange() { //如果服务器响应已经完成并且服务器生成了正常响应 if (req.readyState == 4 req.status == 200 ) { //得到页面中的DIV块 var dobj = document.getElementById( ‘htmlDiv’ ); //用服务器响应的HTML文本更新页面DIV块的内容 dobj.innerHTML = req.responseText; } } 替换 HTML 片段 21-3 // 创建XMLHttpRequest对象并发送请求到服务器的函数 function loadUrl(url) { //创建XMLHttpRequest对象 if(window.XMLHttpRequest) {// Mozilla, Opera try { req = new XMLHttpRequest(); }catch(e){ req = false; } }else if(window.ActiveXObject) {//IE try{ req = new ActiveXObject(Msxml2.XMLHTTP); }catch(e){ try { req = new ActiveXObject(Microsoft.XMLHTTP); }catch(e){ req = false; } } } 替换 HTML 片段 21-4 //发送请求到服务器 if(req){ //指定处理服务器响应的处理函数 req.onreadystatechange = processReqChange; //以get方式建立与服务器的连接 req.open(GET, url, true); //发送请求 req.send(); } }/////// //定义服务器响应的URL var url=window.location.toString();//得到浏览器当前地址栏中的url地址 url=url.replace(/pat1_replace_div.html/, ‘pat1_content.html’ );//替换url地址中的文件名部分 //向服务器发送请求 loadUrl(url);/script 替换 HTML 片段 21-5 body 动态内容被显示在这里：br/ div id=htmlDiv style=border:1px solid black;padding:10px;/div 和这里br/ /body/html 服务器响应的pat1_content.html页面的内容如下： 我就是返回给 bpat1_replace_div.html/b 页面的动态内容。 执行结果如下图所示： 替换 HTML 片段 21-6 替换 HTML 片段 21-7 该模式的另一种变体就是创建一个选项卡样式的显示 示例2：pat1_tabs.html从服务器请求一个HTML响应（pat1_tab1_content.html或者pat1_tab2_content.html），然后将得到的响应放入它的相应的表示选项卡的 div 标记中，从而刷新页面。代码如下： 替换 HTML 片段 21-8 html script var req = null; //引用XMLHttpRequest对象的变量 // 处理服务器返回的HTML响应的回调函数 function processReqChange() { //如果服务器响应已经完成并且服务器生成了正常响应