ajax的发展
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="DataEntry.php" noresize="noresize">
</frame>
<frame name="hiddenFrame" src="about:blank" noresize="noresize"></frame>
</frameset>
用帧来显示两个页面一个提供表格显示与服务端的数据响应(requestCustomerInfo && displayCustomerInfo)，另外一个连接服务器。
<!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="Get Customer Info" onclick="requestCustomerInfo()" /></p>
<div id="divCustomerInfo"></div>
</body>
</html>
这里的代码 top.frames["hiddenFrame"].location="getcustomerdata.php?id="+sId为隐藏帧指派url.
后台php代码:
<!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"]; //validation for ID
if (is_numeric($sID) { //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=\"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");//获取div文本;作为参数传递个同一级的兄弟窗体top.frames["displayFrame"].
top.frames["displayFrame"].displayCustomerInfo(divInfoToReturn.innerHTML);
}; //]]>
</script>
</head>
<body>
<div id="divInfoToReturn"><?php echo $sInfo ?></div>//在这里添加文本。
</body>
</html>
数据库脚本
CREATE TABLE `Customers` (
`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(25) NOT NULL default '',
`Phone` varchar(25) NOT NULL default '',
`Email` varchar(255) NOT NULL default '',
PRIMARY KEY (`CustomerId`)
)
data:
INSERT INTO Customers VALUES (1, 'Michael Smith', '123 Somewhere Road', 'Beverly Hills', 'California', '90210', '(555) 555-1234', 'michael@somewhere.com');
INSERT INTO Customers VALUES (2, 'Matthew Johnson', '1234 Somewhere Else Street', 'Elsewhere', 'Confusion', '00000', '(555) 555-2345', 'johnboy@neato.net');
INSERT INTO Customers VALUES (3, 'Cindy Benjamin', '1313 Mockingbird Lane', 'Somewhere', 'Montana', '00000', '(555) 555-9876', 'cindybean@mcok.net');
INSERT INTO Customers VALUES (4, 'Mary Klein', '10 Highland Avenue', 'Salem', 'Massachusetts', '01970', '(555) 555-4920', 'mary@klein.net');
II:继续说隐藏帧技术：
上面的是get请求，现在我们来看一下post请求方式（比较贴近ajax的页面无需刷新）
主页面基相同：
<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>
//主页面pre
//frames['displayFrame']的链接页面
<head>
<title>Create New Customer</title>
<script type="text/javascript">
//<![CDATA[
function saveResult(sMessage) {
var divStatus = document.getElementById("divStatus");
divStatus.innerHTML = "Request completed: " + sMessage;
}
//]]>
</script>
</head>
<body>
<form method="post" action="SaveCustomer.php" target="hiddenFrame">//target指向frames["hiddenFrame"];页面不会跳转。
<p>Enter customer information to be saved:</p>
<p>Customer Name: <input type="text" name="txtName" value="" /><br />
php代码
<!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>Save Customer</title>
<?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 = "your.database.server";
$sDBName = "your_db_name";
$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,$sDBUsername,$sDBPassword);
@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);
?>
<script type="text/javascript">
//<![CDATA[
window.onload = function () {
top.frames["displayFrame"].saveResult("<?php echo $sStatus ?>");
}
//]]>
</script>
</head>
<body>
</body>
</html>
下面的一个是用表单序列化来处理post数据
html
//js
function formReady() { //get your reference to the form
var oForm = document.forms[0];
var oHiddenForm = oIFrame.document.forms[0]; //iterate over each element in the form
for (var i=0 ; i < oForm.elements.length; i++) { //get reference to the field
var oField = oForm.elements[i]; //different behavior based on the type of field
switch (oField.type) { //buttons - we don't care
case "button":
case "submit":
case "reset":
break; //checkboxes/radio buttons - only return the value if the controlis checked.
case "radio":
case "checkbox":
if (!oField.checked) {
break;
} //text/hidden/password all return the value
case "text":
case "hidden":
case "password":
createInputField(oHiddenForm, oField.name, oField.value);
break; default:
switch(oField.tagName.toLowerCase()) {
case "select":
createInputField(oHiddenForm, oField.name, oField.options[oField.selectedIndex].value);//创建一个新的input
break;
default:
createInputField(oHiddenForm, oField.name, oField.value);
}
} } oHiddenForm.action = oForm.action;
oHiddenForm.submit();//表单form的submit方法提交
};
//
function createInputField(oHiddenForm, sName, sValue) {
oHidden = oIFrame.document.createElement("input");
oHidden.type = "hidden";
oHidden.name = sName;
oHidden.value = sValue;
oHiddenForm.appendChild(oHidden);
}
//创建一个隐藏的ifram
var oIFrame = null;
function createIFrame() {
var oIFrameElement = document.createElement("iframe");
oIFrameElement.style.display = "none";
oIFrameElement.name = "hiddenFrame";
oIFrameElement.id = "hiddenFrame";
document.body.appendChild(oIFrameElement);
oIFrame = frames["hiddenFrame"];
}
//
调用开始
function checkIFrame() {
if (!oIFrame) {
createIFrame();
}
//takes a cycle for some browers to recognize the new element
setTimeout(function () {
oIFrame.location = "ProxyForm.php";
}, 10);
}
//html
<form method="post" action="SaveCustomer.php" onsubmit="checkIFrame(); return false">
<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>
ProxyForm.php
<script type="text/javascript">//<![CDATA[
window.onload = function () {
parent.formReady();
}
//]]>
</script>
</head>
<body>
<form method="post" action="#">
</form>
</body>
然后就是ajax登场了
ajax的发展的更多相关文章
- Ajax语法浅析
Ajax是目前很普遍的一门技术,也是很值得探讨和研究的一门技术.本文将针对Ajax的发展过程并结合其在不同库框架中的使用方式来和大家分享下Ajax的那些新老语法. Ajax简介 Ajax全称为“Asy ...
- 原生态AJAX详解和jquery对AJAX的封装
AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...
- AJAX 原生态
AJAX 原生态 原生态AJAX详解和jquery对AJAX的封装 A ...
- AJAX的前世今生与未来
一.通过三个问答来认识一下Ajax 什么是Ajax? Ajax是Asynchronous Javascript And XML的缩写,它是一种技术. Ajax有什么用? 这一技术能够向服务器请求额外的 ...
- ASP.NET（转自wiki）
ASP.NET是由微软在.NET Framework框架中所提供,开发Web应用程序的类库,封装在System.Web.dll文件中,显露出System.Web名字空间,并提供ASP.NET网页处理. ...
- 写自己的ASP.NET MVC框架（上）
http://www.cnblogs.com/fish-li/archive/2012/02/12/2348395.html 阅读目录 开始 ASP.NET程序的几种开发方式 介绍我的MVC框架 我的 ...
- ASP.NET 简介（转自Wiki）
ASP.NET是由微软在.NET Framework框架中所提供,开发Web应用程序的类库,封装在System.Web.dll文件中,显露出System.Web名字空间,并提供ASP.NET网页处理. ...
- Ajax及跨域
概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...
- angularjs和ajax的结合使用 （一）
好久没写文了.这是一篇关于easyui配合ajax使用 的文章, 顺带介绍angularjs的使用 以及让你感受到angularjs的威力.网上对于ajax 的文也是多如牛毛 .我就不直接 从那种原生 ...
随机推荐
- 硬核 - Java 随机数相关 API 的演进与思考（下）
本系列将 Java 17 之前的随机数 API 以及 Java 17 之后的统一 API 都做了比较详细的说明,并且将随机数的特性以及实现思路也做了一些简单的分析,帮助大家明白为何会有这么多的随机数算 ...
- 默认安装的phpMyAdmin会存在哪些安全隐患
利用: 1. 利用慢查询日志写入webshell 2. phpMyAdmin的setup目录暴露一些隐私信息 3. 通过phpMyAdmin修改php的ini配置 ...
- Linux 安装 MySQL 8.0.26 超详细图文步骤
1.MySQL 8.0.26 下载 官方网站下载 MySQL 8.0.26 安装包,下载地址: https://downloads.mysql.com/archives/community/ 需要注意 ...
- Javascript中常用事件集合和事件使用方法
Javascript中常用事件集合和事件使用方法 一.事件绑定 格式: 事件源 . on事件类型=事件处理函数 事件绑定三要素 1.事件源:和谁绑定 2.事件类型:什么事件 3.事件处理函数:触发了要 ...
- 【CSAPP】第三章 程序的机器级表示
目录 1. 数据的编码与存储 2. 汇编指令 2.1 数据传送指令 访存方式 数据传送指令 入栈出栈 2.2 算术/逻辑指令 2.3 过程控制指令 控制码 比较指令 跳转指令 条件设置指令 3. 程序 ...
- 模拟axios的创建[ 实现调用axios()自身发送请求或调用属性的方法发送请求axios.request() ]
1.axios 函数对象(可以作为函数使用去发送请求,也可以作为对象调用request方法发送请求) ❀ 一开始axios是一个函数,但是后续又给它添加上了一些属性[ 方法属性] ■ 举例子(axio ...
- 多线程-守护线程-setDaemon
1 package multithread4; 2 /* 3 * 停止线程: 4 * 1,stop方法. 5 * 6 * 2,run方法结束. 7 * 8 * 怎么控制线程的任务结束呢? 9 * 任务 ...
- lvs的三种模式
一.NAT模式(VS-NAT) 原理:就是把客户端发来的数据包的IP头的目的地址,在负载均衡器上换成其中一台RS的IP地址,并发至此RS来处理,RS处理完成后把数据交给经过负载均衡器,负载均衡器再把数 ...
- cobbler最小化安装centos8
centos8 已经发布了GA版本,迫不及待的想尝鲜了,然后现实总是那么残酷,一直安装失败,具体安装步骤如下: 假设cobbler已配置完成. 1.下载centos8 iso镜像 wget http: ...
- JavaScript之递归查找所有父节点
......data: () => ({ // 数据 dt: [{ id: '1', children: [ { id: '1-1', children: [ { id: '1-1-1', ch ...