原生态JS操作ajax

Posted 2020-06-21

ajax相信大家都不陌生，不过现在大家基本都是用jQuery来实现ajax，因为jQuery已经封装好了，比较简单，大家学起来容易，而且大多公司基本都用。有人可能觉得既然jQuery那么简单，干嘛要用原生js来实现了，多麻烦的。不过个人觉得虽然原生js实现有点麻烦，但是学会了也并没有坏处。

原生态js实现ajax步骤。

-、创建对象(XMLHttprequest)

如果是ie5、ie6的浏览器是不支持 XMLHttpRequest()这个对象的，需要用ActiveXObject()这个对象来实现。

实现方式：

       var xmlHttp;
	if(window.XMLHttpRequest){
		xmlHttp = new XMLHttpRequest();
	}else{
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}

上面的window.XMLHTTPRequest判断浏览器是否支持XMLHttpRequest()这个功能，如果支持就创建对象不支持则创建ActiveXObject对象。

对象创建好后就需要创建请求。

二、创建请求(open()、send())

使用open()方法来创建请求，里面有两个参数，第一个参数是用什么方式来请求，一般常用的get post两种，第二个参数就是要请求的url地址。

用send()方法来发送参数，如果请求的地址不带参数则填null。

实现方式(GET方式实现)：

xmlHttp.open("GET","http://www.baidu.com");
xmlHttp.send(null);

请求创建完成后需要服务器响应，接收服务器响应

三、服务器响应(responseText、responseXML)

如果是文本内容就用responseText这个来接收，如果是XML格式内容就需要用resourceXML来接收。

这儿先讲用responseText来响应。

实现方式：

xmlHttp.onreadystatechange = function(){
	if(xmlHttp.readyState == 4){
		if(xmlHttp.status == 200 || xmlHttp.status==304){
			alert(xmlHttp.responseText);					
		}
	}
}

上面看到好几个判断。

第一个判断 onreadystatechange 当请求被发送到服务器时，需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState是指存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

以下就是readyState存储的值。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

所以在上面判断readyState是否等于4 如果等于4的话就代表响应已经完成。

status这个是一个状态值判断200或者304是请求处于正常状态。

常用status状态值有 200(正常) 403(找不到页面) 500(服务器异常)。

这个就是用原生js来操作ajax。

以下是完整例子。

代码：

var xmlHttp;
if(window.XMLHttpRequest){
	xmlHttp = new XMLHttpRequest();
}else{
	xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open("GET","http://www.baidu.com");
xmlHttp.send(null);
xmlHttp.onreadystatechange = function(){
	if(xmlHttp.readyState == 4){
		if(xmlHttp.status == 200 || xmlHttp.status==304){
			alert(xmlHttp.responseText);
		}
	}
}

这儿请求的地址是百度网址，只是做个测试。

本文出自 “music” 博客，请务必保留此出处http://boysmusic.blog.51cto.com/9398683/1750189