ajax(Asynchronous Javascript and XML)异步javascrip和XMl.
ajax只是一种web交互方法。在客户端(浏览器)和服务区段之间传输少量的信息。从而为用户提供及时的响应。
在传统的web应用程序中,浏览器本身负责初始化到服务区的请求,并处理来自服务器的响应。而ajax模式不同,他提供了·一个中间层里处理这种通信。ajax引擎实际上只是一个javascript对象或函数，只有当需要从服务器获取信息时才调用它。
服务器方面配置向ajax引擎返回其可用的数据，这些数据可以是纯文本,XML或者需要的任何格式。唯一的要求就是ajax可以处理这些数据。
随着html帧的引入 早期的ajax雏形出现但是没有用到ajax对象，那就是引用帧技术了。
基本就是把连接给其他的帧，不用去打开另外的一个页面。这里最适合的就是服务器与客户端之间的通信(其实一开始对ajax的理解就是不刷新页面就可以局部的改变页面。例如地图)
这里讲引用帧的介绍了 直接贴代码了。
第一个html页面就叫a.html吧
用帧来显示两个页面一个提供表格显示与服务端的数据响应(requestCustomerInfo && displayCustomerInfo)，另外一个连接服务器。
javascript;gutter:true;
Customer Account Information</p>
<pre><code> //<![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;
}
//]]>
Enter customer ID number to retrieve information:
Customer ID:
</code></pre>
<pre><code>
这里的代码 top.frames["hiddenFrame"].location="getcustomerdata.php?id="+sId为隐藏帧指派url.
后台php代码:
<pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Get Customer Data</title>
<?<span>php
<span>//</span><span>customer ID</span>
$sID = $_GET["id"<span>];
</span><span>//</span><span>validation for ID</span>
<span>if</span><span> (is_numeric($sID) {
</span><span>//</span><span>variable to hold customer info</span>
$sInfo = ""<span>;
</span><span>//</span><span>database information</span>
$sDBServer = "your.database.server"<span>;
$sDBName </span>= "your_db_name"<span>;
$sDBUsername </span>= "your_db_username"<span>;
$sDBPassword </span>= "your_db_password"<span>;
</span><span>//</span><span>create the SQL query string</span>
$sQuery = "Select * from Customers where CustomerId="<span>.$sID;
</span><span>//</span><span>make the database connection</span>
$oLink =<span> mysql_connect($sDBServer,$sDBUsername,$sDBPassword);
@mysql_select_db($sDBName) or $sInfo </span>= "Unable to open database"<span>;
</span><span>if</span> ($sInfo == ""<span>){
</span><span>if</span>($oResult = mysql_query($sQuery) and mysql_num_rows($oResult) > 0<span>) {
$aValues </span>=<span> mysql_fetch_array($oResult,MYSQL_ASSOC);
$sInfo </span>= $aValues['Name']."<br>".$aValues['Address']."<br>"<span>.
$aValues[</span>'City']."<br>".$aValues['State']."<br>"<span>.
$aValues[</span>'Zip']."<br><br>Phone: ".$aValues['Phone']."<br>"<span>.
</span>"<a>".$aValues['Email']."</a>"<span>;
mysql_free_result($oResult);
} </span><span>else</span><span> {
$sInfo </span>= "Customer with ID $sID doesn't exist."<span>;
}
}
mysql_close($oLink);
} </span><span>else</span><span> {
$sInfo </span>= "Invalid customer ID."<span>;
}
</span>?>
<script>
<span>//</span><span><![CDATA[</span>
window.onload = <span>function</span><span> () {
</span><span>var</span> divInfoToReturn = document.getElementById("divInfoToReturn"<span>);//<span>获取div文本;作为参数传递个同一级的兄弟窗体</span></span><span>top.frames["displayFrame"]</span>.</pre><pre><span> top.frames[</span>"displayFrame"<span>].displayCustomerInfo(divInfoToReturn.innerHTML);<br> }; </span><span>//</span><span>]]><br></span> </script><br> </head><br> <body><br> //在这里添加文本。 <br></body><br> </html></pre>
数据库脚本
</code></pre>
<p>CREATE TABLE <code>Customers</code> (
<code>CustomerId</code> int(11) NOT NULL auto_increment,
<code>Name</code> varchar(255) NOT NULL default '',
<code>Address</code> varchar(255) NOT NULL default '',
<code>City</code> varchar(255) NOT NULL default '',
<code>State</code> varchar(255) NOT NULL default '',
<code>Zip</code> varchar(25) NOT NULL default '',
<code>Phone</code> varchar(25) NOT NULL default '',
<code>Email</code> varchar(255) NOT NULL default '',
PRIMARY KEY (<code>CustomerId</code>)
)data:</p>
<pre><code>
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的页面无需刷新）
主页面基相同：
<pre><frameset>"<span>100%,0</span><span>"</span> style=<span>"</span><span>border: 0px</span><span>"</span>>
<frame>"<span>displayFrame</span><span>"</span> src=<span>"</span><span>DataEntry.php</span><span>"</span> noresize=<span>"</span><span>noresize</span><span>"</span> style=<span>"</span><span>border: 0px</span><span>"</span> />
<frame>"<span>hiddenFrame</span><span>"</span> src=<span>"</span><span>about:blank</span><span>"</span> noresize=<span>"</span><span>noresize</span><span>"</span> style=<span>"</span><span>border: 0px</span><span>"</span> />
</frameset>
<span>//</span><span>主页面pre
</span><span>//</span><span>frames['displayFrame']的链接页面</span>
<head>
<title>Create New Customer</title>
<script>"</span><span>text/javascript</span><span>"</span>>
<span>//</span><span><![CDATA[</span>
<span> function saveResult(sMessage) {
</span><span>var</span> divStatus = document.getElementById(<span>"</span><span>divStatus</span><span>"</span><span>);
divStatus.innerHTML </span>= <span>"</span><span>Request completed: </span><span>"</span> +<span> sMessage;
}
</span><span>//</span><span>]]></span>
</script>
</head>
<body>
<form>"<span>post</span><span>"</span> action=<span>"</span><span>SaveCustomer.php</span><span>"</span> <span>target=<span>"</span><span>hiddenFrame</span><span>"</span></span>>//target指向frames["hiddenFrame"];页面不会跳转。
<p>Enter customer information to be saved:</p>
<p>Customer Name: <input>"<span>text</span><span>"</span> name=<span>"</span><span>txtName</span><span>"</span> value=<span>""</span> /><br></p></form></body></pre>
php代码
<pre><!DOCTYPE html PUBLIC <span>"<span>-//W3C//DTD XHTML 1.0 Transitional//EN</span><span>"</span>
<span>"</span><span>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</span><span>"</span>>
<html>"<span>http://www.w3.org/1999/xhtml</span><span>"</span> >
<head>
<title>Save Customer</title>
<?<span>php
<span>//</span><span>get information</span>
$sName = mysql_real_escape_string($_POST[<span>"</span><span>txtName</span><span>"</span><span>]);
$sAddress </span>= mysql_real_escape_string($_POST[<span>"</span><span>txtAddress</span><span>"</span><span>]);
$sCity </span>= mysql_real_escape_string($_POST[<span>"</span><span>txtCity</span><span>"</span><span>]);
$sState </span>= mysql_real_escape_string($_POST[<span>"</span><span>txtState</span><span>"</span><span>]);
$sZipCode </span>= mysql_real_escape_string($_POST[<span>"</span><span>txtZipCode</span><span>"</span><span>]);
$sPhone </span>= mysql_real_escape_string($_POST[<span>"</span><span>txtPhone</span><span>"</span><span>]);
$sEmail </span>= mysql_real_escape_string($_POST[<span>"</span><span>txtEmail</span><span>"</span><span>]);
</span><span>//</span><span>status message</span>
$sStatus = <span>""</span><span>;
</span><span>//</span><span>database information</span>
$sDBServer = <span>"</span><span>your.database.server</span><span>"</span><span>;
$sDBName </span>= <span>"</span><span>your_db_name</span><span>"</span><span>;
$sDBUsername </span>= <span>"</span><span>your_db_username</span><span>"</span><span>;
$sDBPassword </span>= <span>"</span><span>your_db_password</span><span>"</span><span>;
</span><span>//</span><span>create the SQL query string</span>
$sSQL = <span>"</span><span>Insert into Customers(Name,Address,City,State,Zip,Phone,) </span><span>"</span><span>.
</span><span>"</span><span> values ('$sName','$sAddress','$sCity','$sState', '$sZipCode'</span><span>"</span><span>.
</span><span>"</span><span>, '$sPhone', '$sEmail')</span><span>"</span><span>;
$oLink </span>=<span> mysql_connect($sDBServer,$sDBUsername,$sDBPassword);
@mysql_select_db($sDBName) or $sStatus </span>= <span>"</span><span>Unable to open database</span><span>"</span><span>;
</span><span>if</span> ($sStatus == <span>""</span><span>) {
</span><span>if</span><span>(mysql_query($sSQL)) {
$sStatus </span>= <span>"</span><span>Added customer; customer ID is </span><span>"</span><span>.mysql_insert_id();
} </span><span>else</span><span> {
$sStatus </span>= <span>"</span><span>An error occurred while inserting; customer not saved.</span><span>"</span><span>;
}
}
mysql_close($oLink);
</span>?>
<script>"</span><span>text/javascript</span><span>"</span>>
<span>//</span><span><![CDATA[</span>
window.onload =<span> function () {
top.frames[</span><span>"</span><span>displayFrame</span><span>"</span>].saveResult(<span>"</span><span><?php echo $sStatus ?></span><span>"</span><span>);
}
</span><span>//</span><span>]]></span>
</script>
</head>
<body>
</body>
</html></pre>
下面的一个是用表单序列化来处理post数据
html
</code></pre>
<p>//jsfunction formReady() {</p>
<pre><code> //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); }//创建一个隐藏的iframvar 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 Enter customer information to be saved: Customer Name: Address: City: State: Zip Code: Phone: E-mail:
</code></pre>
<p>
ProxyForm.php
然后就是ajax登场了
Original: https://www.cnblogs.com/isFinite-rs/p/6964205.html
Author: caibird_bg
Title: ajax的发展
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/609144/
转载文章受原作者版权保护。转载请注明原作者出处！