Ajax 通信技术--hidden Frame GET 请求 和 POST 请求

hidden frame技术有四个步骤:

 

1.用户通过可见的frame与页面交互,而意识不到hidden frame,当用户向服务器请求数据时,javascript 函数调用hidden frame,这个调用重定向hidden frame到另外一个页面,复杂一点posting form data.

2.向服务器传递数据。

3.接受服务器的回应。因为你和frames打交道,所以这个回应是另一个页面,这个页面会包括请求返回的数据,和一些javascript去把数据转化为可见得frame。

4.在返回的页面里完全loaded之后,调用在可见的frame里的函数,去转化数据为可见的frame,当数据在可见的frame里面,其的显示形式由frame决定。

 

hidden Frame POST 请求和GET请求的不同:GET可以在URL中附加512kb的查询字符串。POST请求可以发送2GB的信息

 

hidden Frame POST 请求 例子:

 数据库创建:

CREATE TABLE Customer(
    CustomerId INT(11) NOT NULL AUTO_INCREMENT,
    Name VARCHAR(255) NOT NULL DEFAULT '',
    Address VARCHAR(255) NOT NULL DEFAULT '',
    City VARCHAR(255) NOT NULL DEFAULT '',
    State VARCHAR(255) NOT NULL DEFAULT '',
    Zip VARCHAR(255) NOT NULL DEFAULT '',
    Phone VARCHAR(255) NOT NULL DEFAULT '',
    Email VARCHAR(255) NOT NULL DEFAULT '',
    PRIMARY KEY(CustomerId)
    )ENGIN=MYISAM COMMENT='Sample Customer Data';
View Code

 

 HiddenFrameGetExample.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hidden Frame POST Example</title>
</head>
<frameset rows="100%,0" style="border: 0px">
    <frame name="displayFrame" src="DataEntry.php" noresize="noresize"  style="border: 0px" />
    <frame name="hiddenFrame" src="about:blank" noresize="noresize" style="border: 0px" />
</frameset>
</html>

HiddenFrameGetExample.php  

<frameset rows="100%,0" style="border: 0px">
<frame name="displayFrame" src="DataEntry.php" noresize="noresize" style="border: 0px" />
<frame name="hiddenFrame" src="about:blank" noresize="noresize" style="border: 0px" />
</frameset>

使用隐藏框架技术,使用HTML的<frameset>标签,rows="100%,0",浏览器就知道不要显示第二个<frame>,noresize="noresize"使得用户不能随便改变frame,看见隐藏的frame,隐藏的frame意味着永远不是显示界面。diaplayFrame框架里面显示用户输入数据表格,hiddenFrame使得form的submit动作跳转到这个框架里面,而不是另外的页面。

DataEntry.php

<form method="post" action="SaveCustomer.php" target="hiddenFrame">
<p>Enter customer information to be saved:</p>
<p>Customer Name: <input type="text" name="txtName" value="" /><br />
Address: <input type="text" name="txtAddress" value="" /><br />
City: <input type="text" name="txtCity" value="" /><br />
State: <input type="text" name="txtState" value="" /><br />
Zip Code: <input type="text" name="txtZipCode" value="" /><br />
Phone: <input type="text" name="txtPhone" value="" /><br />
E-mail: <input type="text" name="txtEmail" value="" /></p>
<p><input type="submit" value="Save Customer Info" /></p>
</form>
<div id="divStatus"></div>

 

使用POST的方式将form的数据传到后端method里面处理数据。还有一种经典的方式,就是form的submit使得页面导航到新的URL.这是完全和Aajx的方式违背的。这里有一个小技巧,使得绕过form这种submit的行为,就是这一个target参数。<a>也有一个target参数,这个参数,的作用是,定位<a>导航到的位置。同样的,这个参数在<form>里面也告诉form页面保持不变,当submit的动作发生时,form的元素被发送到hiddenFrame,而不是跳转到另外页面。

 

DataEntry.php

<script type="text/javascript">
//<![CDATA[
function saveResult(sMessage) {
var divStatus = document.getElementById("divStatus");
divStatus.innerHTML = "Request completed: " + sMessage;
}
//]]>
</script>

在这个主页里面只有一个函数,saveResult(),这个函数被调用是,在hidden frame 里面在SaveCustomer.php保存用户数据返回后。hidden frame会向这个函数发送一个信息,这是信息说明的是用户数据保存成功,或者是保存数据发生的错误信息。

 

SaveCustomer.php

<?php
//get information
$sName = mysql_real_escape_string($_POST["txtName"]);
$sAddress = mysql_real_escape_string($_POST["txtAddress"]);
$sCity = mysql_real_escape_string($_POST["txtCity"]);
$sState = mysql_real_escape_string($_POST["txtState"]);
$sZipCode = mysql_real_escape_string($_POST["txtZipCode"]);
$sPhone = mysql_real_escape_string($_POST["txtPhone"]);
$sEmail = mysql_real_escape_string($_POST["txtEmail"]);

//status message
$sStatus = "";

//database information
$sDBServer = "127.0.0.1";
$sDBName = "test";
$sDBUsername = "your_db_username";
$sDBPassword = "your_db_password";

//create the SQL query string
$sSQL = "Insert into Customers(Name,Address,City,State,Zip,Phone,`Email`) ".
" values ('$sName','$sAddress','$sCity','$sState', '$sZipCode'".
", '$sPhone', '$sEmail')";

$oLink = mysql_connect($sDBServer);
@mysql_select_db($sDBName) or $sStatus = "Unable to open database";

if ($sStatus == "") {
if(mysql_query($sSQL)) {
$sStatus = "Added customer; customer ID is ".mysql_insert_id();
} else {
$sStatus = "An error occurred while inserting; customer not saved.";
}
}

mysql_close($oLink);
?>

 

posted @ 2014-08-02 21:47  495157297  阅读(517)  评论(0编辑  收藏  举报