走过平凡人生、留下平凡足迹 注册 | 登陆
浏览模式: 标准 | 列表分类:AJAX

php+ajax文件上传进度条

Submitted by aming on 2008, March 7, 9:05 AM

代码分为以下部分:

demo.php - 上传过程处理

PLAIN TEXTPHP:

<?php

include 'UploadProgressMeter.class.php';

fileWidget = new UploadProgressMeter();

if (fileWidget->uploadComplete()) {
// 上传完毕的时候,从iframe发送一个js到主窗口表示一切ok
echo fileWidget->finalStatus();

// 处理上传后的文件...

exit;
}
?>

demoserver.php - Ajax的服务端js,使用Pear:HTML_AJAX,直接调用UploadProgressMeterStatus类

PLAIN TEXTHTML:

<script src="http://www.ooso.net/demoserver.php?client=main,request,httpclient,dispatcher,json,util" type="text/javascript"></script>
<script src="http://www.ooso.net/demoserver.php?stub=UploadProgressMeterStatus" type="text/javascript"></script>
<?php echo fileWidget->renderIncludeJs(); ?>

进度条的样式表

PLAIN TEXTCSS:

.progressBar {
position: relative;
padding: 2px;
width: 300px;
height: 40px;
font-size: 14px;
}
.progressBar .background {
border: solid 1px black;
width: 270px;
height: 20px;
}
.progressBar .bar {
position: relative;
background-color: blue;
width: 0px;
height: 20px;
}

表单部分

PLAIN TEXTHTML:

<form action="demo.php" method="post" enctype="multipart/form-data">renderFormExtra(); ?>>
<?php echo fileWidget->renderHidden(); ?></form><form action="demo.php" method="post" enctype="multipart/form-data"><label>Select File: </label>
<div><?php echo fileWidget->render(); ?>
<?php echo fileWidget->renderProgressBar(); ?></div>
</form>


demo下载 - 密码是www.ooso.net
作者的svn浏览

其它类似项目:
http://pdoru.from.ro/ - 要以patch的形式和php一起编译
http://www.ugia.cn/?p=54 - 以socket上传文件并显示进度条

Tags: ajax, php

AJAX | 评论:0 | Trackbacks:0 | 阅读:306

PHP的AJAX技术实现文件异步上传

Submitted by aming on 2008, March 7, 9:04 AM

异步的文件上传是在现代的AJAX实现的Web应用里面经常要遇到，必须解决的问题。但是标准的AJAX类（XmlHttpRequest）无法实现传输文件的功能。因此，这里讨论的内容就是如何在AJAX的技术的基础之上构建异步的文件上传功能。在这个功能当中需要使用到内置的框及（IFRAME）来传输文件。这个功能实现的效果是页面在上传文件的时候，用户还可以使用该页面并且填写文件描述。

» 阅读全文

Tags: ajax, php

AJAX | 评论:0 | Trackbacks:0 | 阅读:163

AJAX结合PHP代码实现登录

Submitted by aming on 2008, March 6, 11:41 AM

<html>
<head>
<scrīpt language="javascrīpt">
function postRequest(strURL){
var xmlHttp;
if(window.XMLHttpRequest){ // For Mozilla, Safari, ...
var xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject){ // For Internet Explorer
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open('POST', strURL, true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4){
updatepage(xmlHttp.responseText);
}
}
xmlHttp.send(strURL);
}

function updatepage(str){
if(str=="yes"){
alert("Welcome User");
}else{
alert("Invalid Login! Please try again!");
}
}

function call_login(){
var username = window.document.f1.username.value;
var password = window.document.f1.password.value;
var url = "login.php?username=" + username + "&password=" +password ;
postRequest(url);
}
</scrīpt>
</head>

<body>
<Center>

<form name="f1" ōnSubmit="return call_login();">
<table border="0" bgcolor="#CCCCCC" cellspacing="1" cellpadding="3" width="316">
<tr>
<td align="left" colspan="2"><b><font size="5" color="#000080">Login</font></b></td>
</tr>
<tr>
<td align="right" width="124"><b><font color="#000080">User
Name:</font></b></td>
<td width="177"><input type="text" name="username" id="user" size="20" value="" /></td>
</tr>
<tr>
<td align="right" width="124"><b><font color="#000080">Password:</font></b></td>
<td width="177"><input type="password" name="password" size="20" value="" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" name="a1" value="Login" ōnClick="call_login()"></td>
</tr>
</table>
</form>

</center>
</body>
</html>

PHP脚本部分login.php：

<?
$username=$_GET["username"];
$password=$_GET["password"];
if($username=="admin" && $password=="admin"){
echo "yes";
}else{
echo "No";
}
?>

Tags: ajax, 教程

AJAX | 评论:0 | Trackbacks:0 | 阅读:231

AJAX实现聊天功能

Submitted by aming on 2008, March 6, 11:36 AM

实话实说，创建一个聊天的程序不是一个很艰难的程序！

写这篇文章的目的是教你一步一步地用XML作为传输载体来创建一个轻量级的聊天程序。这是一个很有趣的应用，而我写这篇文章的动机也是来自于我平时很喜欢PHP。同时，通过业余时间的钻研，我发现通过Web提供了一个稳定的论坛以后，人们往往希望通过Web能够时间即时的聊天室。这是因为虽然IRC和其它的一些即时的聊天工具已经很普及了，但是许多的用户仍然喜欢基于Web的聊天方式。原因有许多，比如这些基于Web的聊天工具可以通过一些合作的代理与那些即时聊天工具联系起来，或者Web的聊天工具使用很方便。

本文讨论的聊天程序的源代码你可以通过这两个链接进行下载：chat.tar.gz / chat.zip。源代码在本文中基本上都讨论到了（除了一些随后附加的补丁）。

为了创建这个聊天程序，我决定采用标准的第三方的库。因为我觉得既然这些第三方的库已经很好地解决了问题，我就没有必要自己来重新编写。可能有些人会认为使用这些库我们的程序就不是原创的，但是我们不必去理会这种没有意义的争论。

在服务器端，我决定采用Zend Framework 0.20 (发布于2006年10月31号)。客户端那边，通过采用原型的库，我们可以简化AJAX和Javascript的处理。其它的资源我决定使用Scriptaculous。当然，你可以使用其它的如jQuery， Dojo or 或者其它类似的库来实现。

这次我们编写的聊天工具主要基于Zend Framework (PHP5)，Javascript和协议库实现，目的是创建一个简单的便捷的聊天程序。另外，我们提供的源代码使用的是新的BSD的许可证，读者可以根据自己的需要自由地修改它。其它的细节我们就不讨论了，我们开始吧！

» 阅读全文

Tags: ajax, 教程

AJAX | 评论:0 | Trackbacks:0 | 阅读:231

PHP和Sajax使用Ajax之JavaScript

Submitted by aming on 2008, March 6, 11:34 AM

多年以来，创建真正具有响应性的 Web 应用程序这一目标一直被 Web 开发的一个简单事实所阻碍：要改变页面某一部分的信息，用户就必须重载整个页面。但是以后不再会这样了。感谢异步 Javascript 脚本和 XML（Ajax），我们现在可以从服务器端请求新内容，只修改页面的一部分。这个教程解释了如何把 Ajax 用于 PHP ，并介绍了简单 Ajax 工具包（Sajax），这是一个用 PHP 编写的工具，可以把服务器端 PHP 与 JavaScript 集成。

» 阅读全文

Tags: ajax, javascript

AJAX | 评论:0 | Trackbacks:0 | 阅读:231

PHP和AJAX创建RSS聚合器

Submitted by aming on 2008, March 6, 11:31 AM

想象使用一个简单HTML文件来把一个请求发送到一个服务器端脚本，收到一个基于该请求的定制XML文件，然后把它显示给用户而几乎不需要刷新浏览器！本文作者将同你一起探讨怎样在普通Web应用程序中联合javascript:;" onClick="javascript:tagshow(event, 'PHP');" target="_self">PHP和AJAX技术来创建实时的数据传输而不需要进行浏览器刷新。

　　尽管本文所使用的是PHP语言，但是请记住任何服务器端语言都会正常工作。为了理解本文，我假定你基本理解JavaScript和PHP或一类似服务器端语言。

» 阅读全文

Tags: ajax, rss

AJAX | 评论:0 | Trackbacks:0 | 阅读:246

AJAX开发简略

Submitted by aming on 2008, March 6, 10:55 AM

在使用浏览器浏览网页的时候，当页面刷新很慢的时候，你的浏览器在干什么？你的屏幕内容是什么？是的，你的浏览器在等待刷新，而你的屏幕内容是一片空白，而你在屏幕前苦苦的等待浏览器的响应。开发人员为了克服这种尴尬的局面，不得不在每一个可能需要长时间等待响应的页面上增加一个DIV，告诉用户“系统正在处理您的请求，请稍候……”。

　　现在，有一种越来越流行越热的“老”技术，可以彻底改变这种窘迫的局面。那就是AJAX。如今，随着Gmail、Google-maps的应用和各种浏览器的支持，AJAX正逐渐吸引全世界的眼球。

» 阅读全文

Tags: ajax, 教程

AJAX | 评论:0 | Trackbacks:0 | 阅读:268

Ajax 教程(详细) 十

Submitted by aming on 2008, March 5, 6:05 PM

清单 9. 使用 Ajax 生成一个 HEAD 请求

   function getSalesData() {
     createRequest();
     var url = "/boards/servlet/UpdateBoardSales";
     request.open("HEAD", url, true);
     request.onreadystatechange = updatePage;
     request.send(null);
   }
当您这样生成一个 HEAD 请求时，服务器并不会像对 GET 或 POST 请求一样返回一个真正的响应。相反，服务器只会返回资源的头（header），这包括响应中内容最后修改的时间、请求资源是否存在和很多其他有用信息。您可以在服务器处理并返回资源之前使用这些信息来了解有关资源的信息。

对于这种请求您可以做的最简单的事情就是简单地输出所有的响应头的内容。这可以让您了解通过 HEAD 请求可以使用什么。清单 10 提供了一个简单的回调函数，用来输出从 HEAD 请求中获得的响应头的内容。

清单 10. 输出从 HEAD 请求中获得的响应头的内容

   function updatePage() {
     if (request.readyState == 4) {
       alert(request.getAllResponseHeaders());
     }
   }
请参见 图 7，其中显示了从一个向服务器发出的 HEAD 请求的简单 Ajax 应用程序返回的响应头。



您可以单独使用这些头（从服务器类型到内容类型）在 Ajax 应用程序中提供其他信息或功能。

检查 URL

您已经看到了当 URL 不存在时应该如何检查 404 错误。如果这变成一个常见的问题 —— 可能是缺少了一个特定的脚本或 servlet —— 那么您就可能会希望在生成完整的 GET 或 POST 请求之前来检查这个 URL。要实现这种功能，生成一个 HEAD 请求，然后在回调函数中检查 404 错误；清单 11 给出了一个简单的回调函数。

清单 11. 检查某个 URL 是否存在

   function updatePage() {
     if (request.readyState == 4) {
       if (request.status == 200) {
         alert("URL exists");
       } else if (request.status == 404) {
         alert("URL does not exist.");
       } else {
         alert("Status is: " + request.status);
       }
     }
   }
诚实地说，这段代码的价值并不太大。服务器必须对请求进行响应，并构造一个响应来填充内容长度的响应头，因此并不能节省任何处理时间。另外，这花费的时间与生成请求并使用 HEAD 请求来查看 URL 是否存在所需要的时间一样多，因为它要生成使用 GET 或 POST 的请求，而不仅仅是如 清单 7 所示一样来处理错误代码。不过，有时确切地了解目前什么可用也是非常有用的；您永远不会知道何时创造力就会迸发或者何时需要 HEAD 请求！

有用的 HEAD 请求

您会发现 HEAD 请求非常有用的一个领域是用来查看内容的长度或内容的类型。这样可以确定是否需要发回大量数据来处理请求，和服务器是否试图返回二进制数据，而不是 HTML、文本或 XML（在 JavaScript 中，这 3 种类型的数据都比二进制数据更容易处理）。

在这些情况中，您只使用了适当的头名，并将其传递给 XMLHttpRequest 对象的 getResponseHeader() 方法。因此要获取响应的长度，只需要调用 request.getResponseHeader("Content-Length");。要获取内容类型，请使用 request.getResponseHeader("Content-Type");。

在很多应用程序中，生成 HEAD 请求并没有增加任何功能，甚至可能会导致请求速度变慢（通过强制生成一个 HEAD 请求来获取有关响应的数据，然后在使用一个 GET 或 POST 请求来真正获取响应）。然而，在出现您不确定有关脚本或服务器端组件的情况时，使用 HEAD 请求可以获取一些基本的数据，而不需要对响应数据真正进行处理，也不需要大量的带宽来发送响应。

结束语

对于很多 Ajax 和 Web 程序员来说，本文中介绍的内容似乎是太高级了。生成 HEAD 请求的价值是什么呢？到底在什么情况下需要在 JavaScript 中显式地处理重定向状态代码呢？这些都是很好的问题；对于简单的应用程序来说，答案是这些高级技术的价值并不是非常大。

然而，Web 已经不再是只需实现简单应用程序的地方了；用户已经变得更加高级，客户期望能够获得更好的稳定性、更高级的错误报告，如果应用程序有 1% 的时间停机，那么经理就可能会因此而被解雇。

因此您的工作就不能仅仅局限于简单的应用程序了，而是需要更深入理解 XMLHttpRequest。

·如果您可以考虑各种就绪状态 —— 并且理解了这些就绪状态在不同浏览器之间的区别 —— 就可以快速调试应用程序了。您甚至可以基于就绪状态而开发一些创造性的功能，并向用户和客户回报请求的状态。
·如果您要对状态代码进行控制，就可以设置应用程序来处理脚本错误、非预期的响应以及边缘情况。结果是应用程序在所有的时间都可以正常工作，而不仅仅是只能一切都正常的情况下才能运行。
·增加这种生成 HEAD 请求的能力，检查某个 URL 是否存在，以及确认某个文件是否被修改过，这样就可以确保用户可以获得有效的页面，用户所看到的信息都是最新的，（最重要的是）让他们惊讶这个应用程序是如何健壮和通用。
本文的目的并非是要让您的应用程序显得十分华丽，而是帮助您去掉黄色聚光灯后重点昭显文字的美丽，或者外观更像桌面一样。尽管这些都是 Ajax 的功能（在后续几篇文章中就会介绍），不过它们却像是蛋糕表面的一层奶油。如果您可以使用 Ajax 来构建一个坚实的基础，让应用程序可以很好地处理错误和问题，用户就会返回您的站点和应用程序。在接下来的文章中，我们将添加这种直观的技巧，这会让客户兴奋得发抖。

Tags: ajax, 教程

AJAX | 评论:0 | Trackbacks:0 | 阅读:207

Records:33‹12345›