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

【摘要】很多时候，我们都会使用 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. }

13. // 2、3 连接服务器，发送请求

14. // 连接服务器 open(方法 GET/POST , 请求地址 , 是否异步传输)

15. // （1）使用 get 方法

16. var method = "get"

17. if(method == "get")

18. {

19. 	xhr.open('GET', '1.php?a=aabb', true);

20. 	xhr.send();	//	发送请求

21. }else

22. {

23. 	// （2）使用 post 方法 , 需要加上下面的请求头

24. 	xhr.open('POST', '1.php', true);	//	这一句放在前面

25. 	xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

26. 	xhr.send("b=bbaa");	// 发送请求方式

27. }

29. //	4.接收返回数据

30. //	onreadystatechange 指的是存储函数，每当 readyState 属性改变时，就会调用该函数。

31. xhr.onreadystatechange = function()

32. {

33. 	//	整个请求过程依次从 0 到 4 发生变化

34. 	// 0:请求未初始化 1:服务器连接已建立 2:请求已接受

35. 	// 3:请求处理中   4:请求已完成,且相应就绪

36.     if(xhr.readyState == 4)

37.     {

38.     	//	返回的 http 状态码

39.         //	1xx:信息展示   2xx:成功       3xx:重定向

40.         //	4xx:客户端错误 5xx:服务器端错误

41.         if(xhr.status == 200)

42.         {

43.             console.log(xhr.responseText);

44.         }else

45.         {

46.             console.log(xhr.status);

47.         }

48.     }

49. }

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

1. //	封装版本，完整可用

2. function ajax(url,data,method)

3. {

5. 	var xhr = null;

6. 	if(window.XMLHttpRequest)

7. 	{

8. 	    xhr = new XMLHttpRequest();

9. 	}else 

10. 	{

11. 	    xhr = new ActiveXObject('Microsoft.XMLHTTP');

12. 	}

14. 	if(method == "post")

15. 	{

16. 		xhr.open('POST', url, true);

17. 		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

18. 		xhr.send(data);

19. 	}else

20. 	{

21. 		xhr.open('GET', url + '?' + data, true);

22. 		xhr.send();

23. 	}

25. 	xhr.onreadystatechange = function()

26. 	{

27. 		if(xhr.readyState == 4)

28. 	    {

29. 	        if(xhr.status == 200)

30. 	        {

31. 	            success(xhr.responseText);

32. 	        }else

33. 	        {

34. 	        	failed(xhr.status);

35. 	        }

36. 	    }

37. 	}

39. }

41. function success(message)

42. {

43. 	console.log('success ' + message)

44. }

46. function failed(message)

47. {

48. 	console.log('failed ' + message)

49. }

51. window.onload = function()

52. {

53. 	ajax('1.php','a=aabb');

54. 	ajax('1.php','b=bbaa',"post");

55. }

我要打赏