(一)AJAX基本介绍和简单实例01

前端之家收集整理的这篇文章主要介绍了(一)AJAX基本介绍和简单实例01前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

AJAX技术基础

AJAX简介

AJAX即“AsynchronousJavascriptAndXML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

Ajax 的核心是 JavaScript 对象 XmlHttpRequest。该对象在 Internet Explorer 5 中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应,而不阻塞用户

很多初学者都以为AJAX是一门是一种新的编程语言,其实它只是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

AJAX基本原理

wKiom1TK9x-REfUIAAAkWVUSLqc905.gif

从图中我们可以看出,在客户端的用户界面通过Javascript引用Ajax引擎,Ajax引擎调用HttpRequest对象(已经被Javascript封装,直接声明即可!)访问WEB服务器,WEB服务器将获得的数据结果生成XML的形式返回至页面前端,并生成对应的HTML+CSS。

Ajax实例01

Demo01.html文件内容如下

  1. <html>
  2. <Metahttp-equiv="content-type"content="text/html;charset=utf-8"/>
  3. <head>
  4. <scripttype="text/javascript">
  5. functionloadXMLDoc1()
  6. {
  7. //声明一个对象
  8. varxmlhttp;
  9. //解决浏览器兼容问题
  10. if(window.XMLHttpRequest)
  11. {
  12. //IE7+,Firefox,Chrome,Opera,Safari版本的浏览器使用
  13. xmlhttp=newXMLHttpRequest();
  14. }
  15. else
  16. {
  17. //IE6,IE5浏览器使用
  18. xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
  19. }
  20. //xmlhttp对象的onreadystatechange是此对象的成员。每当readyState属性改变时,就会调用函数
  21. xmlhttp.onreadystatechange=function()
  22. {
  23. /*
  24. xmlhttp.readyState的值有5个,从0到4发生变化。
  25. 0:请求未初始化
  26. 1:服务器连接已建立
  27. 2:请求已接收
  28. 3:请求处理中
  29. 4:请求已完成,且响应已就绪
  30. */
  31. /*
  32. xmlhttp.status的值一般有两个:
  33. 200:"OK"
  34. 404:未找到页面
  35. */
  36. if(xmlhttp.readyState==4&&xmlhttp.status==200)
  37. {
  38. /*
  39. 将对应的元素的值改为xmlhttp.responseText
  40. responseText:获得字符串形式的响应数据。
  41. responseXML:获得XML形式的响应数据。
  42. */
  43. document.getElementById("myDiv1").innerHTML=xmlhttp.responseText;
  44. }
  45. }
  46. xmlhttp.open("GET","./Demo01.PHP",true);
  47. xmlhttp.send();
  48. }
  49.  
  50. functionloadXMLDoc2()
  51. {
  52. //声明一个对象
  53. varxmlhttp;
  54. //解决浏览器兼容问题
  55. if(window.XMLHttpRequest)
  56. {
  57. //IE7+,从0到4发生变化。
  58. 0:请求未初始化
  59. 1:服务器连接已建立
  60. 2:请求已接收
  61. 3:请求处理中
  62. 4:请求已完成,且响应已就绪
  63. */
  64. /*
  65. xmlhttp.status的值一般有两个:
  66. 200:"OK"
  67. 404:未找到页面
  68. */
  69.  
  70. if(xmlhttp.readyState==4&&xmlhttp.status==200)
  71. {
  72. /*
  73. 将对应的元素的值改为xmlhttp.responseText
  74. responseText:获得字符串形式的响应数据。
  75. responseXML:获得XML形式的响应数据。
  76. */
  77. vartxt="";
  78. xmlDoc=xmlhttp.responseXML;
  79. x=xmlDoc.getElementsByTagName("author");
  80. for(i=0;i<x.length;i++)
  81. {
  82. txt=txt+x[i].childNodes[0].nodeValue+"<br/>";
  83. }
  84. alert(x);
  85. document.getElementById("myDiv2").innerHTML=txt;
  86. }
  87. }
  88. xmlhttp.open("GET","./Demo01.xml",true);
  89. xmlhttp.send();
  90. }
  91. </script>
  92. </head>
  93. <body>
  94. <h2>AJAX实例Demo01</h2>
  95. <buttontype="button"onclick="loadXMLDoc1()">请求数据,返回形式为字符串!</button>
  96. <divid="myDiv1"></div>
  97. <buttontype="button"onclick="loadXMLDoc2()">请求数据,返回形式为XML文件内容</button>
  98. <divid="myDiv2"></div>
  99. </body>
  100. </html>

Demo01.PHP内容

  1. <?PHP
  2. echo“我是获取到的数据!”;
  3. ?>

Demo01.xml内容

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <bookstore>
  3. <bookcategory="children">
  4. <titlelang="en">HarryPotter</title>
  5. <author>JK.Rowling</author>
  6. <year>2005</year>
  7. <price>29.99</price>
  8. </book>
  9. <bookcategory="cooking">
  10. <titlelang="en">EverydayItalian</title>
  11. <author>GiadaDeLaurentiis</author>
  12. <year>2005</year>
  13. <price>30.00</price>
  14. </book>
  15. <bookcategory="web"cover="paperback">
  16. <titlelang="en">LearningXML</title>
  17. <author>ErikT.Ray</author>
  18. <year>2003</year>
  19. <price>39.95</price>
  20. </book>
  21. <bookcategory="web">
  22. <titlelang="en">XQueryKickStart</title>
  23. <author>JamesMcGovern</author>
  24. <author>PerBothner</author>
  25. <author>KurtCagle</author>
  26. <author>JamesLinn</author>
  27. <author>VaidyanathanNagarajan</author>
  28. <year>2003</year>
  29. <price>49.99</price>
  30. </book>
  31. </bookstore>

提示:为了您的方便,我上传了本次实例的附件,您也可以下载试验!

猜你在找的Ajax相关文章