原生JS实现ajax详解

2018-7-25 释然 前端技术资源

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

原生js写ajax可以类比打电话

打电话分下面4步:
1.拿出手机
2.拨号
3.说话
4.听对方说话

ajax也分下面4步:
1.创建ajax对象
2.连接到服务器
3.发送请求(告诉服务器我要什么文件)
4.接收返回值

下面是原生js写ajax的具体写法 :


	
  1. <script>
  2. window.onload=function()
  3. {
  4. var oBtn = document.getElementById("btn1");
  5. oBtn.onclick = function()
  6. {
  7. //1.创建ajax对象
  8. //只兼容非ie6的浏览器,在ie6浏览器上运行会提示没有被定义
  9. //var oAjax = new XMLHttpRequest();//这才是ajax实际的请求
  10. //alert(oAjax);
  11. //ie6浏览器下按照下面方法写,但是在别的浏览器中不能用,会报错。
  12. //var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
  13. //alert(oAjax);
  14. //鉴于上面出现的问题,可以采取下面的方法解决,用if判断是否为IE6浏览器
  15. if(window.XMLHttpRequest)//如果有XMLHttpRequest,那就是非IE6浏览器。()里面加window的原因下面会有描述。
  16. {
  17. var oAjax = new XMLHttpRequest();//创建ajax对象
  18. }
  19. else//如果没有XMLHttpRequest,那就是IE6浏览器
  20. {
  21. var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象
  22. }
  23. //2.连接服务器
  24. //open(方法、文件名、异步传输)
  25. //方法:
  26. //传输方式是get方式还是post方式。
  27. //文件名
  28. //告诉服务器要读哪个文件
  29. //异步传输
  30. //异步:多件事一件一件的做
  31. //同步:多件事情一起进行
  32. //但是js里面的同步和异步和现实的同步异步相反。
  33. //同步:多件事一件一件的做
  34. //异步:多件事情一起进行
  35. //ajax天生是用来做异步的
  36. oAjax.open("GET","a.txt?t='+new Date().getTime()",true);//加上t='+new Date().getTime()"的目的是为了消除缓存,每次的t的值不一样。
  37. //3.发送请求
  38. oAjax.send();
  39. //4.接收返回
  40. //客户端和服务器端有交互的时候会调用onreadystatechange
  41. oAjax.onreadystatechange=function()
  42. {
  43. //oAjax.readyState //浏览器和服务器,进行到哪一步了。
  44. //0->(未初始化):还没有调用 open() 方法。
  45. //1->(载入):已调用 send() 方法,正在发送请求。
  46. //2->载入完成):send() 方法完成,已收到全部响应内容。
  47. //3->(解析):正在解析响应内容。
  48. //4->(完成):响应内容解析完成,可以在客户端调用。
  49. if(oAjax.readyState==4)
  50. {
  51. if(oAjax.status==200)//判断是否成功,如果是200,就代表成功
  52. {
  53. alert("成功"+oAjax.responseText);//读取a.txt文件成功就弹出成功。后面加上oAjax.responseText会输出a.txt文本的内容
  54. }
  55. else
  56. {
  57. alert("失败");
  58. }
  59. }
  60. };
  61. }
  62. };
  63. /*//上面if里面需要些window的原因
  64. //js里面的变量和属性
  65. var a = 12;
  66. alert(a);//页面上弹出12很正常,而实际上输出的是下面的写法,是属于window的,只是window能省就省了。
  67. alert(window.a);//输出结果是一样的
  68. window.alert(window.a);
  69. //想a这种全局变量实际上是winow的一个属性。
  70. //如果不定义一个变量a直接像下面那样输出a
  71. alert(a)//系统会报错,而不是undefind,因为没有定义变量a。
  72. alert(window.a);//如果是这样写,系统就不会报错了,会显示undefind。
  73. //出现上面的原因是因为直接写a从根上就找不到a,而前面加上window只是找不到window的属性a了。*/
  74. </script>

但是,不能每次用ajax的时候都写那么多代码,要把这段ajax代码封装起来,方便使用。

封装ajax代码如下:


	
  1. //最后把代码封装起来,封装起来以后,要给这个函数加上一个参数url.参数是为了替换要读取的文件名
  2. function ajax(url,fnSucc)
  3. {
  4. if(window.XMLHttpRequest)
  5. {
  6. var oAjax = new XMLHttpRequest();
  7. }
  8. else
  9. {
  10. var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象
  11. }
  12. oAjax.open("GET",url,true);//把要读取的参数的传过来。
  13. oAjax.send();
  14. oAjax.onreadystatechange=function()
  15. {
  16. if(oAjax.readyState==4)
  17. {
  18. if(oAjax.status==200)
  19. {
  20. fnSucc(oAjax.responseText);//成功的时候调用这个方法
  21. }
  22. else
  23. {
  24. if(fnfiled)
  25. {
  26. fnField(oAjax.status);
  27. }
  28. }
  29. }
  30. };
  31. }

将封装的ajax调用:


	
  1. <script src="new_ajax.js"></script>//引用封装的ajax文件
  2. <script>
  3. window.onload=function()
  4. {
  5. var oBtn = document.getElementById("btn1");
  6. oBtn.onclick = function()
  7. {
  8. ajax('a.txt',function(str){//读取a.txt文件里面的内容
  9. alert(str);//将读取的内容输出
  10. })
  11. }
  12. };
  13. </script>
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

标签: 原生JS实现ajax详解


Powered by emlog 京ICP备12006971号-1 sitemap