zoukankan      html  css  js  c++  java

  • PHP和AJAX笔记汇总

    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服务器进行通信。
    在下面的文本框中输入名字：


    这个例子包括三张页面：
    一个简单的 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


    本例包括三张页面：
    一个简单 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>元素。
    在下拉列表中选择一个名字

    此列由四个元素组成：
        MySQL 数据库
        简单的 HTML 表单
        JavaScript
        PHP 页面
        
    数据库
    将在本例中使用的数据库看起来类似这样：


    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文档输出数据
  • 相关阅读:
    Oracle EBS-SQL (PO-3):检查期间手工下达的采购订单记录数.sql
    Oracle EBS-SQL (PO-2):检查当月到货补单的记录数.sql
    Oracle EBS-SQL (PO-1):检查供货比例异常.sql
    Oracle EBS-SQL (MRP-2):检查期间主计划录入记录数.sql
    Oracle EBS-SQL (MRP-1):检查期间内计划完成的任务.sql
    Oracle EBS-SQL (INV-3):检查仓库库存价值明细.sql
    Oracle EBS-SQL (INV-2):检查帐户别名发放记录.sql
    Oracle EBS-SQL (INV-1):检查物料成本为0并且物料状态不是'NEW'的物料.sql
    Oracle EBS-SQL (BOM-13):检查未定义库存分的物料类.sql
    Oracle EBS-SQL (BOM-12):BOM清单查询
  • 原文地址：https://www.cnblogs.com/zxx193/p/3558830.html
Copyright © 2011-2022 走看看