《AJAX高级程序设计》读书笔记(一)
在ajax之前，用的是隐藏帧技术，即hidden frame，当页面数据回发时，可将数据传给hidden frame，然后由hidden frame提交，再将服务器返回给hidden frame的数据传到当前页面来。
隐藏帧GET请求
数据库操作
1 CREATE TABLE `customers` (
2 `customerid` int(11) unsigned NOT NULL auto_increment,
3 `name` varchar(255) NOT NULL,
4 `address` varchar(255) NOT NULL,
5 PRIMARY KEY (`customerid`)
6 ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;
7
8 INSERT INTO `customers` VALUES (1, 'name1', 'address1');
9 INSERT INTO `customers` VALUES (2, 'name2', 'address2');
ajax.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <HTML>
3 <HEAD>
4 <TITLE>隐藏帧</TITLE>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 </HEAD>
7 <frameset rows="100%,0">
8 <frame name="displayFrame" src="DataDisplay.php" />
9 <frame name="hiddenFrame" src="about:blank" />
10 </frameset>
11 </HTML>
DataDisplay.php
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <HTML>
3 <HEAD>
4 <TITLE> 显示顾客信息 </TITLE>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 </HEAD>
7 <BODY>
8 <p>输入ID查找顾客信息:</p>
9 <p>顾客ID：<input type="text" id="txtCustomerId" value="" /></p>
10 <p><input type="button" value="获取顾客信息" onclick="requestCustomerInfo()" /></p>
11 <div id="divCustomerInfo"></div>
12 <script type="text/javascript">
13 function requestCustomerInfo()
14 {
15 var cusId = document.getElementById('txtCustomerId').value;
16 top.frames['hiddenFrame'].location = 'GetCustomerInfo.php?id=' + cusId;
17 }
18 function displayCustomerInfo(text)
19 {
20 var divCustomerInfo = document.getElementById('divCustomerInfo');
21 divCustomerInfo.innerHTML = text;
22 }
23 </script>
24 </BODY>
25 </HTML>
GetCustomerInfo.php
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <HTML>
3 <HEAD>
4 <TITLE> 获取顾客信息 </TITLE>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <script type="text/javascript">
7 window.onload=function()
8 {
9 var divCustomerInfoReturn = document.getElementById('divCustomerInfoReturn');
10 top.frames['displayFrame'].displayCustomerInfo(divCustomerInfoReturn.innerHTML);
11 };
12 </script>
13 <?php
14 $cid = $_GET['id'];
15 $conn = mysql_connect('localhost','root','123456789');
16 mysql_select_db('test',$conn);
17 $sql = "SELECT * FROM customers WHERE customerid = $cid";
18 $oResult = mysql_query($sql,$conn);
19 $cInfo = '';
20 while($row = mysql_fetch_array($oResult))
21 {
22 $cInfo .= "姓名：".$row['name']."<br />地址：".$row['address'];
23 }
24 mysql_close($conn);
25 ?>
26 </HEAD>
27 <BODY>
28 <div id="divCustomerInfoReturn">
29 <?php echo $cInfo; ?>
30 </div>
31 </BODY>
32 </HTML>
隐藏帧POST请求
adddata.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <HEAD>
4 <TITLE>隐藏帧</TITLE>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <script type="text/javascript">
7 var oIframe = null;
8 function createIframe()
9 {
10 var oIframeElement = document.createElement("iframe");
11 oIframeElement.style.display = "none";
12 oIframeElement.name = "hiddenIframe";
13 document.body.appendChild(oIframeElement);
14 oIframe = window.frames['hiddenIframe'];
15 }
16
17 function sub()
18 {
19 if(!oIframe)
20 {
21 createIframe();
22
23 }
24 oIframe.location = "ProxyForm.html";
25 }
26 function addToIframe()
27 {
28 var firstForm = document.forms['data'];
29 var secondForm = oIframe.document.forms['hiddenForm'];
30 for( var i = 0 ;i < firstForm.elements.length; i++)
31 {
32 var oField = firstForm.elements[i];
33 switch(oField.type)
34 {
35 case 'button':
36 case 'submit':
37 case 'reset':
38 break;
39 case 'checkbox':
40 case 'radio':
41 if(!oField.checked){
42 break;
43 }
44 case 'text':
45 case 'hidden':
46 case 'password':
47 var inputElement = oIframe.document.createElement('input');
48 inputElement.type = "hidden";
49 inputElement.name = oField.name;
50 inputElement.value = oField.value;
51 secondForm.appendChild(inputElement);
52 break;
53 default:break;
54 }
55 }
56
57 oIframe.document.forms['hiddenForm'].submit();
58 }
59 </script>
60 </HEAD>
61 <BODY>
62 <form action="aaaaaa" name="data" method="post">
63 <p>姓名:<input type="text" name="txtName" id="txtName" /></p>
64 <p>地址:<input type="text" name="txtAddress" id="txtAddress" /></p>
65 <p><input type="button" onclick="sub();" value="添加顾客信息" /></p>
66 </form>
67 <div id="addStatus"></div>
68 </BODY>
69 </HTML>
ProxyForm.php
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <HTML>
3 <HEAD>
4 <TITLE>隐藏帧</TITLE>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <script type="text/javascript">
7 window.onload=function(){
8 parent.addToIframe();
9 };
10 </script>
11 </HEAD>
12 <body>
13 <form name='hiddenForm' method="post" action="saveCustomer.php">
14 </form>
15 </body>
16 </HTML>
saveCustomer.php
1 <?php
2 $cInfo = "";
3 $name = $_POST['txtName'];
4 $address = $_POST['txtAddress'];
5 $conn = mysql_connect('localhost','root','123456789');
6 mysql_select_db('test',$conn);
7 $sql = "INSERT INTO customers VALUES ('','$name','$address')";
8 mysql_query($sql,$conn);
9 $insertId = mysql_insert_id($conn);
10 $cInfo = "添加顾客信息成功，返回顾客ID:$insertId";
11 ?>
12 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
13 <HTML>
14 <HEAD>
15 <TITLE> 获取顾客信息 </TITLE>
16 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
17 <script type="text/javascript">
18 window.onload=function()
19 {
20 var divCustomerInfoReturn = document.getElementById('divCustomerInfoReturn');
21 top.document.getElementById('addStatus').innerHTML = divCustomerInfoReturn.innerHTML;
22 };
23 </script>
24 </HEAD>
25
26 <BODY>
27 <div id="divCustomerInfoReturn">
28 <?php echo $cInfo; ?>
29 </div>
30 </BODY>
31 </HTML>
posted on 2010-05-21 00:04 kingQueenyun 阅读(307) 评论(0) 编辑 收藏 举报
