原生JS实现AJAX ，并做封装

最新推荐文章于 2022-05-17 11:21:20 发布

原创最新推荐文章于 2022-05-17 11:21:20 发布 · 272 阅读

CC 4.0 BY-SA版权

文章标签：

2 篇文章

订阅专栏

本文介绍了一种使用原生JavaScript实现AJAX的方法，并对其进行了封装以便于调用。该方法支持GET请求，通过回调函数处理服务器响应的数据。

/**

		 * 用原生JS实现AJAX，并封装

		 * @param  url             向服务器请求需要读取的文件名

		 * @param  responseHandler 用来处理请求成功返回的文本responseText的一个函数

*/

		function ajax (url,responseHandler) {

			//1、创建ajax对象

			var xhr;

			if (window.XMLHttpRequest) { //非IE6浏览器，是IE7及以上

				xhr = new XMLHttpRequest();

			}else{ //如果没有XMLHttpRequest，说明就是IE6浏览器

				xhr = new ActiveXObject("Microsoft.XMLHTTP"); //参数Microsoft.XMLHTTP 不区分大小写，写成microsoft.xmlhttp 也是可以的。不过按照习惯还是写成 Microsoft.XMLHTTP

}

			//2、连接服务器

			//open(方法,文件名,异步传输）

	        //方法

	            //传输方式是get方式还是post方式。

	        //文件名

	            //告诉服务器要读哪个文件

	        //异步传输

	            //异步：多件事一件一件的做

	            //同步：多件事情一起进行

	            //但是js里面的同步、异步和现实里的同步、异步相反。

	                //同步：多件事一件一件的做

	                //异步：多件事情一起进行

	        //ajax天生是用来做异步的

			xhr.open("GET",url,true); //异步方式

			//3、发送请求

			xhr.send();

			//4、接收服务器返回内容，并处理

			xhr.onreadystatechange = function(){

				//xhr.readyState ：查看浏览器和服务器进行到哪一步了。

                //0->（未初始化）：还没有调用 open() 方法。

                //1->（载入）：已调用 send() 方法，正在发送请求。

                //2->（载入完成）：send() 方法完成，已收到全部响应内容。

                //3->（解析）：正在解析响应内容。

                //4->（完成）：响应内容解析完成，客户端可以调用了。

				if(xhr.readyState == 4 && xhr.status == 200){

					alert("请求成功！");

					responseHandler(xhr.responseText);

				}else{

					alert("请求失败！");

}

}

}