head rush ajax chapter1 code
board.html :
<html>
<head>
<title>Boards 'R' Us</title>
<link rel="stylesheet" type="text/css" href="boards.css" />
<script type="text/javascript" src="text-utils.js">有个空格 </script>
<script language="javascript" type="text/javascript">
var request = null;
function createRequest() {
try {
request = new XMLHttpRequest(); //创建请求对象
} catch (trymicrosoft) {
try {//为IE创建请求对象
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {//如果创建失败，使null设为null
request = null;
}
}
}
if (request == null)//检测是否创建成功
alert("Error creating request object!");
}
//异步应用程序时JavaScript对象做出请求，而不是提交表单
function getBoardsSold() {//获取滑板销售数据
createRequest(); //调用函数创建请求对象
var url = "getUpdatedBoardSales-ajax.php";//服务器上处理请求的页面
url = url + "?dummy=" + new Date().getTime();//防止浏览器缓存
request.open("GET", url, true);//初始化链接，true保证请求时异步的
//我们必须在发出请求之前告诉浏览器怎样处理服务器对此请求的响应
request.onreadystatechange = updatePage; //每当请求状态改变时，浏览器要执行的函数
request.send(null); //发出请求，null表示没有数据随着这个请求一起被送出
}
//用按钮<input value="Show Me the Money" type="button" onClick="getBoardsSold();" />向服务器提交请求
function updatePage() {
if (request.readyState == 4) {//当请求的状态为服务器完成请求
if(request.status==200){//如果一切顺利服务器送出200，作为状态码
var newTotal = request.responseText;//获得响应的数据
}else{
alert("Error! request status is "+ request.status)
}
var boardsSoldEl = document.getElementById("boards-sold");//获得相应的html元素
var cashEl = document.getElementById("cash");
replaceText(boardsSoldEl, newTotal);//用新值替换旧值
/* Figure out how much cash Katie has made */
var priceEl = document.getElementById("price");
var price = getText(priceEl);//得到该元素内的文字
var costEl = document.getElementById("cost");
var cost = getText(costEl);
var cashPerBoard = price - cost;
var cash = cashPerBoard * newTotal;
/* Update the cash for the slopes on the form */
cash = Math.round(cash * 100) / 100;//保留小数点后面2位小数
replaceText(cashEl, cash);
}
}
<body>
<h1>Boards 'R' Us :: Custom Boards Report</h1>
<div id="boards">
<table>
<tr><th>Snowboards Sold</th>
<td><span id="boards-sold">1012</span></td></tr>
<tr><th>What I Sell 'em For</th>
<td>$<span id="price">249.95</span></td></tr>
<tr><th>What it Costs Me</th>
<td>$<span id="cost">84.22</span></td></tr>
</table>
<h2>Cash for the Slopes:
$<span id="cash">167718.76</span></h2>
<form method="GET">
<input value="Show Me the Money" type="button"
onClick="getBoardsSold();" />
</form>
</div>
</body>
</html>
text-utils.js
function replaceText(el, text) {
if (el != null) {
clearText(el);
var newNode = document.createTextNode(text);
el.appendChild(newNode);
}
}
function clearText(el) {
if (el != null) {
if (el.childNodes) {
for (var i = 0; i < el.childNodes.length; i++) {
var childNode = el.childNodes[i];
el.removeChild(childNode);
}
}
}
}
function getText(el) {
var text = "";
if (el != null) {
if (el.childNodes) {
for (var i = 0; i < el.childNodes.length; i++) {
var childNode = el.childNodes[i];
if (childNode.nodeValue != null) {
text = text + childNode.nodeValue;
}
}
}
}
return text;
}
<html>
<head>
<title>Boards 'R' Us</title>
<link rel="stylesheet" type="text/css" href="boards.css" />
<script type="text/javascript" src="text-utils.js">有个空格 </script>
<script language="javascript" type="text/javascript">
var request = null;
function createRequest() {
try {
request = new XMLHttpRequest(); //创建请求对象
} catch (trymicrosoft) {
try {//为IE创建请求对象
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {//如果创建失败，使null设为null
request = null;
}
}
}
if (request == null)//检测是否创建成功
alert("Error creating request object!");
}
//异步应用程序时JavaScript对象做出请求，而不是提交表单
function getBoardsSold() {//获取滑板销售数据
createRequest(); //调用函数创建请求对象
var url = "getUpdatedBoardSales-ajax.php";//服务器上处理请求的页面
url = url + "?dummy=" + new Date().getTime();//防止浏览器缓存
request.open("GET", url, true);//初始化链接，true保证请求时异步的
//我们必须在发出请求之前告诉浏览器怎样处理服务器对此请求的响应
request.onreadystatechange = updatePage; //每当请求状态改变时，浏览器要执行的函数
request.send(null); //发出请求，null表示没有数据随着这个请求一起被送出
}
//用按钮<input value="Show Me the Money" type="button" onClick="getBoardsSold();" />向服务器提交请求
function updatePage() {
if (request.readyState == 4) {//当请求的状态为服务器完成请求
if(request.status==200){//如果一切顺利服务器送出200，作为状态码
var newTotal = request.responseText;//获得响应的数据
}else{
alert("Error! request status is "+ request.status)
}
var boardsSoldEl = document.getElementById("boards-sold");//获得相应的html元素
var cashEl = document.getElementById("cash");
replaceText(boardsSoldEl, newTotal);//用新值替换旧值
/* Figure out how much cash Katie has made */
var priceEl = document.getElementById("price");
var price = getText(priceEl);//得到该元素内的文字
var costEl = document.getElementById("cost");
var cost = getText(costEl);
var cashPerBoard = price - cost;
var cash = cashPerBoard * newTotal;
/* Update the cash for the slopes on the form */
cash = Math.round(cash * 100) / 100;//保留小数点后面2位小数
replaceText(cashEl, cash);
}
}
<body>
<h1>Boards 'R' Us :: Custom Boards Report</h1>
<div id="boards">
<table>
<tr><th>Snowboards Sold</th>
<td><span id="boards-sold">1012</span></td></tr>
<tr><th>What I Sell 'em For</th>
<td>$<span id="price">249.95</span></td></tr>
<tr><th>What it Costs Me</th>
<td>$<span id="cost">84.22</span></td></tr>
</table>
<h2>Cash for the Slopes:
$<span id="cash">167718.76</span></h2>
<form method="GET">
<input value="Show Me the Money" type="button"
onClick="getBoardsSold();" />
</form>
</div>
</body>
</html>
text-utils.js
function replaceText(el, text) {
if (el != null) {
clearText(el);
var newNode = document.createTextNode(text);
el.appendChild(newNode);
}
}
function clearText(el) {
if (el != null) {
if (el.childNodes) {
for (var i = 0; i < el.childNodes.length; i++) {
var childNode = el.childNodes[i];
el.removeChild(childNode);
}
}
}
}
function getText(el) {
var text = "";
if (el != null) {
if (el.childNodes) {
for (var i = 0; i < el.childNodes.length; i++) {
var childNode = el.childNodes[i];
if (childNode.nodeValue != null) {
text = text + childNode.nodeValue;
}
}
}
}
return text;
}
