ajax的发展

V2AS问路

ajax的发展

阅读原文时间：2023年07月08日阅读：4

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)，另外一个连接服务器。

Customer Account Information

//在这里添加文本。

数据库脚本

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的页面无需刷新）

主页面基相同：

//主页面pre
//frames['displayFrame']的链接页面
Create New Customer

//target指向frames["hiddenFrame"];页面不会跳转。

Enter customer information to be saved:

Customer Name:

php代码

Save Customer
<?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);

下面的一个是用表单序列化来处理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