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

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

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

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

//	1.创建 ajax 对象

var xhr = null;

if(window.XMLHttpRequest)

	//	非 IE 浏览器的写法

    xhr = new XMLHttpRequest();

}else

    // IE 浏览器的写法

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

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

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

// （1）使用 get 方法

var method = "get"

if(method == "get")

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

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

}else

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

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

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

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

//	4.接收返回数据

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

xhr.onreadystatechange = function()

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

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

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

    if(xhr.readyState == 4)

    	//	返回的 http 状态码

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

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

        if(xhr.status == 200)

            console.log(xhr.responseText);

        }else

            console.log(xhr.status);

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

//	封装版本，完整可用

function ajax(url,data,method)

	var xhr = null;

	if(window.XMLHttpRequest)

	    xhr = new XMLHttpRequest();

	}else

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

	if(method == "post")

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

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

		xhr.send(data);

	}else

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

		xhr.send();

	xhr.onreadystatechange = function()

		if(xhr.readyState == 4)

	        if(xhr.status == 200)

	            success(xhr.responseText);

	        }else

	        	failed(xhr.status);

function success(message)

	console.log('success ' + message)

function failed(message)

	console.log('failed ' + message)

window.onload = function()

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

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

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

顶1

踩1