标签 jquery 下的文章

[转]用原生JS简单封装AJAX

用原生JS仿照jquery写一个具有以上五个参数的$.ajax简单版本

首先,我们需要xhr对象。这对我们来说不难,封装成一个函数。

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) {
    // 初始化
    //type参数,可选
    var type = conf.type;
    //url参数,必填 
    var url = conf.url;
    //data参数可选,只有在post请求时需要
    var data = conf.data;
    //datatype参数可选    
    var dataType = conf.dataType;
    //回调函数可选
    var success = conf.success;
                                                                                         
    if (type == null){
        //type参数可选,默认为get
        type = "get";
    }
    if (dataType == null){
        //dataType参数可选,默认为text
        dataType = "text";
    }
    // 创建ajax引擎对象
    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+")"));
                }
            }
        }
    };
};

此函数的使用用法

ajax({
    type:"post",
    url:"test.jsp",
    data:"name=dipoo&info=good",
    dataType:"json",
    success:function(data){
        alert(data.name);
    }
});

 

五个参数只有url是必选的;type,dataType具有默认值,并且type的取值只能为post/get或其大写形式,dataType的取值只能为text/xml/json或其大写形式;而当type为get或者已经在url后附带参数则不用指定data;success为回调函数,按需求或写或不写。

原文链接:http://dipoo.diandian.com/post/2013-03-14/40048775665

 

 

 

评论 前端相关

转下 safari支持position fixed的解决方法 未验证

留下代码等待下次改版m端验证代码

<div id="fixnav" style=" position: absolute; z-index: 1000; height: 50px; opacity: 0.9;">nav</div>
<script type="text/javascript"> 
$(window).scroll(function(){ 
// 重点就是下面这一条语句的实现 
$("#fixnav").css({top: window.innerHeight + window.scrollY - $("#fixnav").outerHeight() }); 
}); 
</script>
评论 前端相关

今天研究视差滚动的制作

am:7:45 今天研究网页视差的制作,百度"视差滚动"的原理以及各种插件,基本上都是jquery的插件,寻找原生的看看.不过要先吃饭

- 阅读剩余部分 -

330 条评论 前端相关

[转]看我姐和我妹子如何学编程

  就像我在上一篇博文中提到的,Eva 和 Fong(译者注:根据博主的上一篇博文,Eva 是博主的姐姐,Fong 是博主的妹子)来到旧金山跟我学编程。在这篇博文中,我将记录下我教她们的方式,我构建这种学习过程的理由,以及这种学习方式奏效的原因。虽然以时间顺序列出她们在这段时间做的或学习的每一件事再容易不过,但是这毫无用处,而且读者们也会遗漏重点。了解学习过程中的细节并且明白它起作用的原因至关重要。所以我会从基本原则开始讲。本文较长,请做好准备。

- 阅读剩余部分 -

526 条评论 前端相关

防止网络调用google code的jquery 失效

代码如下

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'><\/script>

上面是调用google code上的jq文件
为了防止网络上的文件失效,我们用下面的方式来防止
<script>!window.jQuery && document.write('<script src="jquery-1.5.1.min.js"><\/script>');</script>

最后一句等同于

<script>if(!window.jQuery){document.write('<script src="jquery-1.5.1.min.js"><vscript>');}</script>
540 条评论 前端相关