`

Javascript 篇 之 AJAX

AjaxJavaScriptjsonjQuery脚本
阅读更多

        其实很长时间我都是在用第三方库，比如jquery ，prototype.js ，ext.js 关注过我blog的朋友不难发现我不喜欢造轮子，有现成的就用现成的。但是如今那些库都变得很庞大。 虽然jquery 的库，所提供的功能非常实用，基本也感觉没啥冗余。 不过一般一个web 页面基本都用不了，那么4、5000行的库，有人就为了用个ajax 跑去使用ext 。。。。其实我们不妨把自己所需要的一些js 公共函数 封装成比较独立的脚本。这样能省掉不少流量，况且 关于GPL 的开源协议，也能将部分用户拒之门外的，必定这是一个商业社会。

    试看淘宝，网易，腾讯，搜狐…… 别人都有自己的脚本库。我也想过在金山做那么一个脚本库，连怎么把这么多脚本小库，组织起来，怎么提供一个内部的脚本服务器，比如就像google 的，开发都按需申请加载 这些我都想好了。本人JavaScript 脚本也基本差不多达到了，然而，听说是更有价值的事情等着我了……

ajax.js:

/**
 * @author  hechangmin@gmail.com
 * @brief   封装 ajax 接口
 */ 
 
var Ajax = 
{ 
    /**
     * @brief 创建XMLHTTP 对象
     */
    _creatXmlHttp : function()
    {
        
        if(window.XMLHttpRequest) 
        { 
            return new XMLHttpRequest();
        }
        else if(window.ActiveXObject)   
        { 
            var aVersions = ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];   
            
            for(var i=0; i<aVersions.length; i++)
            { 
                try 
                {
                    return new ActiveXObject(aVersions[i]);
                }catch(e)
                { 
                }
            }   
        }
    },
    
    /**
     * @brief 发送请求，以及绑定回调函数
     * @param {Object} option [可选]
     * {
     *         [method],[async],url,data,[success],[encode],[error]
     * }
     */
    sendRequest : function(_option)
    { 
        var xmlhttp = Ajax._creatXmlHttp();
        var option  = _option;
        
        if(!xmlhttp)
        { 
            alert("Your browser against Ajax.");
            return false;
        }
        
        Ajax._CheckParam(option);
        
        xmlhttp.open(option.method, option.url, option.async);
        
        xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded; charset=' + option.encode);
        
        xmlhttp.onreadystatechange = Ajax._BindCallBack(xmlhttp,option);
        
        xmlhttp.send(option.data || null);
        
        return xmlhttp;
    },
    
    /**
     * @brief 绑定回调
     */
    _BindCallBack : function(xmlhttp,option)
    { 
        return function()
        { 
            if (xmlhttp.readyState == 4) 
            { 
                if (xmlhttp.status >= 200 && xmlhttp.status < 300 ) 
                {
                    if(option.success != null)
                    {
                        option.success(xmlhttp.responseText);
                        delete xmlhttp;
                        xmlhttp = null; 
                    }
                }else
                {
                    if(option.error  != null)
                    {
                        option.error(xmlhttp.responseText);
                        delete xmlhttp;
                        xmlhttp = null;
                    }
                } 
            }
        }
    },
    
    /**
     * @brief 参数校验 补齐默认值
     * @param {Object} option
     */
    _CheckParam : function(option)
    { 
         
        if(!option.method)
        { 
            option.method = "post";
            
        }else if(option.method.toLowerCase() === "get")
        { 
            option.method = "get";
        }else
        { 
            option.method = "post";
        }
         
        if(option.async === window.undefined)
        { 
            option.async = true;
        }
        
        if(!option.url)
        { 
            option.url = window.location.href;
        }
        
        if(!option.encode)
        { 
            option.encode = "UTF-8";    
        }
        
        if (option.method == 'get' && typeof(option.data) == 'string')
        {
            option.url += (option.url.indexOf('?') == -1 ? '?' : '&') + "data=" + option.data;
            
            option.data = null;
        }
        
        if(option.method == 'post')
        { 
            option.data = "data=" + option.data;
        }
        
    }
} 

test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script type="text/javascript" src="public/js/ajax.js"></script>
        <script type="text/javascript" src="public/js/json2.js"></script>
    </head>
    <body>
        <div id="test1">aaaa</div>
        <script type="text/javascript" defer="true">
            var param = { 
                    method : "get",
                    async  : true,
                    url    : "test.php",
                    data   : "testtest",
                    success: function(txt)
                    { 
                        alert(txt); 
                    },
                    
                    encode : "UTF-8",
                    
                    onerror : function(txt)
                    { 
                        alert(txt);
                    }
                    
            };
            
            var x = JSON.stringify(param);
            
            alert(x);
            
            alert(typeof x );
            
            var y = JSON.parse(x);
            
            alert(typeof y);
            
            for(var i in y)
            { 
                alert("y." + i + ":" + y[i]);
            }
            
            //alert(param);
            
            Ajax.sendRequest(param);
            
            var param1 = { 
                    url    : "test.php",
                    async  : false,
                    data   : "aaaaa"                
            };
            
            var ret = Ajax.sendRequest(param1).responseText;
            
            alert(ret);
        </script>
    </body>
</html>

关于解析JSON 的部分：

 http://www.JSON.org/json2.js

 http://www.JSON.org/js.html


分享到：
| Javascript 扩展String 函数
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript中ajax入门篇

    AJAX (Asynchronous JavaScript and XML, 异步 JavaScript 及 XML 技术) 是个新词，但内涵是两个存在已有一段时间的 JavaScript 功能。这两种功能以往一直被忽略，在 Gmail、Google suggest 及 Google Maps 出现后才...

    征服RIA：基于JavaScript的Web客户端开发卷二

    Ajax篇：Ajax是上帝赐予JavaScript的礼物。凭借着Ajax，JavaScript拥有了异步调度服务端业务逻辑的能力。本篇除介绍Ajax原理和通用框架之外，还分别为从事Java和.NET开发的程序员安排了适合他们的DWR、Atlas框架。...

    征服RIA：基于JavaScript的Web客户端开发卷三

    Ajax篇：Ajax是上帝赐予JavaScript的礼物。凭借着Ajax，JavaScript拥有了异步调度服务端业务逻辑的能力。本篇除介绍Ajax原理和通用框架之外，还分别为从事Java和.NET开发的程序员安排了适合他们的DWR、Atlas框架。...

    21天学通JavaScript(第2版)

    第三篇讲解的是javascript的高级技术，主要讲解了javascript与xml技术、正则表达式、ajax基础、ajax高级应用、javascript与插件和javascript的调试与优化等。最后一篇为综合案例篇，用一个完整的例子讲解了如何使用...

    JavaScript从入门到精通（第2版）( (美)Steve Suehring)中文pdf

    第三篇为高级技术，主要包括BOM中的其他对象、文档对象模型以及Ajax技术等内容。 《JavaScript从入门到精通》适合于JavaScript的初学者使用，也适合有一定JavaScript基础想进一步提高的网页开发者使用。

    JavaScript完全学习手册

    本书分4篇14章，介绍Javaｓｃｒｉｐｔ的知识，全书内容包括：Javaｓｃｒｉｐｔ语法基础、流程控制、函数、内置对象编程、文档对象模型DOM与事件驱动、处理XML、使用Cookie和文件、应用Ajax技术等。本书最后一篇从6个...

    javascript 进阶篇3 Ajax 、JSON、 Prototype介绍

    javascript 进阶篇3 Ajax 、JSON、 Prototype介绍，学习js的朋友可以参考下

    JavaScript征途

    《JavaScript征途》内容全面，由浅入深，包括6篇21章，主要内容包括：JavaScript语言的基本特性，开发简单的JavaScript程序，JavaScript语法体系，数据、数据类型和变量，运算符和表达式，语句和结构，JavaScript...

    浅谈Ajax和JavaScript的区别

    javascript是一种在浏览器端执行的脚本语言，Ajax是一种创建交互式网页应用的开发技术 ，它是利用了一系列相关的...以上这篇浅谈Ajax和JavaScript的区别就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望

    21天学通javascript——PDF完整版下载.zip

    第三篇讲解的是Javascript的高级技术，主要讲解了Javascript与XML技术、正 则表达式、Ajax基础、Ajax高级应用、Javascript与插件和Javascript的调试与优化等。最后一篇综合案例篇用一个完整的例子讲解了如何使用...

    JavaScript、jQuery与Ajax的关系

    在上篇文章给大家介绍了javascript jquery ajax的小结，今天接着给大家介绍javascript jquery与ajax的关系，感兴趣的朋友一起学习吧 简单总结： 1、JS是一门前端语言。 2、Ajax是一门技术，它提供了异步更新的机制...

    javascript完全学习手册1 源码

    第1篇 JavaScript基础篇 第1章 JavaScript简介 1 1.1 JavaScript概述 1 1.1.1 什么是JavaScript 1 1.1.2 JavaScript的基本特点 2 1.1.3 常用的Web开发语言 3 1.2 JavaScript的应用 4 1.2.1 客户端应用 5 1.2.2 ...

    JavaScript Ajax编程 应用篇

    主要介绍了JavaScript Ajax编程之应用篇，感兴趣的朋友可以参考一下

    javascript小技巧&&JavaScript[对象_属性]集锦 [转载了多篇] - 天轰穿_net-vs2005-ajax入门 - 博客园

    javascript小技巧&&JavaScript[对象_属性]集锦 [转载了多篇] - 天轰穿_net-vs2005-ajax入门 - 博客园

    JavaScript使用Ajax上传文件的示例代码

    本篇文章主要介绍了JavaScript使用Ajax上传文件的示例代码，详细的介绍了两种上传方式，感兴趣的小伙伴可以了解一下

    JavaScript中的ajax功能的概念和示例详解

    AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML）。这篇文章主要给大家介绍了JavaScript中的ajax功能的概念和示例详解，感兴趣的朋友一起看看吧

    JavaScript全程指南（基础知识、高级编程、特效实例、Ajax）

    基础知识全面 对JavaScript进行了全面的介绍，内容编排合理，其中第一篇、第二篇适合初学者学习，有一定基础的人员可以跳过这两篇。 用实例说话 包含了大量完整的代码，并有相应的执行效果图。

    AJAXCDR：利用 Flash 完美解决 JavaScript 和 AJAX 跨域 HTTP POST/GET 表单请求

    JavaScript 和 AJAX 跨域访问分为两大类，一是本域和子域的交互，二是本域和其他域的交互。 　一、本域和子域的交互：www.s135.com 和 blog.s135.com 　二、本域和其他域的交互：blog.s135.com 和 api.bz 　本域和...

    详解JavaScript原生封装ajax请求和Jquery中的ajax请求

    在本篇文章中我们总结了关于JavaScript原生封装ajax请求和Jquery中的ajax请求的知识点内容，需要的朋友们学习参考下。

Magicbox
Global site tag (gtag.js) - Google Analytics