首页 > 代码库 > ajax的发展

ajax的发展

2024-10-02 23:44:02   215人阅读

 ajax(Asynchronous Javascript and XML)异步javascrip和XMl.

ajax只是一种web交互方法。在客户端(浏览器)和服务区段之间传输少量的信息。从而为用户提供及时的响应。

在传统的web应用程序中,浏览器本身负责初始化到服务区的请求,并处理来自服务器的响应。而ajax模式不同,他提供了·一个中间层里处理这种通信。ajax引擎实际上只是一个javascript对象或函数，只有当需要从服务器获取信息时才调用它。

服务器方面配置向ajax引擎返回其可用的数据，这些数据可以是纯文本,XML或者需要的任何格式。唯一的要求就是ajax可以处理这些数据。

技术分享

随着html帧的引入 早期的ajax雏形出现但是没有用到ajax对象，那就是引用帧技术了。

基本就是把连接给其他的帧，不用去打开另外的一个页面。这里最适合的就是服务器与客户端之间的通信(其实一开始对ajax的理解就是不刷新页面就可以局部的改变页面。例如地图)

这里讲引用帧的介绍了 直接贴代码了。

第一个html页面就叫a.html吧

	<frameset rows="100%,0" style="border:0px">
		<frame name="displayFrame" src="http://www.mamicode.com/DataEntry.php" noresize="noresize">
		</frame>
		<frame name="hiddenFrame" src="http://www.mamicode.com/about:blank" noresize="noresize"></frame>	
	</frameset>
	
	<script type="text/javascript">
		function requestCustomerInfo(){
			var sId=document.getElementById("txtCustomerId").value;
			top.frames["hiddenFrame"].location="getcustomerdata.php?id="+sId;
		}
		function displayCustomerInfo(sText){
			var divCustomerInfo=document.getElementById("divCustomerInfo");
			divCustomerInfo.innerHTML=sText;
		}
		
	</script>

　用帧来显示两个页面一个提供表格显示，另外一个连接服务器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Customer Account Information</title>
    <script type="text/javascript">
		//<![CDATA[
        function requestCustomerInfo() {
            var sId = document.getElementById("txtCustomerId").value;
            top.frames["hiddenFrame"].location = "GetCustomerData.php?id=" + sId;
        }
        
        function displayCustomerInfo(sText) {
            var divCustomerInfo = document.getElementById("divCustomerInfo");
            divCustomerInfo.innerHTML = sText;
        }
		//]]>
    </script>
</head>
<body>
    <p>Enter customer ID number to retrieve information:</p>
    <p>Customer ID: <input type="text" id="txtCustomerId" value="" /></p>
    <p><input type="button" value="http://www.mamicode.com/Get Customer Info" onclick="requestCustomerInfo()" /></p>
    <div id="divCustomerInfo"></div>
</body>
</html>

　　

这里的代码 top.frames["hiddenFrame"].location="getcustomerdata.php?id="+sId为隐藏帧指派url.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Get Customer Data</title>
<?php

//customer ID
$sID = $_GET["id"];//获取input值

//validation for ID
if (is_numeric($sID) { //判断是不是number

//variable to hold customer info
$sInfo = "";　　　　

//database information
$sDBServer = "your.database.server";
$sDBName = "your_db_name";
$sDBUsername = "your_db_username";
$sDBPassword = "your_db_password";

//create the SQL query string
$sQuery = "Select * from Customers where CustomerId=".$sID;

//make the database connection
$oLink = mysql_connect($sDBServer,$sDBUsername,$sDBPassword);
@mysql_select_db($sDBName) or $sInfo = "Unable to open database";

if ($sInfo == ""){
if($oResult = mysql_query($sQuery) and mysql_num_rows($oResult) > 0) {
$aValues = mysql_fetch_array($oResult,MYSQL_ASSOC);
$sInfo = $aValues[‘Name‘]."<br />".$aValues[‘Address‘]."<br />".
$aValues[‘City‘]."<br />".$aValues[‘State‘]."<br />".
$aValues[‘Zip‘]."<br /><br />Phone: ".$aValues[‘Phone‘]."<br />".
"<a href=http://www.mamicode.com/"mailto:".$aValues[‘Email‘]."\">".$aValues[‘Email‘]."</a>";
mysql_free_result($oResult);
} else {
$sInfo = "Customer with ID $sID doesn‘t exist.";
}
}

mysql_close($oLink);
} else {
$sInfo = "Invalid customer ID.";
}

?>
<script type="text/javascript">
//<![CDATA[
window.onload = function () {
var divInfoToReturn = document.getElementById("divInfoToReturn");//获取id=id="divInfoToReturn"的值作为参数传递给top.frames["displayFrame"]的displayCustomerInfo函数。
top.frames["displayFrame"].displayCustomerInfo(divInfoToReturn.innerHTML);
};
//]]>
</script>

</head>
<body>
<div id="divInfoToReturn"><?php echo $sInfo ?></div>
</body>
</html>

 

ajax的发展


联系
我们