第十六讲 php与ajax.ppt

Ajax+PHP应用 学习目标 1、ajax是什么及其工作原理 2、创建XMLHttpRequest对象 3、XMLHttpRequest对象相关方法 1、ajax是什么及其工作原理 Ajax 由 HTML、JavaScript? 技术、DHTML 和 DOM 组成，这一杰出的 方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。 HTML页面 JS脚本 PHP文件 触发脚本 执行 反应 2、创建XMLHttpRequest对象 对于Ajax，最核心的一个对象是XMLHttpRequest，所有的Ajax操作都离不开对这 个对象的操作 xmlHttp = new XMLHttpRequest(); 首先我们来了解怎么在javascript中创建这个对象： JS代码： 这对于规范的Js支持的浏览器来讲是没错的 恰恰相反IE却就不支持，所以没办法我们只能 做个判断再创建一个IE支持的 xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); 3、XMLHttpRequest对象相关方法 XMLHttpRequest.open(传递方式,地址,是否异步请求) 打开请求 传递方式------GET POST GET xmlhttp.open(“GET,data.php?dt=+str,true); POST var poststr=st=+sn+sx=+sex; xmlhttp.open(POST,data.php,true); xmlhttp.setRequestHeader(Content-type,application/x-www-form-urlencoded); xmlhttp.send(poststr); XMLHttpRequest.onreadystatechange XMLHttpRequest.responseText 准备就绪执行 获取执行结果 Ajax+PHP应用(二) 学习目标 1、Ajxa常见问题 2、方法XHR.readyState五种状态 3、方法XHR.status常见的几种状态 4、实例操作并学习一个PHP等待函数Sleep 1、Ajxa常见问题 (1) js脚本缓存问题 答：这个问题是大家遇到最常见问题之一，因为修改了js内容调试的时候 并不能显示新写代码的结果，是因为js为了加速页面执行，当前页面会使用缓存保持 当前调用的相同连接。为了开发时调试方便可以在连接地址的后面增加一个随机函数。 如原地址：for.php 增加随机后 for.php?1293874 (2) 本地调试js脚本不起作用 答：因为使用ajxa传递参数的时候需要head支持，所以我们只有在站点下才可以 成功，比如我们放在Apache下面或者IIS下面进行调试。 (3) 调试代码查找错误困难 答：这是js调试存在已久的问题，简单点我们可以使用ie默认提示的错误框，还有就 是我们可以使用DW CS4提供的纠正错误，或者通过专业的插件如：firbug 等 2、方法XHR.readyState五种状态 0：请求未初始化，还没有调用 open()。 1：请求已经建立，但是还没有发送，还没有调用 send()。 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。 3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。 4：响应已完成；您可以获取并使用服务器的响应了。 XHR.readyState == 状态（0，1，2，3，4） 3 、方法XHR.status常见的几种状态 100——客户必须继续发出请求 101——客户要求服务器根据请求转换HTTP协议版本 200——成功 201——提示知道新文件的URL 300——请求的资源可在多处得到 301——删除请求数据 404——没有发现文件、查询或URl 500——服务器产生内部错误 XHR.status == 200，300，404 等 4、实例操作并学习一个PHP等待函数Sleep Sleep函数，可以理解为等待函数或者睡眠函数，执行到该函数根据设置的时间 再继续往下执行 sleep（秒） Ajax+PHP应用(三) 学习目标 1、Ajax技术实现用户名检查原理 2、学习HTML的几种触发 3、如何获取表单中的数据内容 1、Ajax技术实现用户名检查原理 填入用户名 触发控件 获得填写内容 ajax传递 查询数据库 返回结果 DOM反应到页面 学习重点： 1、页面触发的几种类型 2、获取表单内容 3、数据库查询技巧 2、学习HTML的几种触发 onblur 事件会在对象失去焦点时发生。 onchange