Ajax基础知识总结

前端之家收集整理的这篇文章主要介绍了Ajax基础知识总结前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

仅供小白参考。

  1. <?PHP
  2. /**
  3. Ajax简介,我从W3school中总结一下
  4. 我自己感觉ajax就是在页面中开辟了一小块地方,专门刷新使用,大的页面不懂,这个小宽口和后台进行沟通,传递数据,单独刷新
  5.  
  6. ajax其实就是JS的网络化,在页面不刷新的情况下,通过XMLHttpRequest发送请求
  7.  
  8. HTML 定义了页面的结构
  9. CSS 美化页面样式
  10. JS 控制页面的行为,和用户互动
  11. ****/
  12.  
  13. 1.概念
  14. AJAX = 异步JavaScript XML
  15. AJAX 是一种用于创建快速动态网页的计数,通过后台与服务器进行少量的数据交换,可以使网页实现异步更新,
  16. 同步更新只网页刷新的时候,内容更新
  17. 异步更新指网页没有刷新,但是内容改变了
  18.  
  19. 2.AJAX 创建对象
  20. XMLHttpRequestAJAX的基础
  21.  
  22. 创建XMLHttpRequest对象
  23. 所有的浏览器都已经内建了XMLHttpRequest对象
  24. 创建XMLHttpRequest对象
  25. <script>
  26. var xmlhttp;
  27. if (window.XMLHttpRequest) {
  28. //如果浏览器已经支持XMLHttpRequest对象
  29. //比如 IE7+ firefox chrom opera safari
  30. xmlhttp = new XMLHttpRequest();
  31. }else{
  32. //IE6 IE5
  33. xmlhttp = new ActiveXObjecr("Microsoft.XMLHTTP");
  34. }
  35.  
  36. </script>
  37.  
  38. 3.AJAX 请求
  39. 使用XMLHttpRequest对象的 open() he send() 方法
  40.  
  41. //规定请求类型、url、以及是否异步
  42. open(method,url,async);
  43. method 方法 getpost
  44. url 表示要请求的文件的路径
  45. async 表示异步(true)还是同步
  46. //表示把请求发送到服务器上,只有post才用
  47. send(string);
  48.  
  49.  
  50. xmlhttp.open("GET","test1",true);
  51. xmlhttp.send();
  52.  
  53. GETPOST更加快速简单,大部分都能用
  54. 但是,必须用POST的情况
  55. 1.无法使用缓存文件的时候,需要更新服务器上的文件
  56. 2.向服务器发送大量的数据(由于浏览器或者服务器的限制,GET传输量有限)
  57. 3.发送包含未知字符的用户输入的时候,POST比较可靠
  58.  
  59. 使用GET请求的例子
  60. //加后面的随机数是为了防止得到缓存结果,也可以去掉的
  61. xmlhttp.open("GET","./01.PHP?i="+Math.random(),true );
  62. xmlhttp.send();
  63. //通过GET传送数据
  64. xml.http.open("GET","./01.PHP?username=zhangsan&email=zhangsan@163.com",true);
  65.  
  66. 使用POST请求的例子
  67. //传输表单的使用,要使用setRequestHeader来添加HTTP头信息,在send()中添加数据
  68. xmlhttp.open("POST","./01.PHP",true);
  69. //必须加上以下这句话。
  70. xmlhttp.setRequestHeader("Content-type","application/x-www/form-urlencode");
  71. xmlhttp.send("username=zhangsan&email=zhangsan@163.com");
  72.  
  73. 当第三个参数是true时,表示异步的是要,要规定在响应的地方有 onreadystatechange 事件就绪状态的时候就绪的函数
  74. xmlhttp.onreadystatechange = function(){
  75. if (xmlhttp.readyState==4 && xmlhttp.status==200) {
  76. alert("准备就绪");
  77. document.getElementById("t1").innerHTML = "ok";
  78. 4. //响应,获得字符串形式的响应数据
  79. document.getElementById("t2").innerHTML = xmlhttp.responseText;
  80. //响应,获得xml文件形式的响应格式,并且解析..就是把xml文档读出来
  81. xmlDoc=xmlhttp.responseXML;
  82. txt="";
  83. x=xmlDoc.getElementsByTagName("title");
  84. for (i=0;i<x.length;i++)
  85. {
  86. txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  87. }
  88. document.getElementById("myDiv").innerHTML=txt;
  89. }
  90. }
  91.  
  92. }
  93. 5. onreadystatechange 事件
  94. XMLHttpRequest对象的三个属性 分别是:
  95. 1.onreadysatechange 储存函数,每当readyState属性改变的时候,都会执行一次
  96. 2.readyState 储存XMLHttpRequest的状态 0-4
  97. 0:请求没有初始化
  98. 1:服务器已经建立连接
  99. 2:请求已经收到
  100. 3:请求处理中
  101. 4:请求完成,并且响应已经就绪
  102. 3.state 表示 200OK
  103. 404:未找到页面
  104.  
  105. 因此,只有当readyState ==4 && status == 200 的时候,才表示响应就绪
  106. //readyStatus 每改变一次,onreadystatechange就会执行一次
  107.  
  108. 另外,如果一个页面有多个ajax,应该使用callback()
  109. //callback() 是一种一参数传递给另一个函数函数。意思是一个函数的参数是另一个函数
  110. //这个不会太懂
  111.  
  112. 7.另外,使用ajax可以
  113. 1.ASP/PHP 进行交互,比如提示客户名字,这个我已经写了
  114. 2.数据库进行交互,下拉菜单选择公司,然后列出数据库中的内容
  115. 3.XML文件进行交互,解析xml文件中的内容
  116. //http://www.w3school.com.cn/ajax/ajax_xmlfile.asp
  117.  
  118. 8.AJAX其他的实例
  119. //http://www.w3school.com.cn/example/ajax_examples.asp

猜你在找的Ajax相关文章