ajax从服务器读数据，本地网页不刷新

最新推荐文章于 2022-12-01 21:11:15 发布

qianlingvip

最新推荐文章于 2022-12-01 21:11:15 发布

阅读量324

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zhangqling/article/details/83381897

本文深入讲解了自创Ajax函数的工作原理，包括不同浏览器下对象的创建、GET与POST请求的区别、异步通信的实现、请求状态的理解及回调函数的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function ajax(url,fnSucc,fnFild){
	//1.创建对象
	var oAjax=null;
		if (window.XMLHttpRequest) {
			oAjax=new XMLHttpRequest();
		}else{
			oAjax=new ActiveXObject("Microsoft.XMLHTTP");
		}
		//2.连接服务器
		oAjax.open("GET",url,true);
		//3.发送请求
		oAjax.send();
		//4.接收数据
		oAjax.onreadystatechange=function(){
			if (oAjax.readyState==4) {
				if (oAjax.status==200) {
					fnSucc(oAjax.responseText);
				}else{
					if (fnFild) {
						fnFild();
					}
				}
			}
		}
}

1、 if (window.XMLHttpRequest) {
           oAjax=new XMLHttpRequest();
       }else{
           oAjax=new ActiveXObject("Microsoft.XMLHTTP");
       }

如果参数未定义会出错，如果属性未定义则为underfind；所以XMLHttpRequest前要加window。其中new ActiveXObject("Microsoft.XMLHTTP")为IE浏览器获取对象特有，其他浏览器则是new XMLHttpRequest()。

2、oAjax.open("GET",url,true);服务器通信方式有两种，一种是get方式，另一种是post方式，get方式把数据放在url中，post则不是。服务器为异步通信，所以用true。

3、当ajax与服务器通信时调用onreadystatechange函数。

4、readyState属性表示请求状态，有5种状态，分别为：

（1）0（未初始化）还没有调用open方法。

（2）1（载入）已调用send方法，正在发送请求。

（3）2（载入完成）send（）方法完成，已收到全部相应内容。

（4）3（解析）正在解析相应内容。

（5）4（完成）相应内容解析完成，可在客户端调用。

5、status属性：表示请求结果，其中成功为200，未找到为404。

6、responseText属性：表示返回结果，从服务器返回内容。

7、调用ajax函数如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自创ajax</title>
	<script src="new_ajax.js"></script>
	<script>
		window.onload=function(){
			var oBtn=document.getElementById("btn");
			oBtn.onclick=function(){
				ajax("page1.txt",function(str){
					alert(str);
				});
			}
				
		}
	</script>
</head>
<body>
	<input type="button" value="点击从服务器获取文件" id="btn">
</body>
</html>