当前位置: 首页 > 图文教程 > 网络编程 > PHP > AJAX 技术在 PHP 中的简单使用(2)

PHP
工作笔记:配置MySQL为高可用集群 (1)
MySQL (C API)VC实例及代码下载 (1)(5)
MySQL (C API)VC实例及代码下载 (1)(4)
MySQL (C API)VC实例及代码下载 (1)(3)
MySQL (C API)VC实例及代码下载 (1)(2)
MySQL (C API)VC实例及代码下载 (1)
用JSP连接mysql数据库的方法 (1)(2)
用JSP连接mysql数据库的方法 (1)
MySQL数据库账户授权的相关管理解析 (1)(2)
MySQL数据库账户授权的相关管理解析 (1)
SAP MaxDB MySQL修补数据库严重漏洞
MySQL研发中心成立发布会会后访问整理 (1)(2)
MySQL研发中心成立发布会会后访问整理 (1)
MySQL中SQL-TEXT、DATE和SET数据类型
MySQL存在权限提升及安全限制绕过漏洞
MySQL 卸载的问题
windows下安装、卸载mysql服务
如何正确卸载MySQL
MySQL手册版本 5.0.20-MySQL优化(四) (1)(5)
MySQL手册版本 5.0.20-MySQL优化(四) (1)(4)

AJAX 技术在 PHP 中的简单使用(2)


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-03   浏览: 57 ::
收藏到网摘: n/a

 3. 使用POST方式

  其实POST方式跟Get方式是比较类似的,只是在执行Ajax的时候稍有不同,我们简单讲述一下。

  假设有一个用户输入资料的表单,我们在无刷新的情况下把用户资料保存到数据库中,同时给用户一个成功的提示。

//构建一个表单,表单中不需要action、method之类的属性,全部由ajax来搞定了。
<form name="user_info">
姓名:<input type="text" name="user_name" /><br />
年龄:<input type="text" name="user_age" /><br />
性别:<input type="text" name="user_sex" /><br />
<input type="button" value="提交表单" onClick="saveUserInfo()">
</form>
//构建一个接受返回信息的层:
<div id="msg"></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;
  }
 }
}

  大致使用POST方式的过程就是这样,当然,实际开发情况可能会更复杂,这就需要开发者去慢慢琢磨。

  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" name="upload_img" target="iframe1">

选择要上传的图片:<input type="file" name="image"><br />
<input type="submit" value="上传图片">
</form>
//显示提示信息的层
<div id="message" style="display:none"></div>
//用来做目标窗口的浮动框架
<iframe name="iframe1" width="0" height="0" scrolling="no"></iframe>

  处理上传的PHP文件:upload.php

<?php
 /* 定义常量 */
 //定义允许上传的MIME格式
 define("UPLOAD_IMAGE_MIME", "image/pjpeg,image/jpg,image/jpeg,image