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服务器进行通信。
在下面的文本框中输入名字：
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,iVBORw0KGgoAAAANSUhEUgAAA2IAAACnCAIAAAD8AHhfAAAZQUlEQVR4nO3cy4GjvBKGYYc0G0KZPWFMBMQwMTiBycK7Pw6HcM6CdqFLSQhcgJDeZ9Vu37BKSB8I+/E/AAAAIPK4egMAAABQI2IiAAAAFMREAAAAKIiJAAAAUBATAQAAoNBj4hMAAADdICYCAABAsS0m/ndbt954bEKte0CVBU0BMc/rV28FGkFMRJuodQ+osqApIIiJMERMRJuodQ+osqApIIiJMERMRJuodQ+osqApIIiJMERMRJuodQ+osqApIIiJMERMRJuodQ+osqApIIiJMERMRJuodQ+osqApIIiJMERMRJuodQ+osqApIIiJMERMRJuodQ+osqApIIiJMGQUE//+fjwej8fj99/0nb/+/Dv606zZvOdkPxdqxijZA6osaAoI65j4788vJsJ+ERP/+2/ZfM+vP/++iInxfvX5j9MSP/+qoGXas1ZrkwGPKl9sZS5UqtGsRFN8mmBpgPg/RyNknC0XE4PZrqgbUMGunbHofJuYaLmFuQAh/yVAHOfymEiVT5AfjtxiNN/8xESIgrOJm7oBFeyaUUyMepE7QNczTm+Oid7nWm74E3/4WeV+91/Bw+an5l/H2Z5lA+VQ0Nskf9P9F6qg3a+wPSZm2l+5lyrXIDsXBqdNwoorawhOK96ueb+KiX5bOC31fZ9Ud5Pcm4aTSXjbHa2jMVkrdId2xsRkN6Cdu3ZITAxm4hufTVRjojcMhk/9+zvMlMFr/frz5/fnjvR5pmAfXnbf33/dW8oWzDf95/W4P393NlFvf6pcm9xcKE32VzkVkh+j7ti8u2Oiehjjt8SXfVI5F5V7U//hy7CrvFhwVQEnvX7siInZbhBevVHPnI4THBATo3Gpni615drEeNjRxqDkuJQJEP/mv+QPtWXU4J0dRt1tDNu+w2Hzy0Xn1crHj3L/Q5XPkZkLndZMLnboY9Q9m3clJiZGOOXTeW1h0ifj3aT8TcOrODKbEG1uv7bHxHxFogrS0D05ICZG83A9Pcpq0Tl+ajj2ZgPE51m//4QBIh7TNwYI9cs4VbT92XbFxJX2p8q1Sc6F/iQYxsL8GHXP5t15NjHeH7z/mPTJVMhIvanzrvNTf//9+/vhncL0r/slJgY2x8SViiQPtCo/doKJ42KidsnVmZ9Mc0BMTF17kw8QmUvY1MO30sFau96kU5tjYq79qXKlUlVOnUNLXESgnr+6WfNeGxOzjbY5Ji5h0I+Hn2s5iq5b7BkxEYYOXHTu42xi6mVWAoR39K094bvlSPbezTEx2/7KC1DlGuzMRvkx6p7Nu/faRNtFZ7XRti46/+ftOPHiczqt1DPXXGtDTAyD+ed+Fp3xccRXWBIrPBX0KPuY+PkuQ/Tg+DXDi3eWcU8bkFOLMPEb6bu7v0Pfa8IzsflsYqb9qXKt8sORu0MXrUJnF6Urb95Dv8LyZZ+MB9jsm7qvFr23t+8SE3XrMTGqVrYia6VG0w76QRxtzaeCXfeQmJj8kM59zlnWeKiM9sXH4/H49WvXeabodWpp+tNt+in1+ISF1/5UuVZqlfVJTNorOJObaMLbNe/RP4jjPnV7nwx2k/ybei8VH3EpVSIm+lIx0W/yqJmSFdF2FjJiN874ee163HrjsQm17oFVle/xZeYsOjxEwaIzUIqYiDZR6x7YVPmeFyMG6PAQxEQYIiaiTdS6B7urfLs15VV0eAhiIgwRE9Emat0DqixoCghiIgwRE9Emat0DqixoCghiIgwRE9Emat0DqixoCghiIgwRE9Emat0DqixoCghiIgwRE9Emat0DqixoCghiIgwRE9Emat0DqixoCghiIgztiYkAAADoxLaY+L6tW288NqHWPaDKgqaAmOf1q7cCjSAmok3UugdUWdAUEMREGCImok3UugdUWdAUEMREGCImok3UugdUWdAUEMREGCImok3UugdUWdAUEMREGCImok3UugdUWdAUEMREGCImok3UugdUWdAUEMREGCImok3UugdUWdAUEMREGCImok3UugdUWdAUEMREGCImok3H1Po1DY/Z+Ixv4mzs0eLMpniO9PiqERNhyDwmvqah3gEktfHP8eFa3f6qPyTe7/farLnku9kwvXIP/bnb+TO6GdyHUxTMha9pUOvb2k6cbQq/v3/dT4mJlcvExHDoM+gOaJxhTFyyVrUDSC4mykY/x9WP0NoM06J0R53HSbd+c9ddr+hz9IbU4CbOV3LUGs2ENxipdkg2RdTfC0a4tfciJtZtJSa6u8NrGigmsszPJlY9gBTFRH+/cU40OqeUtHOP8SPfnyShTlY4VPbMsdJDn+PPP8OSPX+GVe+U8zBN/s2XM/rO3Wl5PGU/TH44mguROM9b9Ui1Q67Dhx/fHeK02KCMad5ek+/h7ggZvHNq8IStDTHR7yDqhKVMbd6TkssqRXPiNMYH7QyZVSEmvt9aTJy7aXSW0RlZ/Q+ZeuS8n9Dpz5eo9foYFJYsyn/eI+Vm8LDlHlajD5QZjqTSfcdE/WM6OTEfE73ZP5j+1R7un5yK0kSUNXd+WmRtiIl+GeIJKzG1BdOh1zfys2f0Fv6YTLeoDzHx/fY3ehkO0+NnGBPTj2Rd8ip6rQtWWMKS7YuJzsPIiccpmQu7jompDr9MzbmYGD3Fmen1Hh61qhostBeBoU3XJgaRLTX6yW359p50oGGawnC4ZU50cyK9okLExPc7XFtRzpgHiyThSJp+JDHxKkWzpjdkeovO/lOIiZVSq6wUmZgYProwJgahYi0mxm0t/1EXO1sqQE22LDp7fSQc/fKT4DC95pT4+jxRes+mOTHdSVADYuL7ndro9EfRYqL+SGLiVbYtOvtnSoiJd5GOiYrMdSINOGDR2b+Ot+RsIjGxDptiYnDKt7RIcuWvnEYcn4kl5/B50XD4s1EMlXUiJr7fBUOpck+46JxcqKHbX2LbV1iIifdU8uNwXZ9N1A+Myr7Cku7uLDpXziwm5q7SeY6PYRy9K7FGefrGOXG+1mtgpKwSMfH9Tm90ECle06APk+lHEhOvsvbLTclTS8TEGyEmit0/iOO1j7tzJO/I9fDMV1ji77M0VYCabIqJbn/QLxxUJ8HPWfvEza1zojYsow6H/G7irMKZcWtMfIcLWOE3wpS9xP8vMfEq235e268sMfEudsXEG4xUO3zx89rOvfPvBylj2vz7N+sxMXgz5Sq4zx3hD6HAjtlXWJSnBBeuJm+mnpiaE1s7bmuI+dnEqt1647EJte4BVRZlTVHRMQuH0MfJxMRakRLrRUxEm6h1D6iyKGyKK3Oi8zOMNeXVBt0vJnLQUDFiItpErXtAlUVxUywrgWfPy95qP6HgQHeLiRw0VI2YiDZR6x5QZUFTQNwtJqJqxES0iVr3gCoLmgKCmAhDxES0iVr3gCoLmgKCmAhDxES0iVr3gCoLmgKCmAhDxES0iVr3gCoLmgKCmAhDxES0iVr3gCoLmgKCmAhDe2IiAAAAOsHZRLSGWveAKguaAmKe16/eCjSCmIg2UeseUGVBU0AQE2GImIg2UeseUGVBU0AQE2GImIg2UeseUGVBU0AQE2GImIg2UeseUGVBU0AQE2GImIg2UeseUGVBU0AQE2GImIg2UeseUGVBU0AQE2GImIg2UeseUGVBU0AQE2GImIg2UeseUGVBU0AQE2GImIg2HVPr1zQ8ZuMzvomzsUcLmgKi25j4HBmL7dnFxOf4cNRZqdTGv6bhMUyv8hfa/AScLT9KLvlulimmU+ug7N5NusQVCubC1zSE9XWr30zNUk3xMzA7I3JVXfU1DZXOFneWiYn+RP1p+zP6RPDOZcPvjvegO1kzi4nP0anOaxqqLJZZTET10gFiDglu95zHr/UO+xy9bhLcxPnWYuInEAZlW263M61kRuZhHN0Brqrhjph4hJWYKA3+HK85p3NYF2xnf67JUYvOdVZrR0zUTzx4T/APkqoZfzuXPZhWuuZz/PnnHP6WfPH8qbVX5mGa/Jsvp0vMnX95PF3iMPnhaC6Ev3eH+3pVmekbuZg4vdwBOfjITsf+/NdL0vpJ83wnT52vDXaucfRP6tc3ZdxUaUyUMzrB8KWVZF/FdYm9TumK2XVK9675jvxGpl7fG/AbGAusHRQTKx17t8ZE/6yoM3YuTwjy8GsaGOqqkKi1NwHqTxz90SLKf94j5WY0ziYmZVjKDEdSab8A0QFsnUe02+VjYuraiejckjvbvj+P9gLkMvCpT80Mm/HOxdnEY2yKiUH3eI7eQYHXVRLDWqbiOm1QTHTF7PY494xKt4xO5+ivTzxccUxMLOgnl9gYE9MzijyBDFArvdYFl0OES8n7YmKtl4I1pmSPJiYGR7RLg2inVuOHDNMUvUbUbMkj53BKDnYFYuIRCmPiErtSg1QQp/Rhbfs+Fb9dsismtqdszi7o6lw7tO6AmKhcMl6LbTEx05X93ld8qh3nKYqJ3jdZEjMZMbFiapWVIhMT39qZI+1LBXNbOI/9ueLi80w9NOSOnP1dg5h4guKvsKjHUsEX/NZi4nrmi8QPSHdFfXsSu21yI9OvT0xcZR0Tn2PNeemAmOjcE/RtXGrbonPmhAcxsWLpmKjQp5d+YmJ8sWbms8tD5ZHj030tYmLNihedP4I8lVqcPTYmqv0gsT17YqLez4iJq0xj4lVfmypmv+i8+hRcZNtXWIiJ91RyDQxfYQk+/fK959w1GM+fb0gvZxfHMUqc3sMTy9EsOp9vf0xMj3HHLzoX5L6vFp2TObSJAeBAZjGx4qXmhf1XWIIu1sycc3/pABFcfC//Iybez/aYGJxQbue4rigmyuKb970Eb4E+WOlL3AwaLvg6Qe4rLNlvLsDG/pgYfeujICbafYUl7or57VG/wpLYyFRXJyausoqJ6jpPdY2fzbjaCpV/l3ZKIrjkobqP3K1tP6/tz3jExLvYExNTO/XNFcbEnw/v/MvfF4ILd5M38wNfqoXVKXl5KeKikS8Wnf0LqIrOJgbPKtinEmOi2hVT2/P2O6F6KjuzkZkz3Agc9buJdbr1xmMTat0DqixObgpOAtYsExOBrYiJaBO17gFVFsRECGIiDBET0SZq3QOqLIiJEMREGCImok3UugdUWdAUEMREGCImok3UugdUWdAUEMREGCImok3UugdUWdAUEMREGCImok3UugdUWdAUEMREGCImok3UugdUWdAUEMREGCImok3UugdUWdAUEMREGNoTEwEAANAJziaiNdS6B1RZ0BQQ87x+9VagEcREtIla94AqC5oCgpgIQ8REtIla94AqC5oCgpgIQ8REtIla94AqC5oCgpgIQ8REtIla94AqC5oCgpgIQ8REtIla94AqC5oCgpgIQ8REtIla94AqC5oCgpgIQ8REtIla94AqC5oCgpgIQ8REtIla94AqC5oCgpgIQ8TEKz3Hx2Osa5OaUVutcQSqLM5sCgauylnGxNc0PIbpZfNi5W85G5/xTZzNLiY+x4erynqmNn7Z9nN3B0bb42RGyWXUqbq3Yt2+4ci9s5nSZ2OB3+W/HuUYuCqXiYmbJ2qJiZZ5Mdchg/fxbl6QWWEXE1/T4HS451jlAJw/wDq/BzLaHic7Svplfo5U4aa2D0evaXj4s04jxU8ObvOMbDo6M3BVbiUmSu1KuoL5vLjWIZ+j937BTZzvqEXnOseRTTHRPd6JYoV+JOTcsfx3bgr1hGXmLnwpUevnmGlm7079INavvTe0pUuZ7DCpPkbHKLR5OIrmvGZOT+RiQfgB3XQcNsBrGqRf7+rtmZEzOpFf3xzRhtKY6B8n6YVLnE1UT8mrM6CyAekO6XW5YZr8m6+92zBnzc8HbGKHP9ExMbHWY/TymOh/ArdjBwF4OW0RHaU5/9fvCe5qZsKqQqLW+a7pFGceUZyqz38+R/9MlNst9FImO0y6j9ExSm0ejuK2rPOIdrvMcVH88ZwmycfErb0916uDfa+Vhq/Rppg4FyhZOC0mBnUdf8bGxDyXeX93Ox7aTBrc3LsNc49lFN3HOCZ+0nqle39xTIy6svwjNWWnB9vwtdJvQxwwtLIGpx/xeoPmME1LOFT7dDAMqaVMFjXdx+gYxbYPR+EyW62HtJvpTZH6eMscm4uJ0VNW+2emV4d3EROPUxgTnexfMOXlL1Is7EfrHbIsJm7cBlauv3HQonN2ae86pTEx7oLBQVccMoILg53ZiZh4ifWOqlXyU4LXNAzT6zO4eCNesG62OnEmOkyuj9ExSu0ajvx1rYGYmJneN/b2TK+O7iImHqf4Kyzu8tla4bwrb6LKpWdAj1VM3LgNxMRvHHVtYp3H6BYx0fmH2w/TYx4x8RLlvwfh9dW5JD8p8f3z7ZZljPHPRW05/xd2GGKihe+Ho2ba9oBF5+29nZhYh+JF5w+bmFhSTqNF543bQEz8xpExsb6yGCw6Ry/5c0d6IsqstZAGjpOaNae4gcPrWYZxHJw5dBzH9ePc4lLKA1l0NvD1cFTpuscO9l9h2dPbWXSuwuaYaLPoXJwTcx3yy0Xn5Czcxm5+CauYKKdfPreqHHzXf1rMu2hDu5436G7BAOmv1mijY/RNBdLAMTInV+Jr0+JVNq8j6FOq91LJUqY7TLKP0TGKfTcc1TpO7bL7B3GSnXpHb1/t1f73WYiJB9keE9OF05JZ8usj2gyovlOmQxbFxI3bQEz8huXvJsYXBNRG3fjleobkKmHywqbgOX4juCs3+hNIA8dJHxKEF7AEfTU4ItVufp5XfH6lpMPQMXbYMxwlLha9uy9+Xtvr1O61idt7e/hmyTF1/q2TOueJ+9sRE9+pwiVO4LnjWuLC7Ux1cx2yMCZu2gZi4jeOWnSu0yUbz9rKJW7dUVGIKouypqjoiIOZ+ziZmAhsRUw8/k2JiVe4dUdFIaosbnDVuPMzjDXl1QYRE2GImHj8mxITr3DrjopCVFkUN8WyKHd2TPN/iYiMeBxiIgwRE9Emat0DqixoCghiIgwRE9Emat0DqixoCghiIgwRE9Emat0DqixoCghiIgwRE9Emat0DqixoCghiIgwRE9Emat0DqixoCghiIgwRE9Emat0DqixoCghiIgztiYkAAADoBGcT0Rpq3QOqLGgKiHlev3or0AhiItpErXtAlQVNAUFMhCFiItpErXtAlQVNAUFMhCFiItpErXtAlQVNAUFMhCFiItpErXtAlQVNAUFMhCFiItpErXtAlQVNAUFMhCFiItpErXtAlQVNAUFMhCFiItpErXtAlQVNAUFMhCFiItpErXtAlQVNAUFMhCFiYoHXNDyG6WW9NTjSrTsqClFlcWZTPMfHY6Tl67U/JjLZIXJETHxNw6POnpbf+Nc0PFzyEdhzbihba7/Ul9eWDrbXF8PRaxqaijpndnhiYuUyMfE5erPcTxllCCobi1rbeZBlHhM/41GVs1564+fNdjv+vDeNzzez+C0lax2V+jk+mPRuatdwtEyULVX9zA5PTKzcSkyU2sVdgZiIiHFMnLtgtbEqe4Cl9PrnqMRE52jM/+f4XO5yPn7mLhwnV+uwBK9piA+rnfs+XcM/EI9G1+RB+uQVP04pzns+x8cwvYJ0o3Y5vNdiYnY4ai3qnNnh82Oauy8E75zYTWCsNCZKT0icTVRLSRF7YxkTZTy6W0zUBlKXP4v7h2I/N5xzj++gATJ34TiZWsfDmjNt5mdNf6j83HJnXf89/DM5c1f4PGt5WNDB/N6Y6nJ4Z2Pi2nDUWlOe2eEzY5q/L3hDa3o3gbFNMXGYXmpMXCklteuGWUx0h4pqo5C+8cHopT9AnXCWnSUY8twHZu7CcbbVehkDc7Nm9BS1+GFM9I/NtVvR2UR/g4s2p09fDEetpZQTO3xmTItatWg3gbHCmLhkf2WOy5SSYagvNjExGIuqTUJFI6l3St1fdA6u/nXOuBMTa3PMrBmst+iXrlrGxHSXwztR5bLhqLWUcl6Hz4xpcVunvxvRWgFqUvwVluhYKvNdluBEI7XrhmFMVNTWkbYtOssw5sVE/TMRE2tzwBqcfwlr3D2U9zCJibXtRhX5YjhqrWXP6/DExOoVLzp/EBORdsjvJlabhLZ9hSXOAenlaWJibeyv6A8Ked6iMwNy0hfDUWsp5cQOz6Jz7QxiIovO+CAm/twzZk43hN8w8JZkWHSu0+7fB/EK5PaL5B3KhfpmMTHd5fAmJjrO7vCJMS3zvYf0bgJjFjExV8rm9h7kEBMX0VqV+k2+4GHr4yYx8RJf/Nqwc+/8cyreFd+fO7y6OvfMv39jFxOjzWV0XuwajsLrPdvYHc/s8PkxzX2zeNlS201gzCQmvnOldPYiiti6Q2JitW698dikrNaHhHY16uEI7NHiwg6/D7vJcTIxEdiKmIg2FdbaZtp0fl+upom4fezR4tQOvw+7yVmIiTBETESbimu9rKvsn7W8ZUwmv/OwR4tTO/w+7CZnISbCEDERbaLWPaDKgqaAICbCEDERbaLWPaDKgqaAICbCEDERbaLWPaDKgqaAICbCEDERbaLWPaDKgqaAICbCEDERbaLWPaDKgqaAICbCEDERbaLWPaDKgqaAICbC0J6YCAAAgE4QEwEAAKDYEBMBAADQOWIiAAAAFMREAAAAKIiJAAAAUBATAQAAoCAmAgAAQEFMBAAAgIKYCAAAAMX/AelIWS/kV2HaAAAAAElFTkSuQmCC" 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> <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笔记汇总的更多相关文章
- 读书笔记汇总 - SQL必知必会（第4版）
本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...
- MySQL笔记汇总
[目录] MySQL笔记汇总 一.mysql简介 数据简介 结构化查询语言 二.mysql命令行操作 三.数据库(表)更改 表相关 字段相关 索引相关 表引擎操作 四.数据库类型 数字型 字符串型 日 ...
- NGUI学习笔记汇总
NGUI学习笔记汇总,适用于NGUI2.x,NGUI3.x 一.NGUI的直接用法 1. Attach a Collider:表示为NGUI的某些物体添加碰撞器,如果界面是用NGUI做的,只能这样添加 ...
- 读书笔记汇总 --- 用Python写网络爬虫
本系列记录并分享:学习利用Python写网络爬虫的过程. 书目信息 Link 书名: 用Python写网络爬虫 作者: [澳]理查德 劳森(Richard Lawson) 原版名称: web scra ...
- ST官方翻译的中文应用笔记汇总
ST官方翻译的中文应用笔记汇总 http://www.51hei.com/stm32/3382.html 官方中文AN:AN3116:STM32? 的 ADC 模式及其应用AN1015:用于提高微控制 ...
- Jquery笔记和ajax笔记
Jquery笔记:jQuery是一个JavaScript函数库,专为事件处理设计 1.jQuery的引入 <script text="type/javascript" src ...
- Spring研磨分析、Quartz任务调度、Hibernate深入浅出系列文章笔记汇总
Spring研磨分析.Quartz任务调度.Hibernate深入浅出系列文章笔记汇总 置顶2017年04月27日 10:46:45 阅读数:1213 这系列文章主要是对Spring.Quartz.H ...
- ES6 笔记汇总
ES6 笔记汇总 二.ES6基础-let和const命令 三.变量的解构赋值 四.字符串的拓展 五.正则表达式的拓展 ...将会持续更新,敬请期待
- 【笔记目录2】【jessetalk 】ASP.NET Core快速入门_学习笔记汇总
当前标签: ASP.NET Core快速入门 共2页: 上一页 1 2 任务27:Middleware管道介绍 GASA 2019-02-12 20:07 阅读:15 评论:0 任务26:dotne ...
随机推荐
- JAVA中继承时方法的重载(overload)与重写/覆写(override)
JAVA继承时方法的重载(overload)与重写/覆写(override) 重载-Override 函数的方法参数个数或类型不一致,称为方法的重载. 从含义上说,只要求参数的个数或参数的类型不一致就 ...
- CodeForces 602E【概率DP】【树状数组优化】
题意:有n个人进行m次比赛,每次比赛有一个排名,最后的排名是把所有排名都加起来然后找到比自己的分数绝对小的人数加一就是最终排名. 给了其中一个人的所有比赛的名次.求这个人最终排名的期望. 思路: 渣渣 ...
- U-boot 之TFTP服务器配置
一.PC端配置1.关闭防火墙 [root@gliethttp root]# /etc/init.d/iptables stop2.使用setup启动tftp [root@gliethttp roo ...
- 业务中Spring使用
不管是MVC框架还是DAO框架,在业务场景中能够通用的个人觉得AOP是一个重点,看是不是可以合理使用,其他的框架都是基础框架 ================================== 第一 ...
- 【LOB】使用USER_LOBS视图获得当前用户包含LOB字段的表
包含LOB类型字段的表往往需要特殊关照,如何快速的获得包含LOB对象的数据库表?使用DBA_LOBS.ALL_LOBS和USER_LOBS视图可以很方便地获得包含BLOB或CLOB字段的表. 简单看一 ...
- windows常用运行命令收集（持续更新）
快捷键打开运行窗口:Windows + R > calc(计算器) > gpedit.msc(本地组策略编辑器) > regedit(注册表) > mstsc(远程桌面) &g ...
- 初探接口测试框架--python系列7
点击标题下「蓝色微信名」可快速关注 坚持的是分享,搬运的是知识,图的是大家的进步,没有收费的培训,没有虚度的吹水,喜欢就关注.转发(免费帮助更多伙伴)等来交流,想了解的知识请留言,给你带来更多价值,是 ...
- python分析log
最近做的一个项目,系统log下会生成如下的log(部分): [-- ::] Processing File transfer configured from ship to shore.... [-- ...
- DWR基本配置
DWR——Direct Web Remoter Servlet 供给那些想要以一种简单的方式使用Ajax和XMLHttpRequest的开发者.它具有一套JavaScript功能集,它们把从HTML页 ...
- 【python】基础
[字符串]前后引号必须要匹配,相关函数int(),float(),str(),repr(),format(),还有切片运算符 a = 'text' 单引号指定的字符串必须在一个逻辑 ...