PHP+AJAX教程.docx
《PHP+AJAX教程.docx》由会员分享，可在线阅读，更多相关《PHP+AJAX教程.docx（57页珍藏版）》请在冰豆网上搜索。
PHP+AJAX教程
PHP+AJAX教程
（1）:
AJAX简介
WebjxCom提示：
AJAX是AsynchronousJavaScriptAndXML的首字母缩写。
AJAX并不是一种新的编程语言，而仅仅是一种新的技术，它可以创建更好、更快且交互性更强的web应用程序。
AJAX=AsynchronousJavaScriptAndXML（异步JavaScript及XML）
AJAX是AsynchronousJavaScriptAndXML的首字母缩写。
AJAX并不是一种新的编程语言，而仅仅是一种新的技术，它可以创建更好、更快且交互性更强的web应用程序。
AJAX使用JavaScript在web浏览器与web服务器之间来发送和接收数据。
通过在幕后与web服务器交换数据，而不是每当用户作出改变时重载整个web页面，AJAX技术可以使网页更迅速地响应。
AJAX基于开放的标准
AJAX基于以下开放的标准：
∙JavaScript
∙XML
∙HTML
∙CSS
在AJAX中使用的开放标准被良好地定义，并得到所有主要浏览器的支持。
AJAX应用程序独立于浏览器和平台。
（可以说，它是一种跨平台跨浏览器的技术）。
AJAX事关更好的Internet应用程序
与桌面应用程序相比，Web应用程序有很多优势：
∙可拥有更多用户
∙更容易安装和维护
∙更容易开发
但是，应用程序不总是象传统应用程序那样强大和友好。
通过AJAX，可以使Internet应用程序更加强大（更轻巧、更快速，且更易使用）。
今天您就可以开始使用AJAX
没有什么新知识需要学习。
AJAX基于开放的标准。
而这些标准已被大多数开发者使用多年。
大多数web应用程序可通过使用AJAX技术进行重写，来替代传统的HTML表单。
AJAX使用XML和HTTP请求
传统的web应用程序会把数据提交到web服务器（使用HTML表单）。
在web服务器把数据处理完毕之后，会向用户返回一张完整的新网页。
由于每当用户提交输入，服务器就会返回新网页，传统的web应用程序往往运行缓慢，且越来越不友好。
通过AJAX，web应用程序无需重载网页，就可以发送并取回数据。
完成这项工作，需要通过向服务器发送HTTP请求（在幕后），并通过当服务器返回数据时使用JavaScript仅仅修改网页的某部分。
一般使用XML作为接收服务器数据的格式，尽管可以使用任何格式，包括纯文本。
您将在本教程接下来的章节学习到如何完成这些工作。
PHP和AJAX
不存在什么AJAX服务器。
AJAX是一种在浏览器运行的技术。
它使用浏览器与web服务器之间的异步数据传输，使网页从服务器请求少量的信息，而不是整张页面。
AJAX是一种独立于web服务器软件的web浏览器技术。
但是，在本教程中，我们将集中在运行在PHP服务器上的实际案例，而不是AJAX的工作原理。
如需阅读更多有关AJAX如何工作的知识，请访问我们的AJAX教程。
PHP+AJAX教程
（2）:
AJAXXMLHttpRequest
WebjxCom提示：
XMLHttpRequest对象使AJAX成为可能。
XMLHttpRequest对象使AJAX成为可能。
XMLHttpRequest
XMLHttpRequest对象是AJAX的关键。
该对象在InternetExplorer5.5与2000年7月发布之后就已经可用了，但是在2005人们开始讨论AJAX和Web2.0之前，这个对象并没有得到充分的认识。
创建XMLHttpRequest对象
不同的浏览器使用不同的方法来创建XMLHttpRequest对象。
InternetExplorer使用ActiveXObject。
其他浏览器使用名为XMLHttpRequest的JavaScript内建对象。
要克服这个问题，可以使用这段简单的代码：
varXMLHttp=null
if（window.XMLHttpRequest）
{
XMLHttp=newXMLHttpRequest（）
}
elseif（window.ActiveXObject）
{
XMLHttp=newActiveXObject（"Microsoft.XMLHTTP"）
}
代码解释：
1.首先创建一个作为XMLHttpRequest对象使用的XMLHttp变量。
把它的值设置为null。
2.然后测试window.XMLHttpRequest对象是否可用。
在新版本的Firefox,Mozilla,Opera以及Safari浏览器中，该对象是可用的。
3.如果可用，则用它创建一个新对象：
XMLHttp=newXMLHttpRequest（）
4.如果不可用，则检测window.ActiveXObject是否可用。
在InternetExplorerversion5.5及更高的版本中，该对象是可用的。
5.如果可用，使用它来创建一个新对象：
XMLHttp=newActiveXObject（）
改进的例子
一些程序员喜欢使用最新最快的版本的XMLHttpRequest对象。
下面的例子试图加载微软最新版本的"Msxml2.XMLHTTP"，在InternetExplorer6中可用，如果无法加载，则后退到"Microsoft.XMLHTTP"，在InternetExplorer5.5及其后版本中可用。
functionGetXmlHttpObject（）
{
varxmlHttp=null;
try
{
//Firefox,Opera8.0+,Safari
xmlHttp=newXMLHttpRequest（）;
}
catch（e）
{
//InternetExplorer
try
{
xmlHttp=newActiveXObject（"Msxml2.XMLHTTP"）;
}
catch（e）
{
xmlHttp=newActiveXObject（"Microsoft.XMLHTTP"）;
}
}
returnxmlHttp;
}
代码解释：
1.首先创建用作XMLHttpRequest对象的XMLHttp变量。
把它的值设置为null。
2.按照web标准创建对象（Mozilla,Opera以及Safari）：
XMLHttp=newXMLHttpRequest（）
3.按照微软的方式创建对象，在InternetExplorer6及更高的版本可用：
XMLHttp=newActiveXObject（"Msxml2.XMLHTTP"）
4.如果捕获错误，则尝试更老的方法（InternetExplorer5.5）：
XMLHttp=newActiveXObject（"Microsoft.XMLHTTP"）
更多有关XMLHttpRequest对象的信息
如果您希望阅读更多有关XMLHttpRequest的内容，请访问我们的AJAX教程。
PHP+AJAX教程（3）:
PHP和AJAX请求
WebjxCom提示：
在下面的AJAX例子中，我们将演示当用户向web表单中输入数据时，网页如何与在线的web服务器进行通信。
AJAX请求
在下面的AJAX例子中，我们将演示当用户向web表单中输入数据时，网页如何与在线的web服务器进行通信。
在下面的文本框中输入一个名字（测试说明：
该实例功能未实现）
FirstName:
Suggestions:
这个例子包括三张页面：
asimpleHTMLform
aJavaScript
aPHPpage
HTML表单
这是HTML表单。
它包含一个简单的HTML表单和指向JavaScript的链接：
Suggestions:
例子解释-HTML表单
正如您看到的，上面的HTML页面含有一个简单的HTML表单，其中带有一个名为"txt1"的输入字段。
该表单是这样工作的：
当用户在输入域中按下并松开按键时，会触发一个事件
当该事件被触发时，执行名为showHint（）的函数
表单的下面是一个名为"txtHint"的。
它用作showHint（）函数所返回数据的占位符。
JavaScript
JavaScript代码存储在"clienthint.js"文件中，它被链接到HTML文档：
varxmlHttp
functionshowHint（str）
{
if（str.length==0）
{
document.getElementById（"txtHint"）.innerHTML=""
return
}
xmlHttp=GetXmlHttpObject（）
if（xmlHttp==null）
{
alert（"BrowserdoesnotsupportHTTPRequest"）
return
}
varurl="gethint.php"
url=url+"?
q="+str
url=url+"&sid="+Math.random（）
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open（"GET",url,true）
xmlHttp.send（null）
}
functionstateChanged（）
{
if（xmlHttp.readyState==4||xmlHttp.readyState=="complete"）
{
document.getElementById（"txtHint"）.innerHTML=xmlHttp.responseText
}
}
functionGetXmlHttpObject（）
{
varxmlHttp=null;
try
{
//Firefox,Opera8.0+,Safari
xmlHttp=newXMLHttpRequest（）;
}
catch（e）
{
//InternetExplorer
try
{
xmlHttp=newActiveXObject（"Msxml2.XMLHTTP"）;
}
catch（e）
{
xmlHttp=newActiveXObject（"Microsoft.XMLHTTP"）;
}
}
returnxmlHttp;
}
例子解释：
showHint（）函数
每当在输入域中输入一个字符，该函数就会被执行一次。
如果文本框中有内容（str.length>0），该函数这样执行：
定义要发送到服务器的URL（文件名）
把带有输入域内容的参数（q）添加到这个URL
添加一个随机数，以防服务器使用缓存文件
调用GetXmlHttpObject函数来创建XMLHTTP对象，并在事件被触发时告知该对象执行名为stateChanged的函数
用给定的URL来打开打开这个XMLHTTP对象
向服务器发送HTTP请求
如果输入域为空，则函数简单地清空txtHint占位符的内容。
stateChanged（）函数
每当XMLHTTP对象的状态发生改变，则执行该函数。
在状态变成4（或"complete"）时，用响应文本填充txtHint占位符txtHint的内容。
GetXmlHttpObject（）函数
AJAX应用程序只能运行在完整支持XML的web浏览器中。
上面的代码调用了名为GetXmlHttpObject（）的函数。
该函数的作用是解决为不同浏览器创建不同XMLHTTP对象的问题。
这一点在上一节中已经解释过了。
PHP页面
被JavaScript代码调用的服务器页面是一个名为"gethint.php"的简单服务器页面。
"gethint.php"中的代码会检查名字数组，然后向客户端返回对应的名字：
php
//Filluparraywithnames
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//gettheqparameterfromURL
$q=$_GET["q"];
//lookupallhintsfromarrayiflengthofq>0
if（strlen（$q）>0）
{
$hint="";
for（$i=0;$i {
if（strtolower（$q）==strtolower（substr（$a[$i],0,strlen（$q））））
{
if（$hint==""）
{
$hint=$a[$i];
}
else
{
$hint=$hint.",".$a[$i];
}
}
}
}
//Setoutputto"nosuggestion"ifnohintwerefound
//ortothecorrectvalues
if（$hint==""）
{
$response="nosuggestion";
}
else
{
$response=$hint;
}
//outputtheresponse
echo$response;
?
>
如果存在从JavaScript送来的文本（strlen（$q）>0），则：
找到与JavaScript所传送的字符相匹配的名字
如果找到多个名字，把所有名字包含在response字符串中
如果没有找到匹配的名字，把response设置为"nosuggestion"
如果找到一个或多个名字，把response设置为这些名字
把response发送到"txtHint"占位符
PHP+AJAX教程（4）:
PHP和AJAXXML实例
WebjxCom提示：
AJAX可与XML文件进行交互式通信。
AJAX可与XML文件进行交互式通信。
AJAXXML实例
在下面的AJAX实例中，我们将演示网页如何使用AJAX技术从XML文件中读取信息。
在列表中选择一张CD（测试说明：
该实例功能未实现）
窗体顶端
SelectaCD:
窗体底端
在此列出CD信息。
本例包括三张页面：
∙一个简单HTML表单
∙一个XML文件
∙一个JavaScript文件
∙一张PHP页面
HTML表单
上面的例子包含了一张简单的HTML表单，以及指向JavaScript的链接：
CDinfowillbelistedhere.
升级会员 