PHP开发中AJAX技术的简单应用


Posted in PHP onDecember 11, 2015

AJAX无疑是2005年炒的最热的Web开发技术之一,当然,这个功劳离不开Google。我只是一个普通开发者,使用AJAX的地方不是特别多,我就简单的把我使用的心得说一下。(本文假设用户已经具有JavaScript、HTML、CSS等基本的Web开发能力)

[AJAX介绍] Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。Web页面不用打断交互流程进行重新加裁,就可以动态地更新。使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

异步JavaScript和XML(AJAX)不是什么新技术,而是使用几种现有技术——包括级联样式表(CSS)、JavaScript、XHTML、XML和可扩展样式语言转换(XSLT),开发外观及操作类似桌面软件的Web应用软件。

[AJAX执行原理]一个Ajax交互从一个称为XMLHttpRequest的JavaScript对象开始。如同名字所暗示的,它允许一个客户端脚本来执行HTTP请求,并且将会解析一个XML格式的服务器响应。Ajax处理过程中的第一步是创建一个XMLHttpRequest实例。使用HTTP方法(GET或POST)来处理请求,并将目标URL设置到XMLHttpRequest对象上。

当你发送HTTP请求,你不希望浏览器挂起并等待服务器的响应,取而代之的是,你希望通过页面继续响应用户的界面交互,并在服务器响应真正到达后处理它们。要完成它,你可以向XMLHttpRequest注册一个回调函数,并异步地派发XMLHttpRequest请求。控制权马上就被返回到浏览器,当服务器响应到达时,回调函数将会被调用。

[AJAX实际应用]

1. 初始化Ajax   

Ajax实际上就是调用了XMLHttpRequest对象,那么首先我们的就必须调用这个对象,我们构建一个初始化Ajax的函数:

/**
* 初始化一个xmlhttp对象
*/
function InitAjax()
{
  var ajax=false; 
  try { 
 ajax = new ActiveXObject("Msxml2.XMLHTTP"); 
  } catch (e) { 
 try { 
  ajax = new ActiveXObject("Microsoft.XMLHTTP"); 
 } catch (E) { 
  ajax = false; 
 } 
  }
  if (!ajax && typeof XMLHttpRequest!='undefined') { 
 ajax = new XMLHttpRequest(); 
  } 
  return ajax;
}

你也许会说,这个代码因为要调用XMLHTTP组件,是不是只有IE浏览器能使,不是的经我试验,Firefox也是能使用的。 那么我们在执行任何Ajax操作之前,都必须先调用我们的InitAjax()函数来实例化一个Ajax对象。

2. 使用Get方式   

现在我们第一步来执行一个Get请求,加入我们需要获取 /show.php?id=1的数据,那么我们应该怎么做呢?

假设有一个链接:<a href="/show.php?id=1">新闻1</a>,我点该链接的时候,不想任何刷新就能够看到链接的内容,那么我们该怎么做呢?

//将链接改为:
<a href="#" onClick="getNews(1)">新闻1</a>
 
//并且设置一个接收新闻的层,并且设置为不显示:
<div id="show_news"></div>
 
 同时构造相应的JavaScript函数:
 
function getNews(newsID)
{
  //如果没有把参数newsID传进来
  if (typeof(newsID) == 'undefined')
  {
 return false;
  }
  //需要进行Ajax的URL地址
  var url = "/show.php?id="+ newsID;
 
  //获取新闻显示层的位置
  var show = document.getElementById("show_news"); 
 
  //实例化Ajax对象
  var ajax = InitAjax();
 
  //使用Get方式进行请求
  ajax.open("GET", url, true); 
 
  //获取执行状态
  ajax.onreadystatechange = function() { 
 //如果执行是状态正常,那么就把返回的内容赋值给上面指定的层
 if (ajax.readyState == 4 && ajax.status == 200) { 
  show.innerHTML = ajax.responseText; 
 } 
  }
  //发送空
  ajax.send(null); 
}

那么当,当用户点击“新闻1”这个链接的时候,在下面对应的层将显示获取的内容,而且页面没有任何刷新。当然,我们上面省略了show.php这个文件,我们只是假设show.php文件存在,并且能够正常工作的从数据库中把id为1的新闻提取出来。

这种方式适应于页面中任何元素,包括表单等等,其实在应用中,对表单的操作是比较多的,针对表单,更多使用的是POST方式,这个下面将讲述。

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/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");
 
?>

模板文件: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);
}

使用异步回调的方式过程有点复杂,但是基本实现了Ajax、以及信息提示的功能,如果接受模板的信息提示比较多,那么还可以通过设置层的方式来处理,这个随机应变吧。

[结束语]这是一种非常良好的Web开发技术,虽然出现时间比较长,但是到现在才慢慢火起来,也希望带给Web开发界一次变革,让我们朝RIA(富客户端)的开发迈进,当然,任何东西有利也有弊端,如果过多的使用JavaScript,那么客户端将非常臃肿,不利于用户的浏览体验,如何在做到快速的亲前提下,还能够做到好的用户体验,这就需要Web开发者共同努力了。

以上就是本文的全部内容,希望对大家掌握AJAX技术在PHP开发中的简单应用有所帮助。

PHP 相关文章推荐
PHP导入Excel到MySQL的方法
Apr 23 PHP
php获取参数的几种方法总结
Feb 18 PHP
PHP调用JAVA的WebService简单实例
Mar 11 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
Jun 26 PHP
PHP中的类型约束介绍
May 11 PHP
服务器迁移php版本不同可能诱发的问题
Dec 22 PHP
PHP的几个常用加密函数
Feb 03 PHP
php gd等比例缩放压缩图片函数
Jun 12 PHP
thinkPHP中session()方法用法详解
Dec 08 PHP
PHPUnit测试私有属性和方法功能示例
Jun 12 PHP
TP5框架使用QueryList采集框架爬小说操作示例
Mar 26 PHP
laravel ajax curd 搜索登录判断功能的实现
Apr 17 PHP
基于PHP如何把汉字转化为拼音
Dec 11 #PHP
PHP异常处理Exception类
Dec 11 #PHP
编写PHP脚本来实现WordPress中评论分页的功能
Dec 10 #PHP
PHP读取PPT文件的方法
Dec 10 #PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
Dec 10 #PHP
PHP创建PowerPoint2007文档的方法
Dec 10 #PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
Dec 10 #PHP
You might like
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
php 获取mysql数据库信息代码
2009/03/12 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
用Python逐行分析文件方法
2019/01/28 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
Pycharm修改python路径过程图解
2020/05/22 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python