//构建一个表单，表单中不需要action、method之类的属性，全部由ajax来搞定了。
<form>
姓名：<input type="text" /><br />
年数：<input type="text" /><br />
性别：<input type="text" /><br />
<input type="button" value="提交表单">
</form>
//构建一个接管返复书息的层：
<div></div>
我们看到上面的form表单里没有需要提交方针等信息，而且提交按钮的范例也只是button，那么所有操纵都是靠onClick事件中的saveUserInfo()函数来执行了。我们描写一下这个函数：
复制代码 代码如下:
function saveUserInfo()
{
//获取接管返复书息层
var msg = document.getElementById("msg");
//获取表单工具和用户信息值
var f = document.user_info;
var userName = f.user_name.value;
var userAge = f.user_age.value;
var userSex = f.user_sex.value;
//吸收表单的URL地点
var url = "/save_info.php";
//需要POST的值，把每个变量都通过&来联接
var postStr = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;
//实例化Ajax
var ajax = InitAjax();
//通过Post方法打开毗连
ajax.open("POST", url, true);
//界说传输的文件HTTP头信息
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送POST数据
ajax.send(postStr);
//获取执行状态
ajax.onreadystatechange = function() {
//假如执行状态乐成，那么就把返复书息写到指定的层里
if (ajax.readyState == 4 && ajax.status == 200) {
msg.innerHTML = ajax.responseText;
}
}
}
4. 异步回调（伪Ajax方法）
一般环境下，利用Get、Post方法的Ajax我们都可以或许办理今朝问题，只是应用庞洪水平，虽然，在开拓中我们也许会遇到无法利用Ajax的时候，可是我们又需要模仿Ajax的结果，那么就可以利用伪Ajax的方法来实现我们的需求。
伪Ajax大抵道理就是说我们照旧普通的表单提交，可能此外什么的，可是我们却是把提交的值方针是一个浮动框架，这样页面就不刷新了，可是呢，我们又需要看到我们的执行功效，虽然可以利用JavaScript来模仿提示信息，可是，这不是真实的，所以我们就需要我们的执行功效来异步回调，汇报我们执行功效是怎么样的。
假设我们的需求是需要上传一张图片，而且，需要知道图片上传后的状态，好比，是否上传乐成、文件名目是否正确、文件巨细是否正确等等。那么我们就需要我们的方针窗口把执行功效返返来给我们的窗口，这样就可以或许顺利的模仿一次Ajax挪用的进程。
以下代码稍微多一点， 而且涉及Smarty模板技能，假如不太相识，请阅读相关技能资料。
上传文件：upload.html
复制代码 代码如下:
//上传表单，指定target属性为浮动框架iframe1
<form action="/upload.php" method="post" enctype="multipart/form-data" target="iframe1">
选择要上传的图片：<input type="file"><br />
<input type="submit" value="上传图片">
</form>
//显示提示信息的层
<div></div>
//用来做方针窗口的浮动框架
<iframe scrolling="no"></iframe>
<?php
/* 界说常量 */
//界说答允上传的MIME名目
define("UPLOAD_IMAGE_MIME", "image/pjpeg,image/jpg,image/jpeg,image/gif,image/x-png,image/png");
//图片答允巨细，字节
define("UPLOAD_IMAGE_SIZE", 102400);
//图片巨细用KB为单元来暗示
define("UPLOAD_IMAGE_SIZE_KB", 100);
//图片上传的路径
define("UPLOAD_IMAGE_PATH", "./upload/");
//获取答允的图像名目
$mime = explode(",", USER_FACE_MIME);
$is_vaild = 0;
//遍历所有答允名目
foreach ($mime as $type)
{
if ($_FILES['image']['type'] == $type)
{
$is_vaild = 1;
}
}
//假如名目正确，而且没有高出巨细就上传上去
if ($is_vaild && $_FILES['image']['size']<=USER_FACE_SIZE && $_FILES['image']['size']>0)
{
if (move_uploaded_file($_FILES['image']['tmp_name'], USER_IMAGE_PATH . $_FILES['image']['name']))
{
$upload_msg ="上传图片乐成！";
}
else
{
$upload_msg = "上传图片文件失败";
}
}
else
{
$upload_msg = "上传图片失败，大概是文件高出". USER_FACE_SIZE_KB ."KB、可能图片文件为空、或文件名目不正确";
}
//理会模板文件
$smarty->assign("upload_msg", $upload_msg);
$smarty->display("upload.tpl");
?>
{if $upload_msg != ""}
callbackMessage("{$upload_msg}");
{/if}
//回调的JavaScript函数，用来在父窗口显示信息
function callbackMessage(msg)
{
//把父窗口显示动静的层打开
parent.document.getElementById("message").style.display = "block";
//把本窗口获取的动静写上去
parent.document.getElementById("message").innerHTML = msg;
//而且配置为3秒后自动封锁父窗口的动静显示
setTimeout("parent.document.getElementById('message').style.display = 'none'", 3000);
}
[竣事语]
这是一种很是精采的Web开拓技能，固然呈现时间较量长，可是到此刻才逐步火起来，也但愿带给Web开拓界一次厘革，让我们朝RIA（富客户端）的开拓迈进，虽然，任何对象有利也有漏洞，假如过多的利用JavaScript，那么客户端将很是臃肿，倒霉于用户的欣赏体验，如安在做到快速的亲前提下，还可以或许做到好的用户体验，这就需要Web开拓者配合尽力了。
利用异步回调的方法进程有点巨大，可是根基实现了Ajax、以及信息提示的成果，假如接管模板的信息提示较量多，那么还可以通过配置层的方法来处理惩罚，这个随机应变吧。模板文件：upload.tpl 处理惩罚上传的PHP文件：upload.php 大抵利用POST方法的进程就是这样，虽然，实际开拓环境大概会更巨大，这就需要开拓者去逐步琢磨。 那么当，当用户点击“新闻1”这个链接的时候，在下面临应的层将显示获取的内容，并且页面没有任何刷新。虽然，我们上面省略了show.php这个文件，我们只是假设show.php文件存在，而且可以或许正常事情的从数据库中把id为1的新闻提取出来。
<a href="#">新闻1</a>
<div></div>
你也许会说，这个代码因为要挪用XMLHTTP组件，是不是只有IE欣赏器能使，不是的经我试验，Firefox也是能利用的。
那么我们在执行任何Ajax操纵之前，都必需先挪用我们的InitAjax()函数来实例化一个Ajax工具。
url = "xxx.asp?" + Math.round(Math.random()*100)
强制刷新
您大概感乐趣的文章: