ajax函数封装

最新推荐文章于 2024-05-28 17:24:55 发布

原创最新推荐文章于 2024-05-28 17:24:55 发布 · 104 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个简单的AJAX函数实现，包括创建AJAX对象、连接服务器、发送请求及接收数据的过程。详细解释了-onreadystatechange事件的作用及readyState和status属性。

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

function ajax( url , fnSucc ,fnFaild){

    //1、创建ajax对象
    if(window.XMLHttpRequest){  //所有的全局变量，全局函数实际上都是属于window的
        //未定义的属性会输出undefined
        //未定义的变量会报错
        //一般情况下，属于window下的属性或变量我们都会省略不写，但是这里为了避免避免ie6浏览器报错，加上window
        var oAjax=new XMLHttpRequest;  //非ie6写法
    }else{
        var oAjax=new ActiveXObject("Microsoft.XMLHTTP");  //兼容ie6写法
    }

    //2、连接服务器
    // oAjax.open(  HTTP方法, 请求地址, 异步传输 )
    oAjax.open( 'GET', url, true );
	
    //3、发送请求
    oAjax.send();

    //4、接收数据
    oAjax.onreadystatechange=function(){
        if( oAjax.readyState==4){ //http请求状态
			if( oAjax.status==200){ //请求结果
				fnSucc(oAjax.responseText);				
            }else{
                if(fnFaild){  //如果传入该参数
                    fnFaild("失败："+ oAjax.status);
                }
            }
        }
    }

}

-onreadystatechange属性：当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当readyState 改变时,就会触发 onreadystatechange 事件。

-readyState属性：请求状态
　　》》 0（未初始化）还没有调用open()方法；
　　》》 1 （载入）已调用send（）方法，正在发送请求；
　　》》 2 （载入完成）send（）方法完成，已经收到全部响应内容；
　　》》 3 （解析）正在解析响应内容；
　　》》 4（完成）响应内容解析完成，可以在客户端调用了。
-status属性：请求结果。
-responseText:返回内容