ajax的一些实例

youshini

浏览: 218669 次
性别:
来自: 广州

最近访客更多访客>>

xiaguangme

chenglibang

jdzctais

horsehome

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

Ajax JavaScript HTML 互联网脚本

两种引用方法：

Code:

//1
<ScriptLanguage="JavaScript">
window.alert("欢迎使用脚本语言!");
</Script>
//2
<ScriptLanguage="JavaScript"src="init.js"></Script>

//========1。借助javaScript实现丰富的页面交互效果（采用滚动字幕<marquee>组件）。

Code:

<body>
<marqueeonmouseover="this.stop()"onmouseout="this.start()"scrollDelay=110>
<ahref=""target=_blank>
<fontcolor=#ff0000>热点新闻:Ajax成为互联网技术中的新宠</font>
</a></marquee><br>
</body>

//=========2.验证提交的内容。其中使用DOM来获取form中的数据。

Code:

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>3-3.html</title>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<ScriptLanguage="JavaScript">
functioncheckValid()
{
vartmp1,temp2,str1;
//获得text1的值
str1=document.myform.email.value;
//获取第一个@的位置
tmp1=str1.indexOf('@');
//获取最后一个@的位置
tmp2=str1.lastIndexOf('@');
if(str1.length==0)
//不合法，字符串为空串
window.alert("请输入内容后再提交");
elseif(tmp1<0)
//不合法，字符串中不包含@字符
window.alert("字符串中不包含@");
elseif(tmp1==0||tmp1==str1.length-1)
//不合法，@字符出现的位置不对
window.alert("@字符出现的位置不对");
elseif(tmp1!=tmp2)
//不合法，@字符出现了不止一个
window.alert("@字符出现了不止一个");
else
//合法的Email地址
alert("E-mail地址合法有效");
}
</Script>
</head>
<body>
<formname="myform">
请输入您的E-mail地址：<br>
<inputtype=textvalue=""name="email">
<p><inputtype=buttonvalue="提交"name="ok"onclick="checkValid()">
</form>
</body>
</html>

//---------3.列表框的事件驱动---------------------

Code:

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>3-4.html</title>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<ScriptLanguage="JavaScript">
//当列表框中的被选中选项发生改变时调用的函数
functionchange()
{
//依据选择的不同选项，显示不同的作者信息
switch(myform.option1.value)
{
case"s1":
myform.txt1.value="张桂元";
break;
case"s2":
myform.txt1.value="贾燕枫";
break;
case"s3":
myform.txt1.value="张宇翔";
break;
}
}
</Script>
</head>
<body>
<P>书籍作者信息查询：
<formname="myform">
<SELECTtype="select"name="option1"onchange="change()">
<OPTIONselectedvalue="s0"><-----请选择-----></OPTION>
<OPTIONvalue="s1">Web2.0开发入门与实践（Java）</OPTION>
<OPTIONvalue="s2">Web2.0开发入门与实践（.NET）</OPTION>
<OPTIONvalue="s3">Ajax核心技术</OPTION>
</SELECT>
<Inputtype="text"name="txt1"value="作者信息">
</form>
</body>
</html>

效果:在列表框中选择不同的选项，在文本框中将显示该书作者的相应信息。

//4-------------------onload页面载入和onunload卸载时发生---------

Code:

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>3-5.html</title>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<ScriptLanguage="JavaScript">
functioninit()
{
alert("欢迎光临！");
}
functionfinish()
{
alert("下次再来！");
}
</Script>
</HEAD>
<BODYOnLoad="init()"OnUnLoad="finish()">
</BODY>
</html>

可以通过onload事件来与数据库交互。

//-------------------5 onfoucs事件和onblur事件焦点事件-------------------

Code:

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>3-6.html</title>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<scriptlanguage="JavaScript">
functionbegin()
{
usrId.value="";
}
functionend()
{
alert("请确认输入的信息，谢谢！");
}
</script>
</head>
<body>
<inputtype="text"value="请输入用户名"name="usrId"onfocus="begin()"onblur="end()">
</body>
</html>

//效果：首先在文本框中显示预设内容，根据光标插入，预设内容消失！

======================javascript事件汇总===================

分享到：

XHTML走马观花 | 一个简单的Ajax登录例子

2010-06-27 14:18
浏览 713
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论