使用原生 javascript 编写 ajax 代码并封装成函数

学习笔记 马富天 2018-11-30 14:34:57 4 0

【摘要】很多时候,我们都会使用 jquery 提供的 ajax 方法,然而有的时候一个很简单的页面,仅仅需要请求一下 ajax 而将整个 jquery 文件加载下来,这样其实很浪费网络带宽,影响访问速度,所以本文详细的编写一下使用原生 js 来实现 ajax 功能,旨在方便以后的调用。

首先,我们查看一下原生 js 发送 ajax 的整个流程,从工作原理上有助于我们理解本文介绍的程序,完整代码如下:

  1. //	1.创建 ajax 对象
  2. var xhr = null;
  3. if(window.XMLHttpRequest)
  4. {
  5. 	//	非 IE 浏览器的写法
  6.     xhr = new XMLHttpRequest();
  7. }else 
  8. {
  9.     // IE 浏览器的写法
  10.     xhr = new ActiveXObject('Microsoft.XMLHTTP');
  11. }
  12. // 2、3 连接服务器,发送请求
  13. // 连接服务器 open(方法 GET/POST , 请求地址 , 是否异步传输)
  14. // (1)使用 get 方法
  15. var method = "get"
  16. if(method == "get")
  17. {
  18. 	xhr.open('GET', '1.php?a=aabb', true);
  19. 	xhr.send();	//	发送请求
  20. }else
  21. {
  22. 	// (2)使用 post 方法 , 需要加上下面的请求头
  23. 	xhr.open('POST', '1.php', true);	//	这一句放在前面
  24. 	xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  25. 	xhr.send("b=bbaa");	// 发送请求方式
  26. }
  27. //	4.接收返回数据
  28. //	onreadystatechange 指的是存储函数,每当 readyState 属性改变时,就会调用该函数。
  29. xhr.onreadystatechange = function()
  30. {
  31. 	//	整个请求过程依次从 0 到 4 发生变化
  32. 	// 0:请求未初始化 1:服务器连接已建立 2:请求已接受
  33. 	// 3:请求处理中   4:请求已完成,且相应就绪
  34.     if(xhr.readyState == 4)
  35.     {
  36.     	//	返回的 http 状态码
  37.         //	1xx:信息展示   2xx:成功       3xx:重定向
  38.         //	4xx:客户端错误 5xx:服务器端错误
  39.         if(xhr.status == 200)
  40.         {
  41.             console.log(xhr.responseText);
  42.         }else
  43.         {
  44.             console.log(xhr.status);
  45.         }
  46.     }
  47. }

理解了 ajax 的基本工作原理,我们就可以按照自己的想法将它封装成一个函数,方便以后的调用。

  1. //	封装版本,完整可用
  2. function ajax(url,data,method)
  3. {
  4. 	var xhr = null;
  5. 	if(window.XMLHttpRequest)
  6. 	{
  7. 	    xhr = new XMLHttpRequest();
  8. 	}else 
  9. 	{
  10. 	    xhr = new ActiveXObject('Microsoft.XMLHTTP');
  11. 	}
  12. 	if(method == "post")
  13. 	{
  14. 		xhr.open('POST', url, true);
  15. 		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  16. 		xhr.send(data);
  17. 	}else
  18. 	{
  19. 		xhr.open('GET', url + '?' + data, true);
  20. 		xhr.send();
  21. 	}
  22. 	xhr.onreadystatechange = function()
  23. 	{
  24. 		if(xhr.readyState == 4)
  25. 	    {
  26. 	        if(xhr.status == 200)
  27. 	        {
  28. 	            success(xhr.responseText);
  29. 	        }else
  30. 	        {
  31. 	        	failed(xhr.status);
  32. 	        }
  33. 	    }
  34. 	}
  35. }
  36. function success(message)
  37. {
  38. 	console.log('success ' + message)
  39. }
  40. function failed(message)
  41. {
  42. 	console.log('failed ' + message)
  43. }
  44. window.onload = function()
  45. {
  46. 	ajax('1.php','a=aabb');
  47. 	ajax('1.php','b=bbaa',"post");
  48. }

版权归 马富天PHP博客 所有

本文标题:《使用原生 javascript 编写 ajax 代码并封装成函数》

本文链接地址:http://www.mafutian.net/397.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

0

0

上一篇《 mysql binlog 学习笔记 》 下一篇《 MySQL 5.7 版本的安装方法(win) 》

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多