php和AJAX.docx

php和AJAX.docx

《php和AJAX.docx》由会员分享，可在线阅读，更多相关《php和AJAX.docx（50页珍藏版）》请在冰豆网上搜索。

php和AJAX

一、AJAX简介

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教程。

二、AJAXXMLHttpRequest

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请求

AJAX请求

在下面的AJAX例子中，我们将演示当用户向web表单中输入数据时，网页如何与在线的web服务器进行通信。

在下面的文本框中输入名字：

窗体顶端

FirstName：

窗体底端

Suggestions：

这个例子包括三张页面：

∙一个简单的HTML表单

∙一段JavaScript

∙一张PHP页面

HTML表单

这是HTML表单。

它包含一个简单的HTML表单和指向JavaScript的链接：

Suggestions:

例子解释-HTML表单

正如您看到的，上面的HTML页面含有一个简单的HTML表单，其中带有一个名为"txt1"的输入字段。

该表单是这样工作的：

1.当用户在输入域中按下并松开按键时，会触发一个事件

2.当该事件被触发时，执行名为showHint（）的函数

3.表单的下面是一个名为"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），该函数这样执行：

1.定义要发送到服务器的URL（文件名）

2.把带有输入域内容的参数（q）添加到这个URL

3.添加一个随机数，以防服务器使用缓存文件

4.调用GetXmlHttpObject函数来创建XMLHTTP对象，并在事件被触发时告知该对象执行名为stateChanged的函数

5.用给定的URL来打开打开这个XMLHTTP对象

6.向服务器发送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），则：

1.找到与JavaScript所传送的字符相匹配的名字

2.如果找到多个名字，把所有名字包含在response字符串中

3.如果没有找到匹配的名字，把response设置为"nosuggestion"

4.如果找到一个或多个名字，把response设置为这些名字

5.把response发送到"txtHint"占位符

五、PHP和AJAXXML实例

AJAX可与XML文件进行交互式通信。

AJAXXML实例

在下面的AJAX实例中，我们将演示网页如何使用AJAX技术从XML文件中读取信息。

在下面的下列列表中选择一个CD

窗体顶端

选择CD：

窗体底端

在此列出CD信息。

本例包括三张页面：

∙一个简单HTML表单

∙一个XML文件

∙一个JavaScript文件

∙一张PHP页面

HTML表单

上面的例子包含了一张简单的HTML表单，以及指向JavaScript的链接：

CDinfowillbelistedhere.