Home > Developer > Ajax

Examples of AJAX

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Two reference methods:

Code:
  1. // 1
  2. <Script language = "JavaScript">
  3. Window. Alert ("welcome to the scripting language! ");
  4. </SCRIPT>
  5. // 2
  6. <Script language = "JavaScript" src = "init. js"> </SCRIPT>

// ========== 1. Implement rich page interaction effects with JavaScript (using the scroll subtitle <marquee> component ).

Code:
  1. <Body>
  2. <Marquee onmouseover = "this. Stop ()" onmouseout = "This. Start ()" scrolldelay = 110>
  3. <A href = "" target = _ blank>
  4. <Font color = # ff0000> hot news: Ajax has become a new favorite of Internet technologies </font>
  5. </A> </marquee> <br>
  6. </Body>

// =========== 2. Verify the submitted content. Use Dom to obtain data in form.

Code:
  2. <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en">
  3. <HTML>
  4. <Head>
  5. <Title> 3-3.html </title>
  6. <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
  7. <Script language = "JavaScript">
  9. Function checkvalid ()
  10. {
  11. VaR tmp1, temp2, str1;
  12. // Obtain the value of text1
  13. Str1 = Document. myform. Email. value;
  14. // Obtain the location of the First @
  15. Tmp1 = str1.indexof ('@');
  16. // Obtain the location of the last @
  17. Tmp2 = str1.lastindexof ('@');
  18. If (str1.length = 0)
  19. // Invalid. The string is an empty string.
  20. Window. Alert ("Enter the content before submitting ");
  21. Else if (tmp1 <0)
  22. // Invalid. The string does not contain the @ character
  23. Window. Alert ("the string does not contain @");
  24. Else if (tmp1 = 0 | tmp1 = str1.length-1)
  25. // Invalid. The position of the @ character is incorrect.
  26. Window. Alert ("@ the wrong position of the character ");
  27. Else if (tmp1! = Tmp2)
  28. // Invalid. The @ character contains more than one
  29. Window. Alert ("@ character appears more than one ");
  30. Else
  31. // Valid email address
  32. Alert ("the email address is valid ");
  33. }
  34. </SCRIPT>
  36. </Head>
  37. <Body>
  38. <Form name = "myform">
  39. Enter your email address: <br>
  40. <Input type = text value = "" name = "email">
  41. <P> <input type = button value = "Submit" name = "OK" onclick = "checkvalid ()">
  42. </Form>
  43. </Body>
  44. </Html>

// --------- 3. event-driven list box ---------------------

Code:
  2. <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en">
  3. <HTML>
  4. <Head>
  5. <Title> 3-4.html </title>
  6. <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
  7. <Script language = "JavaScript">
  8. // Function called when the selected option in the list box changes
  9. Function Change ()
  10. {
  11. // Display different author information based on the selected options
  12. Switch (myform. option1.value)
  13. {
  14. Case "S1 ":
  15. Myform.txt 1. value = "Zhang guiyuan ";
  16. Break;
  17. Case "S2 ":
  18. Myform.txt 1. value = "Jia yanfeng ";
  19. Break;
  20. Case "S3 ":
  21. Myform.txt 1. value = "Zhang Yuxiang ";
  22. Break;
  23. }
  24. }
  25. </SCRIPT>
  27. </Head>
  29. <Body>
  30. <P> query the author information:
  31. <Form name = "myform">
  32. <Select type = "select" name = "option1" onchange = "Change ()">
  33. <Option selected value = "S0"> <----- select -----> </option>
  34. <Option value = "S1"> Web 2.0 development entry and Practice (Java) </option>
  35. <Option value = "S2"> Web 2.0 development entry and Practice (. NET) </option>
  36. <Option value = "S3"> Ajax core technology </option>
  37. </SELECT>
  38. <Input type = "text" name = "txt1" value = "">
  39. </Form>
  40. </Body>
  41. </Html>

Effect: select different options in the list box. The corresponding information of the author is displayed in the text box.

// 4 ---------

Code:
  1. <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en">
  2. <HTML>
  3. <Head>
  4. <Title> 3-5.html </title>
  5. <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
  6. <Script language = "JavaScript">
  7. Function Init ()
  8. {
  9. Alert ("Welcome! ");
  10. }
  11. Function finish ()
  12. {
  13. Alert ("next time! ");
  14. }
  15. </SCRIPT>
  16. </Head>
  17. <Body onload = "Init ()" onUnload = "finish ()">
  18. </Body>
  20. </Html>

You can use the onload event to interact with the database.

// ------------------- 5 onfoucs event and onblur Event Focus event -------------------

Code:
  1. <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en">
  2. <HTML>
  3. <Head>
  4. <Title> 3-6.html </title>
  5. <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
  6. <Script language = "JavaScript">
  7. Function begin ()
  8. {
  9. Usrid. value = "";
  10. }
  11. Function end ()
  12. {
  13. Alert ("Please confirm the entered information. Thank you! ");
  14. }
  15. </SCRIPT>
  16. </Head>
  17. <Body>
  18. <Input type = "text" value = "Enter the user name" name = "usrid" onfocus = "begin ()" onblur = "end ()">
  19. </Body>
  20. </Html>

// Effect: first, display the preset content in the text box. Insert the content based on the cursor. the preset content disappears!

=================================== JavaScript event summary ====================== ====

 

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More