17 AJAX

AJAX工作原理 AJAX工作原理
AJAX的工作流程 AJAX的工作流程
• Ajax的核心是JavaScript对象 Ajax的核心是JavaScript对象
XmlHttpRequest
AJAX中常用的javascript的函数方法 AJAX中常用的javascript的函数方法
常用方法： 常用方法： HtmlDocument的方法 HtmlDocument的方法 getElementByID getElementsByName getElementsByTagName getAttribute innerHTML innerText createElement Node的方法 Node的方法 appendChild removeChild HtmlDocument: HTML文档树的根 HTML文档树的根
xajaxResponse 对象返回XML指令: 对象返回XML指令:
– – – – – – – – – – – function myFunction($arg){ myFunction($arg){
// 对$arg做一些基本处理例如从数据库检索数据 $arg做一些基本处理例如从数据库检索数据 // 然后把结果赋值给变量，例如$newContent 然后把结果赋值给变量，例如$newContent // 实例化xajaxResponse 对象 实例化xajaxResponse
• xajax是一个开源的 PHP 类库 xajax是一个开源的 • 它能够黏合HTML、CSS、Javascript和PHP， 它能够黏合HTML、CSS、Javascript和PHP，
轻而易举的开发功能强大、基于WEB的 轻而易举的开发功能强大、基于WEB的 AJAX应用软件 AJAX应用软件
XAJAX工作流程 XAJAX工作流程
• 注册你需要通过xajax调用的PHP函数的名 注册你需要通过xajax调用的PHP函数的名
称:
– $xajax->registerFunction("myFunction"); $xajax- registerFunction("myFunction")
使用XAJAX2 使用XAJAX2
• 编写注册的PHP函数，并且在函数之中使用 编写注册的PHP函数，并且在函数之中使用
• xajax的PHP对象生成封装好的Javascript函数 xajax的PHP对象生成封装好的 对象生成封装好的Javascript函数 • 当被调用时，封装的函数使用Javascript的 当被调用时，封装的函数使用Javascript的 • •
XMLHttpRequest对象与服务器异步通讯， XMLHttpRequest对象与服务器异步通讯，调用 对象与服务器异步通讯 xajax对象对应的 xajax对象对应的PHP函数 对象对应的PHP函数 调用结束后, PHP函数由 函数由xajax返回一个 返回一个xajax的 调用结束后, PHP函数由xajax返回一个xajax的 XML响应传递给应用程序 XML响应传递给应用程序 XML响应包含了特定的指令和数据 XML响应包含了特定的指令和数据，他们可以被 响应包含了特定的指令和数据， xajax的Javascript消息分析器解析 xajax的Javascript消息分析器解析，并且被用 消息分析器解析， 于更新你的应用程序的内容
Node: HTML文档树的一个节点 HTML文档树的一个节点
XmlHttpRequest对象属性 XmlHttpRequest对象属性
属性 onreadystatechange readyState 描述 每次状态改变所触发事件的事件处理程序 对象状态值： •0 = 未初始化（uninitialized） 未初始化（uninitialized） •1 = 正在加载（loading） 正在加载（loading） •2 = 加载完毕（loaded） 加载完毕（loaded loaded） •3 = 交互（interactive） 交互（interactive） •4 = 完成（complete） 完成（complete） 从服务器进程返回的数据的字符串形式 从服务器进程返回的DOM兼容的文档数据对象 从服务器进程返回的DOM兼容的文档数据对象 从服务器返回的数字代码，比如404（未找到）或 从服务器返回的数字代码，比如404（未找到）或 200（就绪） 200（就绪） 伴随状态码的字符串信息
十七、AJAX 十七、AJAX
知识回顾
• XML文件的特点 XML文件的特点 • XML文件的主要应用 XML文件的主要应用 • XML文件相关处理函数 XML文件相关处理函数
内容摘要
• AJAX技术简介 AJAX技术简介 • AJAX操作流程 AJAX操作流程 • AJAX典型应用 AJAX典型应用 • XAJAX包介绍 XAJAX包介绍
responseText responseXML status statusText
XMLHttpRequest对象的方法 XMLHttpRequest对象的方法
初始化XMLHttpRequest对象 初始化XMLHttpRequest对象
AJAX实例 AJAX实例
XAJAX介绍 XAJAX介绍
使用XAJAX1 使用XAJAX1
• 包含xajax类库: 包含xajax类库:
– require_once("xajax.inc.php"); require_once("xajax.inc.php")
• 实例化xajax 对象: 实例化xajax 对象:
– $xajax = new xajax(); xajax();
– $xajax->processRequests(); $xajax- processRequests();
使用XAJAX3 使用XAJAX3
• 在页面的 标签之间, 告诉xajax生成所必需 标签之间, 告诉xajax生成所必需
的Javascript:
– <?php $xajax->printJavascript(); ?> $xajax- printJavascript();
• 在程序中，从Javascript事件或者函数调用 在程序中，从Javascript事件或者函数调用
前面注册的函数: 前面注册的函数:
– <div id="SomeElementId"></div> id="SomeElementId"></div> – <button onclick="xajax_myFunction onclick= (SomeArgument);"> (SomeArgument);">ຫໍສະໝຸດ 什么是AJAX 什么是AJAX
• Ajax的全称是：Asynchronous JavaScript + XML Ajax的全称是：Asynchronous • Ajax不是一种技术，它由几种技术以新的方式组 Ajax不是一种技术， •
合而成 Ajax包含： Ajax包含：
– – – – 基于XHTML和CSS标准的表示 基于XHTML和CSS标准的表示 使用Document 使用Document Object Model进行动态显示和交互 Model进行动态显示和交互 使用XMLHttpRequest与服务器进行异步通信 使用XMLHttpRequest与服务器进行异步通信 使用JavaScript绑定一切 使用JavaScript绑定一切
$objResponse = new xajaxResponse(); xajaxResponse();
// 添加指令到响应之中，用于指派 // 指定元素(例如id=“SomeElementId”)的innerHTML属性的新的内容 指定元素(例如id= innerHTML属性的新的内容
$objResponse->addAssign("SomeElementId", "innerHTML", $newContent); $objResponse- addAssign("SomeElementId", "innerHTML", $newContent)
课堂重点
• AJAX操作流程 AJAX操作流程 • AJAX典型应用 AJAX典型应用
有问有答
//返回xajaxResponse 对象生成的XML响应 //返回xajaxResponse 对象生成的XML响应
return $objResponse; $objResponse; }
• 在你的脚本输出任何信息之前，调用xajax用于接 在你的脚本输出任何信息之前，调用xajax用于接
管请求: 管请求: