苗苗合作交流: Javascript/Ajax

[Javascript] 网页表单的javascript集成验证方法举例

Fri, 09 Dec 2005 08:16:42 GMT

作为一名Web设计人员、一名Coder，你是否已经厌倦了网页设计中的表单验证问
题？不厌其烦的拷贝 if(x) { alert('wrong');} ，还是使用一个难以尽和我意的
IDE ？好吧，让我来告诉你一种比较lazy的写法，你也许就不会对表单验证那么头大
了……
    原理：
           表单验证无非是要对要收集每一条信息进行验证，也就是要写一个名为
       frmValid的javascript函数，在其中执行如下操作：
             ...
             if (待验证条目不符合条件)
             {
                  alert('出错了!');
                  待验证条目.focus();
                  return false;
             }
             ...
             // all right
             return true;
           当然，<form ... onsubmit='return frmValid()'>必须包含在
       HTML代码中。想想看，待验证条目越多代码越长，也就越容易出错。
           下面我们把验证条目放到一个数组里，如下：
             elemArray = new Array(
                 '待验证条目名',
                 '验证条件',
                 '出错提示');
           那么验证代码将大大精简，我们只要如下使用循环就可实现上述冗长
       代码时下的功能，这里我们用with和eval语句构造判断条件：
             with(eval('obj.'+elems[i][0]))
             {
                 if(eval(elems[i][1]))
                 {
                     window.alert(elems[i][2]);
                     focus();
                     return false;
                 }
             }
           我们建立多位数组就可实现循环遍历每个条目：
             elems = new Array(
                 new Arrary( ...),
                 ...
             );
             for(i = 0; i < elems.length; i++)
             {
                 // 上面的验证语句
             }


    实战：
        1、使用如下例子编写验证脚本：
<SCRIPT LANGUAGE="javascript" type="text/javascript">
//
// Function: frmValid
// ------------------
// Author    hongz
// Usage:    YourForm.onsubmit="return frmValid(this)".
// Purpose: To validate form elements in an integrated way.
//
function frmValid(obj)
{
    // Elements array, initialization for validation
    elems = new Array(
        new Array(
            'username',  // name of elements to be validated
            'value.length<1 || value.search(/[^a-zA-z0-9_]/)>=0',
                         // validation condition
            '无效的用户名:只能输入6-20位字母、数字、下划线的组合!'),
                         // prompt on failure
        new Array(
            'password',
            'value.length<5 || value.search(/[^a-zA-z0-9_]/)>=0',
            '无效的密码:只能输入6-20位字母、数字、下划线的组合!'),
        new Array(
            'email',
            'isMail(value)==false',
            'Email是您在网上的重要联络工具,请务必正确填写!')
    );

    // Validate here, using eval statement.
    for(i = 0; i < elems.length; i++)
    {
        with(eval('obj.'+elems[i][0]))
        {
            if(eval(elems[i][1]))
            {
                window.alert(elems[i][2]);
                focus();
                return false;
            }
        }
    }
    return true;
}
//-->
</SCRIPT>
        2、为form添加onsubmit属性：
           <form ... onsubmit='return frmValid(this)'>

    如果你感觉我的方法还行的话，那我欢迎你使用，呵呵……

[Ajax] 实现一个基于Ajax的调查程序

Wed, 23 Nov 2005 02:51:40 GMT

<html>
<head>
<title>投票</title>
<META http-equiv=Content-Language content=zh-cn>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<style type="text/css">

</style>
<?php
include_once("server1.server.php"); #servidor para XAJAX
$xajax->printJavascript();
?>

</head>
<body>

</div>

<?php

global $db;

$poll = $db->getRow("select * from TBL_POLL order by poll_id desc limit 1");
$poll_id = $poll["poll_id"];
$pollitems = $db->getAll("select * from TBL_POLLITEM where poll_id=$poll_id");
?>
<div id=poll class=poll>
<form id="pollForm" action="javascript:void(null);" onsubmit="onSubmit();">
   <?php echo $poll["title"]; ?><br>
   <?php for ($i = 0, $count = count($pollitems); $i < $count; $i++) { ?>
<input type="radio" style="background-color : #CCCCCC;" name="pollitem" value="<?php echo $pollitems[$i]['pollitem_id'] ?>"><?php echo $pollitems[$i]['content'] ?><br>
<?php } ?>
<input type="hidden" name="poll_id" value="<?php echo $poll_id; ?>">
<input type="submit" value="enter">
</form>
<script language=javascript>
    function onSubmit() {
      xajax_poll(xajax.getFormValues("pollForm"));
      document.getElementById('poll').style.display = 'none';
      document.getElementById('pollresult').style.display = 'block';
    }
</script>
</div>

</body>
</html>

服务器端

数据库的表如下

CREATE TABLE TBL_POLL (
poll_id int(11) unsigned NOT NULL default '0',
title varchar(100) NOT NULL default '',
created_date bigint(20) unsigned NOT NULL default '0',
user_id int(11) unsigned NOT NULL default '0',
PRIMARY KEY (poll_id)
) TYPE=MyISAM;

CREATE TABLE TBL_POLLITEM (
pollitem_id int(11) unsigned NOT NULL default '0',
poll_id int(11) unsigned NOT NULL default '0',
content varchar(100) NOT NULL default '',
count int(11) unsigned NOT NULL default '0',
PRIMARY KEY (pollitem_id)
) TYPE=MyISAM;

这个例子中，调查的选项只在页面装载时读出，投票后在原地显示最新的投票信息。不需要弹出窗口

[Ajax] pop窗体显示动态内容的js脚本

Tue, 22 Nov 2005 07:12:46 GMT

今天在微软上看到这个，感觉不错，偷过来咯！（：

如果再用XMLHTTP传值，就灵活多了。

sMenuText = "<b>100:</b> 介绍性的、概括性资料的技术等级。假设对主题或所谈及的主题概念、功能、特性和优点有很少了解或不是十分了解。<p /><b>200:</b> 中间层次资料的技术等级。假设具有100级的知识并有该主题的特定培训和学习。<p /><b>300:</b> 高级资料的技术等级。假设具有200级的知识并且具有对真实应用环境特性的深刻了解和很熟练的编码技巧。提供对产品/技术特性的子集的详细技术概览，包括体系结构、性能、移植、部署和开发。<p /><b>400:</b> 专家级资料的技术等级。假设具有深层次的技术知识和经验，并且具有对主题的详细和全面的理解。提供专家到专家的互动和对特定主题的覆盖。<p />";

      var oPopupBody = oPopup.document.body;
         oPopupBody.style.padding = "4px";
         oPopupBody.style.backgroundColor = "infobackground";
         oPopupBody.style.color = "infotext";
         oPopupBody.style.borderTop = "2px solid threedshadow";
         oPopupBody.style.borderLeft = "2px solid threedshadow";
         oPopupBody.style.borderBottom = "2px solid threeddarkshadow";
         oPopupBody.style.borderRight = "2px solid threeddarkshadow";
         oPopupBody.style.fontFamily = "Tahoma";
         oPopupBody.style.fontSize = "12px";
         oPopupBody.innerHTML = sMenuText;
         oPopupBody.onclick = doClick;

oPopup.show(iX, iY,400, 240, document.body);

}
}
function doClick()
{
oPopup.hide();

} //end doClick

</script>
<tr>
<td>
</td><img id="TechLevelHelpImage" onclick="HelpPopup()" onmouseover="this.style.cursor='hand'" src="dq.gif" align="right" style="border-width:0px;padding-top:3px;" /></td>
</tr>

[Ajax] Ajax 学习笔记(1)

Tue, 22 Nov 2005 06:47:13 GMT

Ajax为Asynchronous JavaScript+XML的缩写，用于不刷新页面与服务器数据交流。
主要有微软的XMLHTTP对象和针对其它浏览器的XMLHTTPRequest对象。

XMLHTTP对象的创建方法：
var myxml = new ActiveXObject("Microsoft.XMLHTTP");
或 var myxml = new ActiveXObject("Msxml2.XMLHTTP.3.0");//IE5.0以上版本。
或 var myxml = new ActiveXObject("Msxml2.XMLHTTP.4.0");//客户端安装了MSXML4.0组件。

其它浏览器XMLHTTPRequest对象的创建方法：
var myxml = new XMLHttpRequest();

http://kokey.blogchina.com/2201728.html提供了一种方法用于创建通用的XMLHTTPRequest对象：

if (window.ActiveXObject && !window.XMLHttpRequest) {
window.XMLHttpRequest = function() {
return new ActiveXObject((navigator.userAgent.toLowerCase().indexOf('msie 5') != -1) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP.3.0');
};
}
var myxml = new XMLHttpRequest();

这种方法很高明，不过没必要非得建立成Msxml2.XMLHTTP对象，统一建立成Microsoft.XMLHTTP对象就行了，就象下面这样：

If(window.ActiveXObject && !window.XMLHttpRequest){
window.XMLHttpRequest = function(){
reutrn new ActiveXObject("Microsoft.XMLHTTP");
}
}
var myxml = new XMLHttpRequest();

该对象较为重要的方法主要有：

open(string method,string URL,[boolean asyn/syn],[string username],[string password]);
打开服务器文件。
参数分别为：
method:字段串类型，必须为"GET"或"POST"，注意要大写。
URL:字段串类型，接受提交的参数并返回结果的文件地址，可以是html（不处理参数）、xml（不处理参数）、ASP、PHP、CGI、.NET程序等。如果用GET方法提交参数，还需要用?parm1=value1&…的形式，将参数/值对提交给服务器程序。
a/s:布尔类型，确定请求是异步（true）还是同步（false），默认为true。
username:字符串类型，向要求验证的网站提交用户名。
Password:字符串类型，向要求验证的网站提交密码。

send(string p/s对);
向服务器提交数据并接收返回结果。
传递的参数为变量名/值对，只有当提交方法为POST时，才需要使用该参数。形式为"变量名=值&…"。

setRequestHeader(string label, string value);
设置http header。
参数：
label:字段串，header类型。
value:字符串，header 值。
当使用POST方法提交参数时，必须在调用send方法前调用带有如下参数的setRequestHeader方法：
myxml.setRequestHeader("Content-Type"," 'application/x-www-form-urlencoded");

其它方法还有：
abort() 停止当前请求。
getAllResponseHeaders() 作为字符串返问完整的headers。
getResponseHeader("headerLabel") 作为字符串返问单个header标签的值。

该对象的属性主要有：

readyState：
对象的不同状态，分别有如下五个值：
0：UNINITIALIZED，XMLHTTP对象已经创建，但还没有初始化（open方法还没有调用）。
1：LOADING，XMLHTTP对象已经创建，但send方法还没有调用。
2：LOADED，send方法已经调用，，并且状态值和响应头信息都可以得到，但是还没有返回response信息。
3：INTERACTIVE，部分数据已经返回，可以通过responseBody和responseText得到部分数据。
4：COMPLETED，所有的数据都已经返回。

responseText：服务器进程返回数据的文本版本

responseXML：服务器进程返回数据的兼容DOM的XML文档对象

responseBody：服务器返回的主题（非文本格式）

responseStream：服务器返回的数据流

status：服务器返回的状态码, 如：404 = "文件末找到" 、200 ="成功"

statusText：服务器返回的状态文本信息

还有一个触发器属性（好象在HTML叫事件来着）：

onreadystatechange：
在XMLHTTPRequest对象的状态发生变化时触发，使用方法与其它HTML对象的事件相同。可以用于根据不同的状态返回不同的结果。

例1：要求返回HTML文件内容，因要求的内容为静态文本，方法不重要，故用GET方式提交。

xmlhttp.html:
<script language="JavaScript">
if (window.ActiveXObject && !window.XMLHttpRequest) {
window.XMLHttpRequest = function() {
return new ActiveXObject('Microsoft.XMLHTTP');
};
}
var myxml = new XMLHttpRequest();
myxml.onreadystatechange = function(){
if(myxml.readyState==4)
document.write(myxml.responseText);
}
myxml.open("GET","http://localhost/request.html",true);
try{
myxml.send();
}
catch(e){
document.write("暂无法连接到服务器");
}
</script>

request.html:

Hello, this is a test html.

例2：用GET方法向服务器php程序提交并输出返回。

xmlhttp.html

<script language="JavaScript">
if (window.ActiveXObject && !window.XMLHttpRequest) {
window.XMLHttpRequest = function() {
return new ActiveXObject('Microsoft.XMLHTTP');
};
}
var myxml = new XMLHttpRequest();
myxml.onreadystatechange = function(){
if(myxml.readyState==4)
document.write(myxml.responseText);
}
myxml.open("GET","http://localhost/request.php?user=badegg&content=welcome",true);
try{
myxml.send();
}
catch(e){
document.write("暂无法连接到服务器");
}
</script>

Request.php:

<?php
echo $_GET['user'].",".$_GET['content']."!";
?>

例3：用POST方法向服务器PHP程序提交数据并输出返回内容。

xmlhttp.html:

<script language="JavaScript">
if (window.ActiveXObject && !window.XMLHttpRequest) {
window.XMLHttpRequest = function() {
return new ActiveXObject('Microsoft.XMLHTTP');
};
}
var myxml = new XMLHttpRequest();
myxml.onreadystatechange = function(){
if(myxml.readyState==4)
document.write(myxml.responseText);
}
myxml.open("POST","http://localhost/request.php ",true);
myxml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
try{
myxml.send("user=goodegg&content=Goodbye");
}
catch(e){
document.write("暂无法连接到服务器");
}
</script>

request.php:

<?php
echo $_POST['user'].",".$_POST['content']."!";
?>

苗苗 合作 交流: Javascript/Ajax

[Javascript] 网页表单的javascript集成验证方法举例

[Ajax] 实现一个基于Ajax的调查程序

[Ajax] pop窗体显示动态内容的js脚本

[Ajax] Ajax 学习笔记(1)

苗苗合作交流: Javascript/Ajax