井井客

搜索

原生JS实现ajax的两种方法

虽然利用JQ库可以很方便的实现ajax的异步加载,但是在轻量级的网站JQ只为体积过大就不那么适用了,所以需要原生JS实现ajax了。

原生JS实现ajax的两种方法

之前工作主要是在WEB端,网页上面大部分都使用了JQ库,所以也是使用JQ库提供的AJAX方法去异步加载数据。但是现在的工作主要方向开始转向移动端,那么继续使用JQ库就不是那么的合适了,虽然有zepto.js这种轻量级的Js库,但是学习掌握纯JS实现原生ajax也是有必要的一件事。

AJAX主要使用的是XMLHttpRequest对象,IE6等低版本Ie浏览器使用的则是ActiveXObject。首先需要创建对象,然后进行一些相关操作。主要的注释我已经写在代码里了,详细的注释就不写了,如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现ajax的两种方法</title>
</head>
<body>
<script>
//创建XMLHttpRequest对象,Ie6低版本使用ActiveXObject
var xmlhttp;
function getXmlHttpRequest(){
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    xmlhttp = new ActiveXObject("Microsoft.XMLHttpRequest");
  }
};
//使用GET方式异步获取数据(控制台输出)
function fnGetXml(url) {
	getXmlHttpRequest();
	xmlhttp.open("get", url);
	xmlhttp.send(null);
	xmlhttp.onreadystatechange = function(){
		if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
			console.log(xmlhttp.responseText);//成功后执行代码
		}
	}
};
//使用POST方式异步获取数据(alert输出)
function fnPostXml(url,data){
	getXmlHttpRequest();
	xmlhttp.open("POST",url);
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
	xmlhttp.send(data);
	xmlhttp.onreadystatechange = function(){
		if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
			alert(xmlhttp.responseText);//成功后执行代码
		}
	}
}
//调用封装函数
fnGetXml("data.html");
fnPostXml("data.html",null);
</script>
</body>
</html>

查看时需要注意,我把GET方法用console.log输出数据到了控制台,所以需要用F12打开控制台才能看到数据。

实例地址:http://www.jingjingke.com/web/ajax/

因为AJAX跨域的问题,所以我把放到我自己的网站下面看了效果,另外好像因为前后端的问题Post请求也不能使用,但是语法是正确的,还是可以学习一下(获取数据的话用GET方法就可以了,感觉post应该是用在递交数据的过程中)。

上面的代码主要就是建了两个函数,分别对应POST、GET的方式,然后通过调用函数传递不一样的参数实现反复调用。下面还有两个链接,分别是直接使用这两种方法,代码要略简洁,也可以学习一下。

直接使用GET方法获取:http://www.jingjingke.com/web/ajax/index2.html

直接使用POST方法获取:http://www.jingjingke.com/web/ajax/index3.html

其中index3.html跟之前说的前后端问题一样,代码会报错,直接对比一下跟index2.html的源代码区别就好了。

另外附上readyState五种状态(status的返回状态同http):

状态 简述 详述
0 未初始化,还没有调用send()方法 此阶段确认XMLHttpRequest对象是否创建,并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在,否则浏览器会报错--对象不存在。
1 载入,已调用send()方法且正在发送请求 此阶段对XMLHttpRequest对象进行初始化,即调用open()方法,根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。
2 载入完成,send()方法执行完成,已经接收到全部响应内容 此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据,并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。
3 交互,正在解析响应内容 此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式,为在客户端调用作好准备。状态3表示正在解析数据。
4 完成,响应内容解析完成,可以在客户端调用了 此阶段确认全部数据都已经解析为客户端可用的格式,解析已经完成。值为4表示数据解析完毕,可以通过XMLHttpRequest对象的相应属性取得数据。

内容主要是从网上东拼西凑后整理而来~希望你也能GET到了一点新知识~

文章TAG:Js,ajax

作者:井井客整理来源:互联网
本文标题:原生JS实现ajax的两种方法
本文链接:http://www.jingjingke.com/c/04139.html

上一篇:jS原生获取页面中所有的checkbox
下一篇:JS原生10S倒计时跳到新页面

文章分类

相关阅读

随便看看