ajax的一些实例

两种引用方法:

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

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

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

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

Code:
  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
  2. <html>
  3. <head>
  4. <title>3-3.html</title>
  5. <metahttp-equiv="content-type"content="text/html;charset=UTF-8">
  6. <ScriptLanguage="JavaScript">
  7. functioncheckValid()
  8. {
  9. vartmp1,temp2,str1;
  10. //获得text1的值
  11. str1=document.myform.email.value;
  12. //获取第一个@的位置
  13. tmp1=str1.indexOf('@');
  14. //获取最后一个@的位置
  15. tmp2=str1.lastIndexOf('@');
  16. if(str1.length==0)
  17. //不合法,字符串为空串
  18. window.alert("请输入内容后再提交");
  19. elseif(tmp1<0)
  20. //不合法,字符串中不包含@字符
  21. window.alert("字符串中不包含@");
  22. elseif(tmp1==0||tmp1==str1.length-1)
  23. //不合法,@字符出现的位置不对
  24. window.alert("@字符出现的位置不对");
  25. elseif(tmp1!=tmp2)
  26. //不合法,@字符出现了不止一个
  27. window.alert("@字符出现了不止一个");
  28. else
  29. //合法的Email地址
  30. alert("E-mail地址合法有效");
  31. }
  32. </Script>
  33. </head>
  34. <body>
  35. <formname="myform">
  36. 请输入您的E-mail地址:<br>
  37. <inputtype=textvalue=""name="email">
  38. <p><inputtype=buttonvalue="提交"name="ok"onclick="checkValid()">
  39. </form>
  40. </body>
  41. </html>

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

Code:
  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
  2. <html>
  3. <head>
  4. <title>3-4.html</title>
  5. <metahttp-equiv="content-type"content="text/html;charset=UTF-8">
  6. <ScriptLanguage="JavaScript">
  7. //当列表框中的被选中选项发生改变时调用的函数
  8. functionchange()
  9. {
  10. //依据选择的不同选项,显示不同的作者信息
  11. switch(myform.option1.value)
  12. {
  13. case"s1":
  14. myform.txt1.value="张桂元";
  15. break;
  16. case"s2":
  17. myform.txt1.value="贾燕枫";
  18. break;
  19. case"s3":
  20. myform.txt1.value="张宇翔";
  21. break;
  22. }
  23. }
  24. </Script>
  25. </head>
  26. <body>
  27. <P>书籍作者信息查询:
  28. <formname="myform">
  29. <SELECTtype="select"name="option1"onchange="change()">
  30. <OPTIONselectedvalue="s0"><-----请选择-----></OPTION>
  31. <OPTIONvalue="s1">Web2.0开发入门与实践(Java)</OPTION>
  32. <OPTIONvalue="s2">Web2.0开发入门与实践(.NET)</OPTION>
  33. <OPTIONvalue="s3">Ajax核心技术</OPTION>
  34. </SELECT>
  35. <Inputtype="text"name="txt1"value="作者信息">
  36. </form>
  37. </body>
  38. </html>

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

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

Code:
  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
  2. <html>
  3. <head>
  4. <title>3-5.html</title>
  5. <metahttp-equiv="content-type"content="text/html;charset=UTF-8">
  6. <ScriptLanguage="JavaScript">
  7. functioninit()
  8. {
  9. alert("欢迎光临!");
  10. }
  11. functionfinish()
  12. {
  13. alert("下次再来!");
  14. }
  15. </Script>
  16. </HEAD>
  17. <BODYOnLoad="init()"OnUnLoad="finish()">
  18. </BODY>
  19. </html>

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

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

Code:
  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
  2. <html>
  3. <head>
  4. <title>3-6.html</title>
  5. <metahttp-equiv="content-type"content="text/html;charset=UTF-8">
  6. <scriptlanguage="JavaScript">
  7. functionbegin()
  8. {
  9. usrId.value="";
  10. }
  11. functionend()
  12. {
  13. alert("请确认输入的信息,谢谢!");
  14. }
  15. </script>
  16. </head>
  17. <body>
  18. <inputtype="text"value="请输入用户名"name="usrId"onfocus="begin()"onblur="end()">
  19. </body>
  20. </html>

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

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

你可能感兴趣的:(JavaScript,html,Ajax,互联网,脚本)