原生javascript的ajax

什么是ajax技术

AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML),主要还是javascript。详细的介绍可以百度谷歌,简单地说就是在网页不刷新(即地址栏的url是不变的)的情况下,实现网页部分内容的更新

比如现在很多的登陆都是使用了ajax,如网易首页(http://www.163.com/),鼠标移到登陆处,你填写完表单的账号密码提交,他不会刷新,但上方已经出现了你的用户名,你已经成功登陆了,具体可去体验一番

代码实现

核心代码:my_ajax.js

这个函数有三个参数,第一个是需要请求的url,第二个是成功后的回调函数,第三个是失败后的回调函数
具体代码的解释看注释(那个XMLHttpRequest是当年微软搞出来的,应该比较差,不流行)
function ajax(url, fnSucc, fnFail){
	//1.创建Ajax对象
	//非IE6
	if (window.XMLHttpRequest) {
		var oAjax = new XMLHttpRequest();
	}else{
		//IE6
		var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
	}
	// alert(oAjax);

	//2.连接服务器----open(方法, 文件名[url], 异步传输[boolean])
	//boolean为true --》同步 一件一件事情来
	//boolean为true --》异步 多件事情一起干,无需等待服务器的响应,而是:在等待服务器响应时执行其他脚本,当响应就绪后对响应进行处理,使用ajax,必须设置为true
	oAjax.open("GET", url, true);


	// 3.发送请求
	oAjax.send();


	// 4.接受服务器返回
	oAjax.onreadystatechange = function(){
		// oAjax.readyState();//浏览器和服务器进行到哪一步了
		// 0 (未初始化)
		// 对象已建立,但是尚未初始化(尚未调用open方法)
		// 1 (初始化)
		// 对象已建立,尚未调用send方法
		// 2 (发送数据)
		// send方法已调用,但是当前的状态及http头未知
		// 3 (数据传送中)
		// 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,
		// 4 (完成)
		// 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
		if (oAjax.readyState == 4) {	//读取完成
			if (oAjax.status == 200) {	//200 OK,成功
				fnSucc(oAjax.responseText);  //调用成功的回调函数
			}else{
				if (fnFail) {
					fnFail(oAjax.status);  //调用失败的回调函数
</span>				};
			}	

		};
	};
}

简单实践

在当前目录新建一个html文件,跟着直接用script标签引入进来就可以,调用请看下面
<!-- 
步骤
1.创建Ajax对象
2.连接到服务器
3.发送请求(告诉服务器要什么文件)
4.接收返回值
-->

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>

<script type="text/javascript" src="my_ajax.js"></script>

<body>

<input id="btn" type="button" value="读取">		

</body>

<script>
	

	var btn = document.getElementById('btn');

	btn.onclick = function(){
		ajax("a.txt", function(str){
			alert(str);
		});
	}


</script>
</html>
我们再在当前目录新建a.txt



实验结果:



我还要说

当然实际中我们不会去请求一个静态文件,我们会去请求php,asp,jsp等动态文件,还可以在url后加上get参数(如?content=news&num=10,就是告诉那个我们要请求文件,我要的是新闻,数量是10条),跟着那个文件就会去读取数据库的10条新闻,一般以json的格式打印出来,跟着我们的ajax函数就会抓取我们请求的.php文件等打印出来的新闻数据,跟着我们就可以根据这些数据,利用js更新我们的当前页面的新闻,因为js可以dom操作,具体百度,但一般都是用jquery库比较方便简单,下篇我应该会写我常用的jquery库的ajax

原文地址:https://www.cnblogs.com/cnsec/p/13286567.html