• 迎丰收 晒丰收 庆丰收 2018-10-15
  • “捂脸表情”被注册成商标?申请人不认为商标侵权 2018-10-15
  • 战巡南海、绕岛巡航…空军有“飞出去”的主心骨 2018-10-14
  • 幼儿园要求家长写一万字读后感:不能这样玩家长|幼儿园|家长-教育时讯 2018-10-13
  • 中国故宫文物展在希腊举行 2018-10-13
  • 車·晓 第26期 車企官方降价真相幾何? 2018-10-12
  • 宝沃总裁杨嵩:曾和奔驰宝马同水平 已不能同日而语 2018-10-11
  • 新时代党员干部要有更大的担当和作为 2018-10-10
  • “2018-雷霆”专项行动破获百余起台湾间谍案 2018-10-09
  • 朝韩首脑今起在平壤会晤 “金文会”将聚焦三大议题 2018-10-09
  • 2018顺义啤酒节--北京频道--人民网 2018-10-08
  • 台湾遭遇的“断交潮”有无化解之道? 2018-10-08
  • 习近平会见爱沙尼亚总统卡柳莱德 2018-10-08
  • 中国空间站研制建设正有序开展 坚持和平利用 2018-10-07
  • Idlib to further divide Ankara and Moscow 2018-10-06
  • javascript实现原生ajax的几种方法

    栏目: 编程语言 发布于: 2014-05-06 08:41:14

    自从js有了各种框架之后,比如jquery,使用ajax已经变的相当简单了。但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件。但又要使用到ajax这种功能该如何办呢?下面和大家分享几种利用javascript实现原生ajax的方法。

    首先实现ajax之前必须要创建一个 XMLHttpRequest 对象的。如果不支持创建该对象的浏览器,则需要创建 ActiveXObject,具体方法如下:

    var xmlHttp;
    function createxmlHttpRequest(){
    if(window.ActiveXObject){
    	xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }else if(window.XMLHttpRequest)
    	xmlHttp=new XMLHttpRequest();
    }

    (1)下面使用上面创建的xmlHttp实现最简单的ajax get请求:

    function doGet(url){//注意在传参数值的时候最好使用encodeURI处理一下,防止乱码
    	createxmlHttpRequest();
    	xmlHttp.open("GET",url);
    	xmlHttp.send(null);
    	xmlHttp.onreadystatechange=function(){
    		if(xmlHttp.readyState==4&&xmlHttp.status==200){
    			alert('success');
    		}else{
    			alert('fail');
    		}
    	}
    }

    (2)使用上面创建的xmlHttp实现最简单的ajax post请求:

    function doPost(url,data){//注意在传参数值的时候最好使用encodeURI处理一下,防止乱码
    	createxmlHttpRequest();
    	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('success');
    		}else{
    			alert('fail');
    		}
    	}
    }

    (3)下面再分享一个从网上看到的模拟jquery的$.ajax方法的封装:

    var createAjax=function(){
        var xhr=null;
        try{//IE系列浏览器
            xhr=new ActiveXObject("microsoft.xmlhttp");
        }catch(e1){
            try{//非IE浏览器
                xhr=new XMLHttpRequest();
            }catch(e2){
                window.alert("您的浏览器不支持ajax,请更换!");
            }
        }
        return xhr;
    };
    var ajax=function(conf){
        var type=conf.type;//type参数,可选 
        var url=conf.url;//url参数,必填 
        var data=conf.data;//data参数可选,只有在post请求时需要 
        var dataType=conf.dataType;//datatype参数可选 
        var success=conf.success;//回调函数可选
        if(type==null){//type参数可选,默认为get
            type="get";
        }
        if(dataType==null){//dataType参数可选,默认为text
            dataType="text";
        }
        var xhr=createAjax();
        xhr.open(type,url,true);
        if(type=="GET"||type=="get"){
            xhr.send(null);
        }else if(type=="POST"||type=="post"){
            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
            xhr.send(data);
        }
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                if(dataType=="text"||dataType=="TEXT"){
                    if(success!=null){//普通文本
                        success(xhr.responseText);
                    }
                }else if(dataType=="xml"||dataType=="XML"){
                    if(success!=null){//接收xml文档
                        success(xhr.responseXML);
                    }
                }else if(dataType=="json"||dataType=="JSON"){
                    if(success!=null){//将json字符串转换为js对象
                        success(eval("("+xhr.responseText+")"));
                    }
                }
            }
        };
    };

    该方法使用也很简单,和jquery的$.ajax方法一样,不过没那么多的参数。仅仅是简单的实现了一些基本的ajax功能。使用方法如下:

    ajax({
        type:"post",//post或者get,非必须
        url:"test.jsp",//必须的
        data:"name=dipoo&info=good",//非必须
        dataType:"json",//text/xml/json,非必须
        success:function(data){//回调函数,非必须
            alert(data.name);
        }
    });

    您可能感兴趣的文章

    • javascript实现截取字符串功能总结(包括使用Js截取中文字符的介绍)
    • javascript刷新页面的几种方法
    • js小数数字取整的几种方法
    • JQuery实现图片渐显渐隐切换的几种特效
    • PHP生成随机数的几种方法
    • js实现点击enter键光标移到下一个输入框效果
    • JavaScript获取当前日期时间同时显示星期几
    • javascript实现base64_encode加密,解密的方法
    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:javascript实现原生ajax的几种方法
    IT技术书籍推荐:
    PHP编程(第3版)
    PHP编程(第3版)
    凯文·塔特罗 (Kevin Tatroe) (作者), 彼得·麦金太尔 (Peter MacIntyre) (作者), 拉斯马斯·勒多夫 (Rasmus Lerdorf) (作者), 赵戈戈 (译者), 易国磐 (译者), 张鹏飞 (译者)
    这是一本可以让读者深入了解PHP 技术的书籍,作者用言简意赅的语言并结合了大量实例来解释每一个要素。本书涵盖了PHP 所有基本的要点,不管你是一个想从头开始学习PHP的人,还是对PHP 已经有了基础想继续深入的人,这本书都很合适。