第22章PHP中使用Ajax.pptVIP

第22章(补充) PHP中使用Ajax技术 教学时间：第10周1-2,3-4节 教学班级：07软大1,2班教学内容：PHP中使用Ajax技术 教学重点：XMLHttpRequest的使用。教学难点：结合CSS、DOM、浏览器事件、JavaScript、XML完成Web2.0网页教学方法：举例子和讲解 22.0 Ajax含义 AJAX = Asynchronous JavaScript And XML（异步 JavaScript 及 XML） AJAX 是 Asynchronous JavaScript And XML 的首字母缩写。 AJAX 并不是一种新的编程语言，而仅仅是一种新的技术，它可以创建更好、更快且交互性更强的 web 应用程序。 AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据。 通过在幕后与 web 服务器交换数据，而不是每当用户作出改变时重载整个 web 页面，AJAX 技术可以使网页更迅速地响应。 22.1 Ajax基础 Ajax的工作原理 简单例子： 在具体讲解Ajax的详细使用过程之前，先看一个简单的例子，以了解Ajax的使用大致流程:假如要做一个网页，在文本域中输入姓名:Tom,然后在下面显示:Tom,How do you do? 大家看，传统的做法是怎么做的？ Web1.0的做法：NoAjaxReqRes.php ? if($_GET[name]) { $mess=$_GET[name]; $mess.=,How do you do?; } ? form method=get action= name:input type=text id=name name=name /br / input type=submit / /form div id=mess? echo($mess); ?/div Web2.0的做法：方法1：以GET方法发送 第一步：①，创建Ajax对象 先创建一个html文件AjaxRequest.html，然后创建Ajax对像script type=text/javascript var XMLHttpReq=null; function createXMLHttpReq() //创建XMLHttpRequest异步传输对象 {if (window.XMLHttpRequest) {//DOM 2浏览器 XMLHttpReq=new XMLHttpRequest(); } else if (window.ActiveXObject)//Internet Explorer {try{XMLHttpReq=new ActiveXObject(Msxml2.XMLHTTP); } catch (e1) {try{XMLHttpReq=new ActiveXObject(Microsoft.XMLHTTP);} catch (e2){window.alert(异常信息:+e.message);} } } else { window.alert(浏览器不支持创建XMLHttpRequest); } } 第二步：②，创建发送Http请求函数 function sendRequest() //发送请求函数 { createXMLHttpReq(); var name=document.getElementById(name); var url=AjaxResponse.php?name=+name.value; XMLHttpReq.open(“GET”,url,true);//以GET方法打开连接通道，准备发送 XMLHttpReq.onreadystatechange=processRequest; XMLHttpReq.send(null); //发送到服务器端 } 第三步：③，处理服务器端返回结果的响应函数(会自动触发) function processRequest()////处理服务端返回结果 { if (XMLHttpReq.readyState==4) //返回完成 { if (XMLHttpReq.status==200) //返回成功 { //获取服务器端的响应文本 var ResponseStr=XMLHttpReq.responseText; alert(ResponseStr); document.getElementById(mess).innerHTML=ResponseStr; } else { window.alert(请求的页面有异常!); }