PHP和AJAX笔记汇总

时间：2022-09-22 15:20:23

AJAX简介
AJAX = Asynchronous JavaScript And XML（异步 JavaScript 及 XML）
AJAX 是 Asynchronous JavaScript And XML 的首字母缩写。
AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据。
通过在幕后与 web 服务器交换数据，而不是每当用户作出改变时重载整个 web 页面，AJAX 技术可以使网页更迅速地响应。

AJAX基于以下开放的标准：
JavaScript
XML
HTML
CSS
在 AJAX 中使用的开放标准被良好地定义，并得到所有主要浏览器的支持。AJAX 应用程序独立于浏览器和平台。（可以说，它是一种跨平台跨浏览器的技术）。

一、AJAX XMLHttpRequest
XMLHttpRequest对象使AJAX成为可能，XMLHttpRequest对象是AJAX 的关键。

创建XMLHttpRequest对象：
不同的浏览器使用不同的方法来创建XMLHttpRequest 对象。
Internet Explorer使用ActiveXObject。
其他浏览器使用名为XMLHttpRequest的JavaScript内建对象。

要克服这个问题，可以使用这段简单的代码：

var XMLHttp=null

if (window.XMLHttpRequest)

  {

  XMLHttp=new XMLHttpRequest()

  }

else if (window.ActiveXObject)

  {

  XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

  }

代码解释：
首先创建一个作为 XMLHttpRequest 对象使用的 XMLHttp 变量。把它的值设置为 null。
然后测试 window.XMLHttpRequest 对象是否可用。在新版本的 Firefox, Mozilla, Opera 以及 Safari 浏览器中，该对象是可用的。
如果可用，则用它创建一个新对象：XMLHttp=new XMLHttpRequest()
如果不可用，则检测 window.ActiveXObject 是否可用。在 Internet Explorer version 5.5 及更高的版本中，该对象是可用的。
如果可用，使用它来创建一个新对象：XMLHttp=new ActiveXObject()

改进的例子
一些程序员喜欢使用最新最快的版本的 XMLHttpRequest 对象。
下面的例子试图加载微软最新版本的 "Msxml2.XMLHTTP"，在 Internet Explorer 6 中可用，如果无法加载，则后退到 "Microsoft.XMLHTTP"，在 Internet Explorer 5.5 及其后版本中可用。

function GetXmlHttpObject()

{

var xmlHttp=null;

try

 {

 // Firefox, Opera 8.0+, Safari

 xmlHttp=new XMLHttpRequest();

 }

catch (e)

 {

 // Internet Explorer

 try

  {

  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

  }

 catch (e)

  {

  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

 }

return xmlHttp;

}

代码解释：
首先创建用作 XMLHttpRequest 对象的 XMLHttp 变量。把它的值设置为 null。
按照 web 标准创建对象 (Mozilla, Opera 以及 Safari)：XMLHttp=new XMLHttpRequest()
按照微软的方式创建对象，在 Internet Explorer 6 及更高的版本可用：XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")
如果捕获错误，则尝试更老的方法 (Internet Explorer 5.5) ：XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

如果您希望阅读更多有关 XMLHttpRequest 的内容，请访问我们的 AJAX 教程。

二、PHP和AJAX请求

AJAX请求
在下面的AJAX例子中，我们将演示当用户向web表单中输入数据时，网页如何与在线的 web服务器进行通信。
在下面的文本框中输入名字：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAABgCAIAAABJ6vrDAAAFd0lEQVR4nO2dO3LjOBBAeSFvtglP4fIFJmM8VT7DplPwMRxtptDpJLoBzzBn0ASUmkATDYJQy5Lp96qD4YD4CMQTPlYVuxMAXE137wYA7AFEAnAAkQAcQCQABxAJwAFEAnAAkQAcQCQABxAJwAFEAnAAkQAcQCQABxAJwAFEAnAAkQAcQCQABxAJwAFEAnAAkQAcQCSTD4CI8mhBJJOPj4/ff44E8fvPEZHaQSRCApHaQSRCApHaQSRCApHaQSRCApHaQSRCApHaQSRCApHaQSRCApHaQSRCApHaQSRCApHaQSRCApHaQSRCApHaQSRCokWkw9Bp+jCOoe/6MG4bi2Pou+FQuOFcV3RPUz03AZEIiVaRiqO/nhqR+mGI1fn6Ir09d1337+vdnz3hGH4iRQP8MFymqPNsddLTWB/GKUdMzqipqLjGWKS0UMk/3RKGuLb51qSaqITNdl4xI709I9K+4lYipQNT5RhDf76qmpHCGBeeiiSVjKHv4lvmCtPWxE1JmrV9nkUkQsJljzQcTpkZac5gr8ZqRYrGuVnYbEJ6i3WlC9JtmT5boW3bRDq+Pl366/kdkfYWN1zaqbTsAqpeJCl/6cVidVcnUubM5HYivT13//w8yr/ZI+0tPkek5ajfuLSL6tVLyMzarF6kq85MNoj0/vL03//z5fH1CZH2FZ8q0rKATSJNVcxneKodLUu7q0xCJELiU0RS1/rcrTSYVdbzciyzyZlStoikZ7ToDGT65M5Lu5dfl8tfP1ja7S0+Z0ZS2xFt2erxd1rLXECyVtw6I+kSdAucDxveX+Z6frywTdpZ8BOhdvhlAyGBSO0gEiGBSO0gEiGBSO0gEiGBSO0gEiGBSO0gEiGBSO0gEiGBSO0gEiGBSO0gEiGBSO0gEiGBSO0gEiGBSO0gEiGBSO0gEiGBSO20v7YX9kh5tCASgAOIBOAAIgE4gEgADiASgAOIBOAAIgE4gEgADiASgAOIBOAAIgE4gEgADiASgAOIBOAAIgE4gEgADiASgAOIBOAAIgE4gEgADiASgAN5kdJXr1ovgL0P+k3p6q2x92Clux6/hZvLuvPHeUCMlzEv37b8MCZpkR4APbTSV0o/Ao/fwq/OUqTDUOrh3BOJhrX+5qtLit6KHpedviy9D2O2kOVbza2ypjejL9NyFW0i9x19GLrMW9jTmuYuKDTPyuLZQrnH6Lo+jJfUPhzisq7tut2wFGkMfeF5lURSOafBsZoU/zu6SP77dBpDf74qLO3SWpJvhOmBx825JJkV1ZNd7MyNSUSS+8bQd0kj8s0zs3i2sKLr0u+q6cqh63ZDbo9kfTVd0gyRVLfG13aSVZ69ELdF0rUUWjBnWlvxT91gJqvSYmQ0WlXUNM/OsomVFq51XZJVymKzFFEcIpFRlw6zRVp0q22Lmng08jWeldkUaflc1ZoqP1LNis4d5CySWpzWiJTPsonNqqddlxdpreu+FVXH39G8fwuRSiMjelZrS7tGkcyK6qle2qXbkqoZycxymxbmW2CIFJdz1RZuB2QOG8Lyy2V9KXZaPuTqpV1N96c5HJd2dkX1WFv5aM7rw7gou6Z5dhbPFrYt7TStjdsF+VO7zGmOsRGO7022qGmulaSouvOOVT298ulA5WGDNVKtiqYOaljaqcPl/JyZ9F3dFm7xaBIyf7aobeFa1+VFWuu6b0V2iOiNS/rokpk8nR+SRXMYuroktQnIbp6M4+qNx99JjdkT6cVQqBWp0GP5Ddl02r0+YVpZNMU/W6y0cHHP8vg793FWuu5bccOfCOkHUJcEbegVL3wuriJFf/LQE30hCRwYQ0+X3hNnkcyJvpAE8PXh198ADiASgAOIBOAAIgE48BfAug3GIIj18AAAAABJRU5ErkJggg==" alt="" />

这个例子包括三张页面：
一个简单的 HTML 表单
一段 JavaScript
一张 PHP 页面

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

<html>

<head>

<script src="clienthint.js"></script>

</head>

<body>

<form>

First Name:

<input type="text" id="txt1"

onkeyup="showHint(this.value)">

</form>

<p>Suggestions: <span id="txtHint"></span></p>

</body>

</html>

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

该表单是这样工作的：
当用户在输入域中按下并松开按键时，会触发一个事件
当该事件被触发时，执行名为 showHint() 的函数
表单的下面是一个名为 "txtHint" 的 <span>。它用作 showHint() 函数所返回数据的占位符。

JavaScript
JavaScript代码存储在 "clienthint.js" 文件中，它被链接到 HTML 文档：

var xmlHttp

function showHint(str)

{

if (str.length==0)

  {

  document.getElementById("txtHint").innerHTML=""

  return

  }

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)

  {

  alert ("Browser does not support HTTP Request")

  return

  }

var url="gethint.php"

url=url+"?q="+str

url=url+"&sid="+Math.random()

xmlHttp.onreadystatechange=stateChanged

xmlHttp.open("GET",url,true)

xmlHttp.send(null)

}

function stateChanged()

{

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

 {

 document.getElementById("txtHint").innerHTML=xmlHttp.responseText

 }

}

function GetXmlHttpObject()

{

var xmlHttp=null;

try

 {

 // Firefox, Opera 8.0+, Safari

 xmlHttp=new XMLHttpRequest();

 }

catch (e)

 {

 // Internet Explorer

 try

  {

  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

  }

 catch (e)

  {

  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

 }

return xmlHttp;

}

例子解释：
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

// Fill up array with names

$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";

//get the q parameter from URL

$q=$_GET["q"];

//lookup all hints from array if length of q>0

if (strlen($q) > 0)

{

$hint="";

for($i=0; $i<count($a); $i++)

  {

  if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))

    {

    if ($hint=="")

      {

      $hint=$a[$i];

      }

    else

      {

      $hint=$hint." , ".$a[$i];

      }

    }

  }

}

//Set output to "no suggestion" if no hint were found

//or to the correct values

if ($hint == "")

{

$response="no suggestion";

}

else

{

$response=$hint;

}

//output the response

echo $response;

?>

如果存在从 JavaScript 送来的文本 (strlen($q) > 0)，则：
找到与 JavaScript 所传送的字符相匹配的名字
如果找到多个名字，把所有名字包含在 response 字符串中
如果没有找到匹配的名字，把 response 设置为 "no suggestion"
如果找到一个或多个名字，把 response 设置为这些名字
把 response 发送到 "txtHint" 占位符

三、PHP和AJAX XML实例

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

AJAX XML实例
在下面的 AJAX 实例中，我们将演示网页如何使用 AJAX 技术从 XML 文件中读取信息。
在下面的下列列表中选择一个 CD
aaarticlea/png;base64,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" alt="" />

本例包括三张页面：
一个简单 HTML 表单
一个 XML 文件
一个 JavaScript 文件
一张 PHP 页面

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

<html>

<head>

<script src="selectcd.js"></script>

</head>

<body>

<form>

Select a CD:

<select name="cds" onchange="showCD(this.value)">

<option value="Bob Dylan">Bob Dylan</option>

<option value="Bee Gees">Bee Gees</option>

<option value="Cat Stevens">Cat Stevens</option>

</select>

</form>

<p>

<div id="txtHint"><b>CD info will be listed here.</b></div>

</p>

</body>

</html>

例子解释：
正如您看到的，它仅仅是一张简单的 HTML 表单，其中带有名为 "cds" 的下拉列表。
表单下面的段落包含了一个名为 "txtHint" 的 div。这个 div 用作从 web 服务器检索到的数据的占位符。
当用户选择数据时，会执行名为 "showCD" 的函数。这个函数的执行是由 "onchange" 事件触发的。
换句话说，每当用户改变了下拉列表中的值，就会调用 showCD 函数。

XML文件
XML文件是 "cd_catalog.xml"。该文件中包含了有关 CD 收藏的数据。

JavaScript
这是存储在 "selectcd.js" 文件中的 JavaScript 代码：

var xmlHttp

function showCD(str)

{

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)

 {

 alert ("Browser does not support HTTP Request")

 return

 }

var url="getcd.php"

url=url+"?q="+str

url=url+"&sid="+Math.random()

xmlHttp.onreadystatechange=stateChanged

xmlHttp.open("GET",url,true)

xmlHttp.send(null)

}

function stateChanged()

{

 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

 {

 document.getElementById("txtHint").innerHTML=xmlHttp.responseText

 }

}

function GetXmlHttpObject()

{

var xmlHttp=null;

try

 {

 // Firefox, Opera 8.0+, Safari

 xmlHttp=new XMLHttpRequest();

 }

catch (e)

 {

 // Internet Explorer

 try

  {

  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

  }

 catch (e)

  {

  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

 }

return xmlHttp;

}

例子解释：
stateChanged() 和 GetXmlHttpObject 函数与上一节中的相同，您可以参阅上一页中的相关解释。

showCD()函数
假如选择了下拉列表中的某个项目，则函数执行：
调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象
定义发送到服务器的 URL（文件名）
向 URL 添加带有下拉列表内容的参数 (q)
添加一个随机数，以防服务器使用缓存的文件
当触发事件时调用 stateChanged
通过给定的 URL 打开 XMLHTTP 对象
向服务器发送 HTTP 请求

PHP页面
这个被 JavaScript 调用的服务器页面，是一个名为 "getcd.php" 的简单 PHP 文件。
这张页面是用 PHP 编写的，使用 XML DOM 来加载 XML 文档 "cd_catalog.xml"。
代码运行针对 XML 文件的查询，并以 HTML 返回结果：

<?php

$q=$_GET["q"];

$xmlDoc = new DOMDocument();

$xmlDoc->load("cd_catalog.xml");

$x=$xmlDoc->getElementsByTagName('ARTIST');

for ($i=0; $i<=$x->length-1; $i++)

{

//Process only element nodes

if ($x->item($i)->nodeType==1)

  {

  if ($x->item($i)->childNodes->item(0)->nodeValue == $q)

    {

    $y=($x->item($i)->parentNode);

    }

  }

}

$cd=($y->childNodes);

for ($i=0;$i<$cd->length;$i++)

{

//Process only element nodes

if ($cd->item($i)->nodeType==1)

  {

  echo($cd->item($i)->nodeName);

  echo(": ");

  echo($cd->item($i)->childNodes->item(0)->nodeValue);

  echo("<br />");

  }

}

?>

例子解释
当请求从 JavaScript 发送到 PHP 页面时，发生：
1.PHP 创建 "cd_catalog.xml" 文件的 XML DOM 对象
2.循环所有 "artist" 元素 (nodetypes = 1)，查找与 JavaScript 所传数据向匹配的名字
3.找到 CD 包含的正确 artist
4.输出 album 的信息，并发送到 "txtHint" 占位符

 四、PHP和AJAX responseXML实例
AJAX可用于以XML返回数据库信息。

AJAX Database转XML实例
在下面的 AJAX 实例中，我们将演示网页如何从 MySQL 数据库中读取信息，把数据转换为XML文档，并在不同的地方使用这个文档来显示信息。

在本例中，我们通过使用responseXML函数从PHP页面得到的是XML形式的数据。
把XML文档作为响应来接收，使我们有能力更新页面的多个位置，而不仅仅是接收一个PHP输出并显示出来。
在本例中，我们将使用从数据库接收到的信息来更新多个<span>元素。
在下拉列表中选择一个名字
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPUAAAA7CAIAAAAsMVv2AAAEDUlEQVR4nO2cO67aQBSGZ0PQ0XgViA3QuUZiDbTILAOadC5pb4MUJYqiKFZWkFzlUSORwp7xvGcMPjyO/k8uuMPxzMB8Pj7jKyEuAPBFPHoCABACvwFn4DfgDPwGnIHfgDPwG3AGfgPOwG/AGfgNOAO/AWfgN+AM/B6BI3gO3KWB3yNwPB7f3k84RjxWw4HfVMBvCr/PQ4DfhMBvIr//5UHvd1MVoqiacTp7OeD3i/ndVIUwKevoCl/rd1MVqa5zu7GGv+cVB7+J/P6bxzC/61IIS426TFgIvx8tBMVx2ExVgpvv0+2j+/0nj0F+16Vtty+iQwaaNnkC7HZR1s5dwie6fkr4LpL02+xGC/VOtS5FUTVyem17UxXB78X2e7/ox5qt8xd1uxSTzYdbzZj1Q2+X09Xp6nF3c7HYeuJD7ePMX/f7dx6D/G6qIlaO1KX2rvpDs8kfYF03TVUqa6L5uy61c4KGxf02ZnS5NFWhTSk0VXuoIX53i53l1rjHatYbdthMhbhhDqf1xHtxhtrH/SCr1fl8fs9jYP2t59XEXV/6qdqTAe5Q+fWJJWp4WkZTqFIJTVXm79xZDfRbz699u0z5bv7T4qcJsU7ryXLnfWu77DpvX/TeB8aVYRLZbajd30/bOJtOumh/1r+738aKm56b9/m+aFCuhAICamb4bVUxw/32fIxL7LNQ+m3nV9PXw2Zqeaa3bJepame/iJUHrW2dkbvtPjbuWyRPh/O3p5/9Ql1L/lGifv/K49bng33JEsqght+hOvoKv+tS+EuI0ASNMz0VhqZxsLfx/e6W1smv1jXgM2A376++VP7r/dbO0lJsSC9av/UcH7i93NPvunKX1qizQ56q+iQa4DZH/LYUjBppvhPZRcjYcMgz+W26ksrfItL/C/r9M4/Bz0/s/ZjWYGZUuVmzdnNuQGB/GVFWDq3OcSZmR2rv6YNZtuZN1fH7pv2lWvjVTBd6N0/VJ0Z80m+7fz5+u5WkEOI6vy9uZWo5ZVbE9vMTf4DTr1F0hEtro6hIXwyKSKFtSOqd6q1+688HJd3Cn9YTrVE+PNaLkJauFOk3l1pj7DD7V9W21X9y3IH7y0A/6ntY7ozXV+Vva4Cr8zcYDNf/7zzwaP3+YaLkttrhNy3w+z5+t4q7jfCbFvhN5HeTB/ymBX7Db87AbyK/v+cBv2mB3/CbM/CbyO9vecBvWuA3kd9f84DftMBvIr+/5AG/aYHfRH5/zgN+0wK/ifz+lAf8pgV+E/n9MQ/4TQv8JvIbv+/zFMBvCr/x+2zPwng/EAluwl0a+A04A78BZ+A34Az8BpyB34Az8BtwBn4DzsBvwBn4DTgDvwFn4DfgDPwGnIHfgDPwG3AGfgPOwG/AGfgNOPMfHA8BvHZpMlAAAAAASUVORK5CYII=" alt="" />
此列由四个元素组成：
    MySQL 数据库
    简单的 HTML 表单
    JavaScript
    PHP 页面
    
数据库
将在本例中使用的数据库看起来类似这样：
aaarticlea/png;base64,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" alt="" width="660" height="127" />

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

<html>

<head>

<script src="responsexml.js"></script>

</head>

<body>

<form>

Select a User:

<select name="users" onchange="showUser(this.value)">

<option value="1">Peter Griffin</option>

<option value="2">Lois Griffin</option>

<option value="3">Glenn Quagmire</option>

<option value="4">Joseph Swanson</option>

</select>

</form>

<h2>

<span id="firstname"></span>&nbsp;<span id="lastname"></span>

</h2>

<span id="job"></span>

<div style="text-align: right">

<span id="age_text"></span>

<span id="age"></span>

<span id="hometown_text"></span>

<span id="hometown"></span>

</div>

</body>

</html>

例子解释 - HTML 表单
HTML 表单是一个下拉列表，其 name 属性的值是 "users"，可选项的值与数据库的 id 字段相对应
表单下面有几个 <span> 元素，它们用作我们所接收到的不同的值的占位符
当用户选择了具体的选项，函数 "showUser()" 就会执行。该函数的执行由 "onchange" 事件触发
换句话说，每当用户在下拉列表中改变了值，函数 showUser() 就会执行，并在指定的 <span> 元素中输出结果。

JavaScript
这是存储在文件 "responsexml.js" 中的 JavaScript 代码：

var xmlHttp

function showUser(str)

 {

 xmlHttp=GetXmlHttpObject()

 if (xmlHttp==null)

  {

  alert ("Browser does not support HTTP Request")

  return

  }

 var url="responsexml.php"

 url=url+"?q="+str

 url=url+"&sid="+Math.random()

 xmlHttp.onreadystatechange=stateChanged

 xmlHttp.open("GET",url,true)

 xmlHttp.send(null)

 }

function stateChanged()

{

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

{

 xmlDoc=xmlHttp.responseXML;

 document.getElementById("firstname").innerHTML=

 xmlDoc.getElementsByTagName("firstname")[0].childNodes[0].nodeValue;

 document.getElementById("lastname").innerHTML=

 xmlDoc.getElementsByTagName("lastname")[0].childNodes[0].nodeValue;

 document.getElementById("job").innerHTML=

 xmlDoc.getElementsByTagName("job")[0].childNodes[0].nodeValue;

 document.getElementById("age_text").innerHTML="Age: ";

 document.getElementById("age").innerHTML=

 xmlDoc.getElementsByTagName("age")[0].childNodes[0].nodeValue;

 document.getElementById("hometown_text").innerHTML="<br/>From: ";

 document.getElementById("hometown").innerHTML=

 xmlDoc.getElementsByTagName("hometown")[0].childNodes[0].nodeValue;

 }

}

function GetXmlHttpObject()

 {

 var objXMLHttp=null

 if (window.XMLHttpRequest)

  {

  objXMLHttp=new XMLHttpRequest()

  }

 else if (window.ActiveXObject)

  {

  objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

  }

 return objXMLHttp

 }

例子解释：
showUser() 与 GetXmlHttpObject 函数与 PHP 和 AJAX MySQL 数据库实例 这一节中的例子是相同的。您可以参阅其中的相关解释。
stateChanged() 函数
如果选择了下拉列表中的项目，该函数执行：
通过使用 responseXML 函数，把 "xmlDoc" 变量定义为一个 XML 文档
从这个 XML 文档中取回数据，把它们放在正确的 "span" 元素中

PHP页面
这个由 JavaScript 调用的服务器页面，是一个名为 "responsexml.php" 的简单的PHP文件。
该页面由 PHP 编写，并使用MySQL数据库。
代码会运行一段针对数据库的 SQL 查询，并以 XML 文档返回结果：

<?php

header('Content-Type: text/xml');

header("Cache-Control: no-cache, must-revalidate");

//A date in the past

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

$q=$_GET["q"];

$con = mysql_connect('localhost', 'peter', 'abc123');

if (!$con)

 {

 die('Could not connect: ' . mysql_error());

 }

mysql_select_db("ajax_demo", $con);

$sql="SELECT * FROM user WHERE id = ".$q."";

$result = mysql_query($sql);

echo '<?xml version="1.0" encoding="ISO-8859-1"?>

<person>';

while($row = mysql_fetch_array($result))

 {

 echo "<firstname>" . $row['FirstName'] . "</firstname>";

 echo "<lastname>" . $row['LastName'] . "</lastname>";

 echo "<age>" . $row['Age'] . "</age>";

 echo "<hometown>" . $row['Hometown'] . "</hometown>";

 echo "<job>" . $row['Job'] . "</job>";

 }

echo "</person>";

mysql_close($con);

?>

例子解释：
当查询从JavaScript 送达PHP页面时，会发生：
PHP文档的content-type被设置为 "text/xml"
PHP文档被设置为"no-cache"，以防止缓存
用HTML 页面送来的数据设置 $q 变量
PHP打开与MySQL服务器的连接
找到带有指定 id 的 "user"
以XML文档输出数据

PHP和AJAX笔记汇总的更多相关文章

  1. 读书笔记汇总 - SQL必知必会（第4版）

    本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...

  2. MySQL笔记汇总

    [目录] MySQL笔记汇总 一.mysql简介 数据简介 结构化查询语言 二.mysql命令行操作 三.数据库(表)更改 表相关 字段相关 索引相关 表引擎操作 四.数据库类型 数字型 字符串型 日 ...

  3. NGUI学习笔记汇总

    NGUI学习笔记汇总,适用于NGUI2.x,NGUI3.x 一.NGUI的直接用法 1. Attach a Collider:表示为NGUI的某些物体添加碰撞器,如果界面是用NGUI做的,只能这样添加 ...

  4. 读书笔记汇总 --- 用Python写网络爬虫

    本系列记录并分享:学习利用Python写网络爬虫的过程. 书目信息 Link 书名: 用Python写网络爬虫 作者: [澳]理查德 劳森(Richard Lawson) 原版名称: web scra ...

  5. ST官方翻译的中文应用笔记汇总

    ST官方翻译的中文应用笔记汇总 http://www.51hei.com/stm32/3382.html 官方中文AN:AN3116:STM32? 的 ADC 模式及其应用AN1015:用于提高微控制 ...

  6. Jquery笔记和ajax笔记

    Jquery笔记:jQuery是一个JavaScript函数库,专为事件处理设计 1.jQuery的引入 <script text="type/javascript" src ...

  7. Spring研磨分析、Quartz任务调度、Hibernate深入浅出系列文章笔记汇总

    Spring研磨分析.Quartz任务调度.Hibernate深入浅出系列文章笔记汇总 置顶2017年04月27日 10:46:45 阅读数:1213 这系列文章主要是对Spring.Quartz.H ...

  8. ES6 笔记汇总

    ES6 笔记汇总 二.ES6基础-let和const命令 三.变量的解构赋值 四.字符串的拓展 五.正则表达式的拓展 ...将会持续更新,敬请期待

  9. 【笔记目录2】【jessetalk 】ASP&period;NET Core快速入门&lowbar;学习笔记汇总

    当前标签: ASP.NET Core快速入门 共2页: 上一页 1 2  任务27:Middleware管道介绍 GASA 2019-02-12 20:07 阅读:15 评论:0 任务26:dotne ...

随机推荐

  1. jquery&plus;ajax跨域请求webservice

    最近几天在学习webservice...在学习的时候便想到用ajax的方式去请求webservice.. 一直在测试..如果这个被请求的webservice和自己使用的是同一个端口号.则不用考虑那aj ...

  2. TabLayout 简单使用。

    先上效果图 在使用TabLayout 之前需要导入design包. 我使用的是android studio 只要在build.gradle中加入 compile 'com.android.suppor ...

  3. 转：SVN常见问题与解决方法

    今天发现一个SVN很奇葩的问题.原来SVN提交的时候也是识别提交路径的大小写的... 发现网上有篇博客总结的挺好的.转载下来,转载出路:http://blog.csdn.net/shinn613/ar ...

  4. ASP&period;NET前端解决方案之一：Ext&period;Net入门随笔1

    最近因为公司需要,进一步研发了Ext.Net技术,这里先做一个简明的介绍,给自己和大家记录一个初步的概念. 什么是Ext Ext就是ExtJS,引用下百度的解释:“ExtJS是一种主要用于创建前端用户 ...

  5. Ruby on Rails 和 J2EE：两者能否共存？

    http://www.ibm.com/developerworks/cn/java/wa-rubyonrails/

  6. pygame系列&lowbar;百度随心听&lowbar;完美的UI设计

    这个程序的灵感来自于百度随心听 下面是我的程序截图: 说明: 动作按钮全部是画出来的,没有用到任何图片 用到图片的只有:背景,歌手图片,作者图片 代码正在调试中.... 如果你鼠标移动到黄色小圆里面, ...

  7. &lbrack;terry笔记&rsqb;RMAN综合学习之配置

    ［terry笔记］RMAN综合学习之备份http://www.cnblogs.com/kkterry/p/3308405.html ［terry笔记］RMAN综合学习之恢复 http://www.cn ...

  8. ThinkPHP3&period;2&period;3新特性之：数据库设置

    ThinkPHP3.2.3版本数据库驱动采用PDO完全重写,配置和使用上面也比之前版本更加灵活和强大,我们来了解下如何使用. 首先,3.2.3的数据库配置信息有所调整,完整的数据库设置包括: /* 数 ...

  9. Nodejs in Visual Studio Code 09&period;企业网与CNPM

    1.开始 CNPM : https://npm.taobao.org/ 2.企业网HTTP代理上网 平时办公在一个大企业网(10.*.*.*)中,使用HTTP代理上网,发现npm命令无法执行. 解决方 ...

  10. OSG多屏显示问题

    // testMultiScreen.cpp : Defines the entry point for the console application.// #include "stdaf ...

相关文章