《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 ' );

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 >

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 >

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请求

 

 

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 >

 

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 >

 

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 >