Ajax学习

最新推荐文章于 2021-09-11 10:40:01 发布

Pinky_W

最新推荐文章于 2021-09-11 10:40:01 发布

阅读量613

点赞数

分类专栏： js学习与思考文章标签：前端 javascript ajax

本文链接：https://blog.youkuaiyun.com/pinger1225/article/details/38796331

版权

js学习与思考专栏收录该内容

8 篇文章

订阅专栏

本文深入探讨了AJAX请求的实现流程，并通过实例展示了如何利用AJAX从文件中获取数据。包括创建AJAX对象、连接服务器、发送请求及接收响应的基本步骤，以及如何通过事件监听来监控请求状态和处理数据。

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

ajax 请求：

1.创建Ajax对象

2.连接服务器

3.发送请求

4.接收返回值

eg: 取‘123.txt’中的数据：

1.创建Ajax对象（两种方法创建）

- ie6：new ActiveXObject("Microsoft.XMLHTTP");

- 其他：new XMLHttpRequest();

兼容写法：

        var oAjax=null;
        if(window.XMLHttpRequest){          //必须判断属性，不能用变量
		oAjax=new XMLHttpRequest();
	}
	else{
		oAjax=new ActiveXObject("Microsoft.XMLHTTP");
	}

2.连接服务器

open(方法，url，是否异步)，我们要取123.txt中的数据。

      oAjax.open('GET','123.txt',true);

3.发送请求

send()

      oAjax.send();

4.接收返回值，请求状态监控

onreadystatechange事件：
- readystate属性：请求状态
0:未初始化
1:已调用send()方法，真正该发送请求
2:send()方法已完成，已收到全部相应内容（可能被加密了）
3:正在解析相应内容（解析成js能理解的东西）
4:相应内容解析完成，不代表是否成功
- status表示是否成功。200成功，30*重定向，404没找到。

- responseText 取回服务器返回的数据

oAjax.onreadystatechange=function(){
	if(oAjax.readyState==4){
		if(oAjax.status==200){
			alert('成功'+oAjax.responseText);
		}<pre name="code" class="javascript">        <span style="font-family: Arial, Helvetica, sans-serif;">else{</span>

alert('失败');}}};

将ajaxj抽象成函数，供以后调用：

参数分别是请求数据地址，返回数据的函数，失败与否的提示

function ajax(url,fnSucc,fnFaild){
	var oAjax=null;
	if(window.XMLHttpRequest){
		oAjax=new XMLHttpRequest();
	}
	else{
		oAjax=new ActiveXObject("Microsoft.XMLHTTP");
	}
	oAjax.open('GET',url,true);
	oAjax.send();
	oAjax.onreadystatechange=function(){
		if(oAjax.readyState==4){
			if(oAjax.status==200){
				fnSucc(oAjax.responseText);
			}
			else{
				if(fnFaild){         
					fnFaild();    
				}
			}
		}
	};
}

测试：

oBtn.οnclick=function(){
	ajax('123.txt',function(str){
		alert(str);
	},function(){
		alert('失败');
	})
};