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

2016-01-29 13:28 5 1 收藏

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

【 tulaoshi.com - PHP 】

 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

来源:http://www.tulaoshi.com/n/20160129/1490303.html

延伸阅读
标签: PHP
//向DOM中写入新数据   $item = $dom-createElement("item");   $title = $dom-createElement("title");   $titleText = $dom-createTextNode("title text");   $title-appendChild($titleText);   $item-appendChild($title);  &nb...
AJAX不用说大家都明白,不明白的请百度或GOO一下人家比我说的专业,笔者写此篇文章不在于介绍多深奥的东西,这样只举一个很简单的例子来引导到大家.此例只为让大家明白AJAX的基本的调用需要做那些事情笔者用的是VS2005引用AJAX2.0程序集(AjaxPro.2.dll) 。 在web.config文件中的<system.web>加入以下设置 <httpHandlers> <add ve...
标签: PHP
异步的文件上传是在现代的AJAX实现的Web应用里面经常要遇到,必须解决的问题。但是标准的AJAX类(XmlHttpRequest)无法实现传输文件的功能。因此,这里讨论的内容就是如何在AJAX的技术的基础之上构建异步的文件上传功能。在这个功能当中需要使用到内置的框及(IFRAME)来传输文件。这个功能实现的效果是页面在上传文件的时候...
标签: PHP
四、基于XML_RPC的Web服务 利用XML_RPC构造和使用服务是很方便的。企业为自己提供的各种服务部署XML_RPC服务器,用户、客户软件和客户企业就可以使用这种服务构造出高端服务或者面向最终用户的应用。这种提供更有效、廉价和优质服务的竞争将极大地提高应用服务的质量。 但这里还存在一些问题有待解决,例如怎样编目、索引...
标签: Web开发
Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。对于Ajax,最核心的一个对象是XMLHttpRequest,所有的Ajax操作都离不开对这个对象的操作。 首先我们来了解怎么在javascript中创建这个对象: varxmlHttp=newXMLHttpRequest(); 这行简单的代码在 Mozilla、Fire...

经验教程

271

收藏

13
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部