PHP网站开发中与AJAX的结合-Php-优质IT资源分享社区

admin
管理员
管理员
  • UID1
  • 粉丝27
  • 关注4
  • 发帖数581
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:173回复:0

  PHP网站开发中与AJAX的结合

楼主#
更多 发布于:2016-05-22 15:10

Ajax是运用客户端脚本与Web服务器交流数据的Web运用开发办法。Web页面不必打断交互流程进行从头加裁,就可以动态地更新。运用Ajax,用户可以创立挨近本地桌面运用的直接、高可用、更丰富、更动态的Web用户界面。

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的数据,那么咱们应当怎么做呢?

假定有一个衔接:新闻1,我点该衔接的时分,不想任何改写就可以看到衔接的内容,那么咱们该怎么做呢?

//将衔接改为:

<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表单里没有需求提交方针等信息,而且提交按钮的类型也仅仅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

选择要上载的图像:

//显现提示信息的层

//用来做方针窗口的起浮结构

处理上载的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>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开发者共同努力了。

优质IT资源分享社区为你提供此文。

本站有大量优质php教程视频,资料等资源,包含php基础教程,高级进阶教程等等,教程视频资源涵盖传智播客,极客学院,达内,北大青鸟,猎豹网校等等IT职业培训机构的培训教学视频,价值巨大。欢迎点击下方链接查看。

  1. php教程视频

优质IT资源分享社区(www.itziyuan.top)
一个免费,自由,开放,共享,平等,互助的优质IT资源分享网站。
专注免费分享各大IT培训机构最新培训教学视频,为你的IT学习助力!

!!!回帖受限制请看点击这里!!!
!!!资源失效请在此版块发帖说明!!!

[PS:按 CTRL+D收藏本站网址~]

——“优质IT资源分享社区”管理员专用签名~

本版相似帖子

游客