<![CDATA[七小木东]]> http://www.qixiaomudong.cn/index.php zh-cn http://www.qixiaomudong.cn/read.php?205 <![CDATA[Ajax表单验证用户名是否存在]]> 七小木东 <admin@yourname.com> Mon, 01 Dec 2008 03:19:43 +0000 http://www.qixiaomudong.cn/read.php?205
客户端收集表单信息。
使用XMLHttpRequest对象提交到服务器。
服务器完成验证的逻辑，返回结果信息。
浏览器端根据服务器返回的信息对用户做出一定的提示。
不过由于我的空间不支持任何服务器段语言，所以把本应在服务器的逻辑搬到了浏览器，由JavaScript来做，服务器只负责提供一个用户名的列表。最后的效果如下，试着输入test，cainiao8这些用户名，都会显示已注册。

JavaScript代码分析
首先，当文档载入完毕的时候，给表格设置change事件的响应函数ajaxValidate，代码如下：

addEventSimple(window,'load',function(){  var test = document.getElementById('username');  addEventSimple(test,'change',ajaxValidate);});

这样，当用户名文本框内的值改变之后，就会调用ajaxValidate函数，其代码如下：

function ajaxValidate(){  
var options = {    
url:'ajax/ajaxUsernames.xml',    
listener:callback,    
method:'GET'  
}  
var request = createRequest(options);  
request.send(null);}

它会使用之前介绍的createRequest函数初始化一个XMLHttpRequest对象，并且将它发送到服务器，请求ajaxUsernames.xml文件。

最后就是callback函数了：

function callback(){
  var xmlDoc = this.responseXML;
  var root = xmlDoc.getElementsByTagName('root')[0];
  var nodes = root.getElementsByTagName("username");
  var currentNode = null;
  var username = document.getElementById('username').value;
  for(var i = 0; i < nodes.length; i++) {
    currentNode = nodes[i];
    if(username == currentNode.childNodes[0].nodeValue){
      document.getElementById('test').innerHTML = '对不起!'+username+'已经被注册。';
      return;
    }
  }
  document.getElementById('test').innerHTML = '用户名' + username +'可以使用!';}

callback函数在已经存在的用户名搜索当前用户输入的名字，判断是否已经存在。

]]> http://www.qixiaomudong.cn/read.php?109 <![CDATA[spry]]> 七小木东 <admin@yourname.com> Tue, 07 Oct 2008 09:20:45 +0000 http://www.qixiaomudong.cn/read.php?109
这个轻量型的框架强调：“易用”。
1，使用spry框架，必须引用的两个核心js文件

代码
<script type="text/javascript" src="../../includes/xpath.js"></script>      
<script type="text/javascript" src="../../includes/SpryData.js"></script>    

2，创建一个数据器dataset

代码
var dsPhotos = new Spry.Data.XMLDataSet("/photos.php", "/gallery/photos/photo", { method: "POST", postData: "galleryid=2000&offset=20&limit=10", headers: { "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8" } });      
var dsPhotos2 = new Spry.Data.XMLDataSet("/photos.php?galleryid=2000", "/gallery/photos/photo");    

method：为请求发送方式，POST / GET ；默认为GET
postData：为请求参数，可省略，可直接把"/photos.php"换成/photos.php?galleryid=2000&offset=20&limit=10
Content-Type：为头信息
3，不使用缓存

代码
Var dsPhotos = new Spry.Data.XMLDataSet("/photos.php?galleryid=2000", "/gallery/photos/photo", { useCache: false })    

这里要重点说明一下，我在应用时，曾经发现设置不用缓存时，页面仍然不是最新数据，我是用一个servlet生成xml，然后对生成的数据进行删除和添加，但页面显示的数据不会自动更新。
后来在adobe的官方论坛上找到了答案，在IE中，使用userCache:false是不够的，还要在生成xml的jsp，php等中设置头不使用cache,如在生成xml的jsp/servlet中是要加上：
response.addHeader("Cache-Control","no-cache");
以上问题只存在IE中，在firefox和opera中不存在。注，spry对opera9版本支持很好，使用版本8的朋友要注意了。
另外，也可以在构造完数据器后，再设置缓存：

代码
dsData.useCache = false;      
dsData.loadData();    


4，获取数据形式
假如我们上面的请求，返回的xml如下：

代码
<gallery id="12345">      
    <photographer id="4532">John Doe</photographer>      
    <email>john@doe.com</email>      
      
    <photos id="2000">      
        <photo path="sun.jpg" width="16" height="16" />      
        <photo path="tree.jpg" width="16" height="16" />      
        <photo path="surf.jpg" width="16" height="16" />      
      
    </photos>      
</gallery>    
那么“gallery/photos/photo”返回的数据是下面的数组：
[
{ "@path": "sun.jpg", "@width": 16, "@height": 16 },
{ "@path": "tree.jpg", "@width": 16, "@height": 16 },
{ "@path": "surf.jpg", "@width": 16, "@height": 16 }
]


代码
var rows = dsPhotos.getData(); // 获取所有行.      
var path = rows[0]["@path"];   // 获取第一行中"@path"的值      
      
dsPhotos.setCurrentRowNumber(2); // 将第3行做为当前处理行，下标以0开始      
      
var id = dsPhotos.getData()[2]["ds_RowID"]; // 获取第3行的ID.      
      
dsPhotos.setCurrentRow(id); // 通过第3行的id，将第3行设为当前处理行.    

5，排序

代码
dsPhotos.sort("@path"); //以"@path"列的值为关健字对行排序      
        
dsPhotos.sort("@path", "toggle"); //"ascending", "descending"和"toggle"，默认是 "ascending"。      
var dsPhotos = new Spry.Data.XMLDataSet("/photos.php?galleryid=2000", "/gallery/photos/photo", { sortOnLoad: "@path", sortOrderOnLoad: "descending" });//也可在数据构造器中设置初始排序      
      
dsPhotos.setColumnType("@width", "number");//设置类型      
dsPhotos.setColumnType("@height", "number");      
      
...      
      
dsPhotos.sort("@width"); // 对 "@width" 列数据进行排序.    

6，去除重复

代码
dsPhotos.distinct(); // Remove all duplicate rows.      
//distinct()方法是具有破坏性的，多余的行是被删掉的，如果你想再得到所有的包括重复的原始项就得重新载入XML数据。      
var dsPhotos = new Spry.Data.XMLDataSet("/photos.php?galleryid=2000", "/gallery/photos/photo", { distinctOnLoad: true });//可在构造时预设    

7，设置过滤器

代码
var myFilterFunc = function(dataSet, row, rowNumber)      
{      
    if (row["@path"].search(/^s/) != -1)    //只返回以s开头的行      
        return row;                     // Return the row to keep it in the data set.      
    return null;                        // Return null to remove the row from the data set.      
}      
      
      
dsPhotos.filterData(myFilterFunc); // Filter the rows in the data set.      
dsPhotos.filter(myFilterFunc); // 不破坏数据，是建一个新的数组      
      
      
dsPhotos.filterData(null); // 取消过滤.    

8，自动刷新，以毫秒为单位

代码
var dsPhotos = new Spry.Data.XMLDataSet("/photos.php?galleryid=2000", "/gallery/photos/photo", { useCache: false, loadInterval: 10000 });//在构造器设置      
      
      
dsPhotos.startLoadInterval(10000); // 设置自动刷新      
...      
      
dsPhotos.stopLoadInterval(); // 停止自动刷新    

9，把类注册成观察器

代码
var myObserver = new Object;      
myObserver.onDataChanged = function(dataSet, data)      //可支持:onPreLoad / onPostLoad / onLoadError / onDataChanged / onPreSort / onPostSort / onCurrentRowChanged        
//第一个是发送通知的对象，做为数据器观察器，这个值永远都是dataSet对象。第二个参数可以不定义，也可以是一个对象(内置对象)      
{      
    alert("onDataChanged called!";      
};      
      
dsPhotos.addObserver(myObserver);      
      
      
dsPhotos.removeObserver(myObserver);    

10，把函数方法注册为观察器

代码
function myObserverFunc(notificationType, dataSet, data)　　//notfication,是通知器类型，dataSet是数据器对象，data是要观察的数据      
{      
    if (notificationType == "onDataChanged")      
        alert("onDataChanged called!";      
    else if (notificationType == "onPostSort")      
        alert("onPostSort called!";      
};      
      
dsPhotos.addObserver(myObserverFunc);    

11，动态区域块
所有使用Spry动态区域块的HTML页面都要在它们的<html>标签中加入xmlns:spry=http://ns.adobe.com/spry
代码
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">      
.... ....      
   .... ....        
    <ul spry:region="dsPhotos">      
        <li>{dsPhotos::path}</li>      
    </ul>    
COL, COLGROUP, FRAMESET, HTML, IFRAME, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR 不能设为动态区域

12，数据引用
{<数据器名>::<数据器列名>}
如果一个动态区域块只和一个数据器相关联，则你甚至可以省略掉数据器的名字
<li>{@path}</li>
ds_RowID - 这是数据器的行id。这个id可以帮我们指定数据器中的一个数据。它和数据是对应的，即使数据执行了排序操作，这个id和数据的对应关系也不会变化。
ds_RowNumber - 这是数据器当前数据的行号。
ds_RowNumberPlus1 - 这个与上面的ds_RowNumber相同，只不过它规定了数据的行号从1开始，而不是从0开始。
ds_RowCount - 它是数据器中数据的行的数量。如果使用了一个非破坏性的过滤器，则它的值是这个过滤器执行后得到的行的数量。
ds_UnfilteredRowCount - 在执行非破坏性过滤器前，数据器中行的数量。
ds_CurrentRowID - 当前行的id。这个值不会改变，除非使用了一个循环的构造。
ds_CurrentRowNumber - 当前行的行号。这个值不会改变，除非使用了一个循环的构造。
ds_SortColumn - 上一次排序所依赖的列名。如果这个数据器的数据还未进行过排序，则返回一个空字符串。
ds_SortOrder - 数据器中数据排序的参数，将返回三种字符串"ascending", "descending", 或空字符串.。
ds_EvenOddRow - 它返回的是"even"或"odd"，告诉我们ds_RowNumber的值是奇数还是偶数。
13，循环

代码
//方式一：          
<li spry:repeat="dsPhotos">{@path}</li>          
        
//方式二：          
<ul spry:repeatchildren="dsPhotos">          
<li>{@path}</li>          
</ul>        
      
//只输出以s开头的 spry:test属性的值可以是任何等于0或非0值的JavaScript表达示。如果这个表达示返回非0值，这个内容将会被输出，相当于if <>0就输出后面元素。        
<li spry:repeat="dsPhotos" spry:test="'{@path}'.search(/^s/) != -1;">{@path}</li>    

14，if 条件

代码
<li spry:if="'{@path}'.search(/^s/) != -1;">{@path}</li>      
      
//if/else的形式，要使用"spry:choose"属性      
            <div spry:choose="spry:choose">      
                 <div spry:when="'{@path}' == 'surf.gif'">{@path}</div>      
                 <div spry:when="'{@path}' == 'undefined'">Path was not defined.</div>      
                 <div spry:default="spry:default">Unexpected value for path!</div>      
          </div>    

15，状态

代码
<div spry:region="dsEmployees">      
    <div spry:state="loading">正在载入数据 ...</div>      
    <div spry:state="error">数据载入失败!</div>      
    <ul spry:state="ready">      
      <li spry:repeat="dsEmployees"> </li>      
    </ul>      
</div>    

16，通过对象将区域注册成观察者

代码
myObserver = new Object;      
myObserver.onPostUpdate = function(notifier, data)      
{      
     alert("onPostUpdate called for " + data.regionID);      
};      
...      
// 调用addObserver() 将类注册为观察者.      
Spry.Data.Region.addObserver("employeeListRegion", myObserver);      
...      
//注销      
Spry.Data.Region.removeObserver("employeeListRegion", myObserver);      
...      
      
<ul id="employeeListRegion" spry:region="dsEmployees">      
...      
</ul>    

17，以函数将区域注册成观察者

代码
function myRegionCallback(notificationState, notifier, data)      
{      
      if (notificationType == "onPreUpdate") //onLoadingData / onPreUpdate / onPostUpdate / onError        
         alert(regionID + " is starting an update!");      
      else if (notificationType == "onPostUpdate")      
         alert(regionID + " is done updating!");      
}      
      
...      
      
// 注册      
Spry.Data.Region.addObserver("employeeListRegion", MyRegionCallback);      
...      
      
// 注销      
Spry.Data.Region.removeObserver("employeeListRegion", MyRegionCallback);      
...      
      
      
<ul id="employeeListRegion" spry:region="dsEmployees">      
...      
</ul>    

18，主细节模式，同一数据器

代码
<span spry:region="dsEmployees">      
<select spry:repeatchildren="dsEmployees" onchange="dsEmployees.setCurrentRow(this.value)">      
    <option spry:if=" == 0" value="" selected="selected"></option>      
      
    <option spry:if=" != 0" value=""></option>      
</select>      
</span>      
<span spry:detailregion="dsEmployees">{@id} - - </span>      
//spry:detailregion"会在接收到"CurrentRowChanged"通知后改变自己的展示形式。    

19，主细节模式，多个数据器

代码
var dsStates = new Spry.Data.XMLDataSet("../../data/states/states.xml", "states/state");      
var dsCities = new Spry.Data.XMLDataSet("../../data/states/{dsStates::url}", "state/cities/city");      
//两个数据器有依赖关系，也可以用:"/webapp/cities.php?stateid={dsStates::@id}".      
      
<form name="selectForm">      
//State:      
    <span spry:region="dsStates" id="stateSelector">      
        <select spry:repeatchildren="dsStates" name="stateSelect" onchange="document.forms[0].citySelect.disabled = true; dsStates.setCurrentRow(this.value);">      
      
            <option spry:if=" == 0" value="" selected="selected"></option>      
            <option spry:if=" != 0" value=""></option>      
      
        </select>      
    </span>      
      
//City:      
    <span spry:region="dsCities" id="citySelector">      
        <select spry:repeatchildren="dsCities" name="citySelect">      
      
            <option spry:if=" == 0" value="" selected="selected"></option>      
            <option spry:if=" != 0" value=""></option>      
      
        </select>      
    </span>      
</form>    
]]> http://www.qixiaomudong.cn/read.php?106 <![CDATA[AJAX 请求php页面]]> 七小木东 <admin@yourname.com> Thu, 25 Sep 2008 09:44:59 +0000 http://www.qixiaomudong.cn/read.php?106
在下面的 AJAX 例子中，我们将演示当用户向 web 表单中输入数据时，网页如何与在线的 web 服务器进行通信。

此例包括三张页面：

a simple HTML form
a JavaScript
a PHP page
HTML 表单

这是 HTML 表单。它包含一个简单的 HTML 表单和指向 JavaScript 的链接：









First Name:
onkeyup="showHint(this.value)">


Suggestions:







例子解释 - HTML 表单

正如您看到的，上面的 HTML 页面含有一个简单的 HTML 表单，其中带有一个名为 "txt1" 的输入字段。

该表单是这样工作的：

当用户在输入域中按下并松开按键时，会触发一个事件
当该事件被触发时，执行名为 showHint() 的函数
表单的下面是一个名为 "txtHint" 的 。它用作 showHint() 函数所返回数据的占位符。
JavaScript

JavaScript 代码存储在 "clienthint.js" 文件中，它被链接到 HTML 文档：

var xmlHttp

function showHint(str)
{
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request")
  return
  }
var url="gethint.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}
return xmlHttp;
}
例子解释:

showHint() 函数

每当在输入域中输入一个字符，该函数就会被执行一次。

如果文本框中有内容 (str.length > 0)，该函数这样执行：

定义要发送到服务器的 URL（文件名）
把带有输入域内容的参数 (q) 添加到这个 URL
添加一个随机数，以防服务器使用缓存文件
调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象，并在事件被触发时告知该对象执行名为 stateChanged 的函数
用给定的 URL 来打开打开这个 XMLHTTP 对象
向服务器发送 HTTP 请求
如果输入域为空，则函数简单地清空 txtHint 占位符的内容。

stateChanged() 函数

每当 XMLHTTP 对象的状态发生改变，则执行该函数。

在状态变成 4 （或 "complete"）时，用响应文本填充 txtHint 占位符 txtHint 的内容。

GetXmlHttpObject() 函数

AJAX 应用程序只能运行在完整支持 XML 的 web 浏览器中。

上面的代码调用了名为 GetXmlHttpObject() 的函数。

该函数的作用是解决为不同浏览器创建不同 XMLHTTP 对象的问题。

PHP 页面

被 JavaScript 代码调用的服务器页面是一个名为 "gethint.php" 的简单服务器页面。

"gethint.php" 中的代码会检查名字数组，然后向客户端返回对应的名字：

// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

//get the q parameter from URL
$q=$_GET["q"];

//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i  {
  if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
    {
    if ($hint=="")
      {
      $hint=$a[$i];
      }
    else
      {
      $hint=$hint." , ".$a[$i];
      }
    }
  }
}

//Set output to "no suggestion" if no hint were found
//or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}

//output the response
echo $response;
?>
如果存在从 JavaScript 送来的文本 (strlen($q) > 0)，则：

找到与 JavaScript 所传送的字符相匹配的名字
如果找到多个名字，把所有名字包含在 response 字符串中
如果没有找到匹配的名字，把 response 设置为 "no suggestion"
如果找到一个或多个名字，把 response 设置为这些名字
把 response 发送到 "txtHint" 占位符
]]> http://www.qixiaomudong.cn/read.php?53 <![CDATA[php的ajax框架xajax入门与试用]]> 七小木东 <admin@yourname.com> Wed, 23 Jul 2008 08:20:08 +0000 http://www.qixiaomudong.cn/read.php?53 xajax功能很简单，但很灵活！~它不象其它一些大的框架，功能确实强大，但执行速度不敢恭维。功能虽多，但不够灵活。api多，学起来简直如同学习一门新的语言。

二、xajax功能介绍
xajax的功能比较简单，但就因为简单，所以灵活。同时，这也要求使用者要对javascrīpt / vbs 客户端脚本有一定的了解。因为它的功能是比较活的。可以说单纯使用xajax，什么也做不出，但配合js / vbs 又什么都做的出。
xajax主要是使用xajaxResponse这个类，它提供了一些方法，举例如下：
1、addAlert($sMsg)
弹出警告
2、addscrīpt($sJS)
执行某段js
3、$objResponse->addAssign("","","")
给页面中的某个元素附值，或者修改其属性
等等。。。。

所以xajax不是死的，它不能做出XXX XXX功能来，但是它可以灵活的控制客户端的js / vbs，去完成我们要实现的效果。

三、xajax安装配置
不需要特别的安装和配置，只要下载其文件包，解压到网站目录中
下载地址：
http://www.xajaxproject.org/

三、用xajax做会员注册和登陆
1、数据库
采用mysql5.0，数据库名zl 表名zl_user    表结构

引用

id              int(11)        auto_increment
zl_user       varchar(50)
zl_pwd       varchar(50)
email         varchar(50)


2、reg.php    注册文件(内有说明)

引用

<?php
       require_once("inc/xajax.inc.php");
//使用xajax则必须首先引入xajax.inc.php
       $xajax = new xajax("inc/signup.php");
//创建一个xajax对象，为singup.php
       $xajax->registerFunction("processForm");
//使用singup.php里的processForm函数
?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" href="http://blogbeta.blueidea.com/css/style.css" _fcksavedurl=""http://blogbeta.blueidea.com/css/style.css"" type="text/css">
<title>无标题文档</title>  
<?php $xajax->printJavascrīpt('inc/'); ?>  
<scrīpt type="text/javascrīpt">
          function submitSignup()
          {
              xajax.$('submitButton').disabled=true;
              xajax.$('submitButton').value="http://blogbeta.blueidea.com/wait...";
//修改id为submitButton的属性
              xajax_processForm(xajax.getFormValues("signupForm"));
//这里xajax_ 后面跟要使用哪个函数这里是 processForm，后面跟的是signupForm这个表单各项的集合
              return false;
          }
</scrīpt>
</head>
<body ><form id="signupForm" action="javascrīpt:void(null);" ōnSubmit="submitSignup();">  
<div id="main">
     <div id="m1">用 户 注 册</div>
     <div id="formDiv">
       <table width="100%" border="0" cellspacing="0" cellpadding="5">
         <tr>
           <td align="right"> </td>
           <td> </td>
         </tr>
         <tr>
           <td width="31%" align="right">用户名：</td>
           <td width="69%"><input name="usr" type="text" id="usr" />
             *</td>
         </tr>
         <tr>
           <td align="right">密码：</td>
           <td><input name="pwd" type="password" id="pwd" />
             *</td>
         </tr>
         <tr>
           <td align="right">密码：</td>
           <td><input name="pwd2" type="password" id="pwd2" />
             *</td>
         </tr>
         <tr>
           <td align="right">Email：</td>
           <td><input name="email" type="text" id="email" />
             * 可用于找回密码</td>
         </tr>
         <tr align="center">
           <td colspan="2"><input type="submit" name="submitButton" value="提交" class="button" />
               <input type="reset" name="Submit2" value="重置" class="button" /></td>
         </tr>
       </table>
     </div>
</div>
</form>
</body>
</html>


点提交后执行singup.php里的processForm函数

3、inc/singup.php

引用

<?php
define ('XAJAX_DEFAULT_CHAR_ENCODING', 'gb2312' );
//注意这里，必须要设置gb2312，不然中文会乱码
require_once("xajax.inc.php");
require_once("function.php");      
$xajax = new xajax();
$xajax->registerFunction("processForm");
//同reg.php文件

function processForm($aFormValues)
{
     $objResponse = new xajaxResponse();
     require_once("conn.php");  
     $usr=$aFormValues['usr'];  
     $email=$aFormValues['email'];
     $pwd=$aFormValues['pwd'];
     $pw=Md5($pwd);  
     $errmsg="";
     //要过滤的非法字符
     $ArrFiltrate=array("'",";","union");

      foreach($aFormValues as $key=>$value){
          if (FunStringExist($value,$ArrFiltrate)){
              $objResponse->addAlert("输入的信息含有非法字符\"' ; union!\"");
              $objResponse->addAssign("submitButton","value","继续");
              $objResponse->addAssign("submitButton","disabled",false);
              return $objResponse;  
          }
      }
    
      if (trim($usr) == "")
      {
          $errmsg.="请输入用户名!\n";    
      }
      if (trim($pwd) == "")
      {
          $errmsg.="请输入密码!\n";
      }
      if ($pwd != $aFormValues['pwd2'])
      {
          $errmsg.="两次输入的密码不一致!\n";
      }
    
      if (!CheckEmailAddr($email))
      {
          $errmsg.="邮件地址不正确!\n";
      }    
      $sql="select * from zl_usr where zl_usr='$usr'";
      $result=mysql_query($sql,$db);
      if($myrow=mysql_fetch_array($result)){
          $errmsg.="用户名已经存在!\n";
      }          
      if ($errmsg=="")
      {      
          $sForm = "注册成功<br>用户名:".$usr."<br>email:".$email."";
          $sql="insert into zl_usr(zl_usr,zl_pwd,email) values('$usr','$pw','$email')";
          $result=mysql_query($sql,$db);
          $objResponse->addAssign("formDiv","innerHTML",$sForm);
      }
      else
      {
          $objResponse->addAlert($errmsg);  
//弹出错误信息
          $objResponse->addAssign("submitButton","value","继续");
//修改submitButton的value为继续
          $objResponse->addAssign("submitButton","disabled",false);
//修改submitButton这个按扭的属性
      }
    
      return $objResponse;
}


$xajax->processRequests();
?>


这个文件中对信息进行了有效性判断，包括：用户名是否已经注册过、信息中是否有非法字符、邮件地址是否正确、两次输入的密码是否一致，如果没有错误则输入到数据库中，并
$objResponse->addAssign("formDiv","innerHTML",$sForm);
在formDiv中重新插入代码，内容为$sForm
$sForm = "注册成功<br>用户名:".$usr."<br>email:".$email."";

如果有错误信息则
$objResponse->addAlert($errmsg);  
//弹出错误信息
$objResponse->addAssign("submitButton","value","继续");
$objResponse->addAssign("submitButton","disabled",false);
//修改submitButton这个按扭的属性

3、login.php 登陆文件

引用

<?php
       require_once("inc/xajax.inc.php");
       $xajax = new xajax("inc/login.php");
       $xajax->registerFunction("processForm");
?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" href="http://blogbeta.blueidea.com/css/style.css" _fcksavedurl=""http://blogbeta.blueidea.com/css/style.css"" type="text/css">
<title>无标题文档</title>  
<?php $xajax->printJavascrīpt('inc/'); ?>  
<scrīpt type="text/javascrīpt">
          function submitSignup()
          {
              xajax.$('submitButton').disabled=true;
              xajax.$('submitButton').value="http://blogbeta.blueidea.com/wait...";
              xajax_processForm(xajax.getFormValues("signupForm"));
              return false;
          }
</scrīpt>
</head>
<body ><form id="signupForm" action="javascrīpt:void(null);" ōnSubmit="submitSignup();">  
<div id="main">
     <div id="m1">用 户 登 陆</div>
     <div id="formDiv">
       <table width="100%" border="0" cellspacing="0" cellpadding="5">
         <tr>
           <td align="right"> </td>
           <td> </td>
         </tr>
         <tr>
           <td width="31%" align="right">用户名：</td>
           <td width="69%"><input name="usr" type="text" id="usr" />
             *</td>
         </tr>
         <tr>
           <td align="right">密码：</td>
           <td><input name="pwd" type="password" id="pwd" />
             *</td>
         </tr>

         <tr align="center">
           <td colspan="2"><input type="submit" name="submitButton" value="提交" class="button" />
               <input type="reset" name="Submit2" value="重置" class="button" /></td>
         </tr>
       </table>
     </div>
</div>
</form>
</body>
</html>


4、inc/login.php    登陆用的处理文件


引用

<?php
define ('XAJAX_DEFAULT_CHAR_ENCODING', 'gb2312' );
require_once("xajax.inc.php");
require_once("function.php");  
$xajax = new xajax();
$xajax->registerFunction("processForm");
    
function processForm($aFormValues)
{
     $objResponse = new xajaxResponse();
     require_once("conn.php");  
     $usr=$aFormValues['usr'];  
     $email=$aFormValues['email'];
     $pwd=$aFormValues['pwd'];
     $pw=Md5($pwd);  
     $errmsg="";
     //要过滤的非法字符
     $ArrFiltrate=array("'",";","union");

      foreach($aFormValues as $key=>$value){
          if (FunStringExist($value,$ArrFiltrate)){
              $objResponse->addAlert("输入的信息含有非法字符\"' ; union!\"");
              $objResponse->addAssign("submitButton","value","继续");
              $objResponse->addAssign("submitButton","disabled",false);
              return $objResponse;  
          }
      }
    
      if (trim($usr) == "")
      {
          $errmsg.="请输入用户名!\n";    
      }
      if (trim($pwd) == "")
      {
          $errmsg.="请输入密码!\n";
      }
      $sql="select * from zl_usr where zl_usr='$usr' and zl_pwd='$pw'";
      $result=mysql_query($sql,$db);
      if(!$myrow=mysql_fetch_array($result)){
          $errmsg.="用户名不存在,或密码错误!\n";
      }          
      if ($errmsg=="")
      {      
          $sForm = "登陆成功";
          $objResponse->addAssign("formDiv","innerHTML",$sForm);
      }
      else
      {
          $objResponse->addAlert($errmsg);  
          $objResponse->addAssign("submitButton","value","继续");
          $objResponse->addAssign("submitButton","disabled",false);
      }
    
      return $objResponse;
}


$xajax->processRequests();
?>



登陆于注册原理差不多，就不废话了：）

另外下面是两个用到的文件代码 conn.php    function.php
conn.php

引用

<?php
$database="zl";//MYSQL数据库名
$db = mysql_connect("127.0.0.1", "root","123456");//MYSQL数据库用户名和密码
mysql_select_db($database,$db);
?>
function.php

<?php
    function CheckEmailAddr($C_mailaddr)
{
      if (!eregi("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*$",
      $C_mailaddr))
      {
          return false;
      }
      return true;
}
//是否存在数组中的值
function FunStringExist($StrFiltrate,$ArrFiltrate){
      foreach ($ArrFiltrate as $key=>$value){
          if (eregi($value,$StrFiltrate)){
              return true;
          }
          }
      return false;
}
?>




]]> http://www.qixiaomudong.cn/read.php?33 <![CDATA[一个很好的jquery的教程，值得大家去看一下，接下来的几天我会在学习中对其进行解释]]> 七小木东 <admin@yourname.com> Mon, 07 Jul 2008 09:50:01 +0000 http://www.qixiaomudong.cn/read.php?33 http://wiki.jquery.org.cn/doku.php?id=jquery%E4%B8%AD%E6%96%87%E6%8C%87%E5%AF%BC:15%E5%A4%A9%E5%AD%A6%E4%BC%9Ajquery_2 ]]> http://www.qixiaomudong.cn/read.php?30 <![CDATA[Ajax信息反馈显示(类似GMAIL、126等)]]> 七小木东 <admin@yourname.com> Mon, 07 Jul 2008 07:03:15 +0000 http://www.qixiaomudong.cn/read.php?30 <!-- saved from url=(0044)http://www.qqip.cn -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>new document</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2900.2180" name=GENERATOR>
<META content="" name=author>
<META content="" name=keywords>
<META content="" name=description>
<STYLE type=text/css>#show_feedBack_message {
BORDER-RIGHT: #f00 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #f00 1px solid; PADDING-LEFT: 3px; FONT-SIZE: 12px; BACKGROUND: #fc0; PADDING-BOTTOM: 3px; BORDER-LEFT: #f00 1px solid; LINE-HEIGHT: 18px; PADDING-TOP: 3px; BORDER-BOTTOM: #f00 1px solid
}
{
FONT-SIZE: 12px
}
OL LI {
MARGIN: 15px 0px
}
OL LI A {
FONT-SIZE: 14px; COLOR: #00f
}
</STYLE>
</HEAD>
<BODY>
<SCRIPT type=text/javascript>
<!--
/*
message:要显示的消息
x,y:显示消息框的坐标,默认为左上角
delay:延迟多长时间消失，-1为永不消失，单位为毫秒
*/
function feedBackMessage(message,x,y,delay){
if(!message) return;
//只允许百分数或数值参数
x=/\d{1,2}%|100%|left|right/.test(x)?x:(parseInt(x)||0)+"px";
y=/\d{1,2}%|100%|top|bottom/.test(y)?y:(parseInt(y)||0)+"px";
delay=parseInt(delay)||-1;
var fdDiv=document.getElementById('show_feedBack_message');
if(!fdDiv){
var showMessage=document.createElement("<div id='show_feedBack_message' style='z-index:10000;filter:alpha(opacity=100);position:absolute;white-space:nowrap'></div>");
document.body.appendChild(showMessage);
fdDiv=document.getElementById('show_feedBack_message');
}

if(feedBackMessage.timer){clearInterval(feedBackMessage.timer)}
fdDiv.innerHTML=message;
fdDiv.style.display="";
var docWidth=document.documentElement.scrollWidth>document.documentElement.clientWidth?document.documentElement.scrollWidth:document.documentElement.clientWidth;
var docHeight=document.documentElement.scrollHeight>document.documentElement.clientHeight?document.documentElement.scrollHeight:document.documentElement.clientHeight;
if(/left|right/.test(x)){
x=(x=="left")?"0px":(docWidth-fdDiv.offsetWidth)+"px";
}
if(/top|bottom/.test(y)){
y=(y=="top")?"0px":(docHeight-fdDiv.offsetHeight)+"px";
}
fdDiv.style.left=x;
fdDiv.style.top=y;
fdDiv.filters.Alpha.Opacity=100;

//渐隐效果
var step=parseInt(delay/100);
var alpha=fdDiv.filters.Alpha.Opacity;
if(delay!=-1){
feedBackMessage.timer=setInterval(function(){
if(fdDiv.filters.Alpha.Opacity>0){
fdDiv.filters.Alpha.Opacity--
}else{
clearInterval(feedBackMessage.timer);
fdDiv.style.display="none"
}
},step);
}
}
//-->
</SCRIPT>

<DIV style="TEXT-ALIGN: center">
<DIV style="MARGIN: 15px auto; WIDTH: 96%; TEXT-ALIGN: left">
<OL>
<LI>(默认设置)显示位置：左上角 消失时间：不消失<BR><BR><A
onclick="feedBackMessage('消息提示测试1......');return false"
href="http://ajaxbbs.net/test/feedBackMessage.html#">feedBackMessage('消息提示测试......')</A>

<LI>显示位置：left:200px,top:200px 消失时间：5秒后<BR><BR><A
onclick="feedBackMessage('消息提示测试1......','200','200',5000);return false"
href="http://ajaxbbs.net/test/feedBackMessage.html#">feedBackMessage('消息提示测试1......','200','200',5000)</A>

<LI>显示位置：页面右上部 消失时间：3秒后<BR><BR><A
onclick="feedBackMessage('消息提示测试2......','right','top',3000);return false"
href="http://ajaxbbs.net/test/feedBackMessage.html#">feedBackMessage('消息提示测试2......','right','top',3000)</A>

<LI>显示位置：left:50%,top:50% 消失时间：2秒后<BR><BR><A
onclick="feedBackMessage('<a href=\'#\'>消息</a>提示测试3......','50%','50%',2000);return false"
href="http://ajaxbbs.net/test/feedBackMessage.html#">feedBackMessage('<a
href=#>消息</a>提示测试3......','50%','50%',2000)</A>
<LI>显示位置：left:500px,top:200px 消失时间：不消失<BR><BR><A
onclick="feedBackMessage('消息提示测试4......','500','200',-1);return false"
href="http://ajaxbbs.net/test/feedBackMessage.html#">feedBackMessage('<a
href=#>消息</a>提示测试4......','500','200',-1)</A> </LI></OL></DIV>
<DIV
style="FONT-SIZE: 14px; MARGIN: 15px auto; WIDTH: 96%; LINE-HEIGHT: 20px; TEXT-ALIGN: left">函数语法：feedBackMessage(Message,X,Y,Delay)
<BR><BR><STRONG>参数介绍：</STRONG> <BR><U>Message：</U>必填参数。该参数为要显示的消息内容，可以为html内容
<BR><U>X：</U>水平方向的位置，可以是数值如50，250等，也可以是百分比如50%，或者是以下两个参数：left(信息框左侧紧邻页面左侧),right(信息框右侧紧邻页面右侧)。默认为left。
<BR><U>Y：</U>垂直方向的位置，可以是数值，也可以是百分比，或者是以下两个参数：top(信息框顶部紧邻页面顶部),bottom(信息框底部紧邻页面底部)。默认为top。
<BR><U>Delay：</U>显示时间，即多长时间后消失，单位为毫秒，如5000即5秒后消失，设定为-1则永不消失。默认为-1
</DIV></DIV></BODY></HTML> ]]>