`

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 进阶篇3 Ajax 、JSON、 Prototype介绍

    Ajax技术，全称为“Asynchronous JavaScript and XML”，是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。Ajax的核心是XMLHttpRequest对象，它允许浏览器向服务器发送异步请求，并处理响应，从而...

    javaScript_ajax

    在本篇文章中，我们将深入探讨JavaScript实现AJAX的功能及其核心概念。 1. **AJAX基本原理** AJAX的核心是XMLHttpRequest对象，它允许JavaScript在后台与服务器进行通信，无需用户感知页面的刷新。通过创建...

    Ajax+javascript基础

    `网络编程基础篇之javascript.exe` 文件可能是关于使用 JavaScript 进行网络编程的教程，可能涵盖了 HTTP 协议、Ajax 应用、WebSocket 实现即时通信等内容。学习这部分可以深入理解 JavaScript 如何与服务器进行数据...

    sql c# javascript ajax

    总的来说，这篇描述涵盖了从数据库操作到前端交互的多个关键环节，展示了如何使用C#开发用户控件，并通过JavaScript和Ajax技术（虽然未直接展示）可以进一步增强用户体验，实现动态的数据更新。这些技术的结合使用是...

    ajax+javascript打印网页数据

    本篇文章将深入探讨如何使用Ajax和JavaScript来实现网页数据的打印功能。 Ajax的核心在于它允许网页在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。这种技术极大地提升了用户体验，因为用户可以继续...

    JavaScript语言与Ajax应用JavaScript面向对象编程PPT教案学习.pptx

    本篇PPT教程聚焦于JavaScript语言与Ajax应用，特别是JavaScript的面向对象编程。 首先，我们来看Number对象。Number对象对应于JavaScript中的原始数值类型，它提供了创建和操作数值的方法。你可以通过`new Number...

    AjAX JavaScript中使用表单实现留言功能

    本篇文章将详细讲解如何利用AJAX和JavaScript在网页上实现一个基本的留言功能。 首先，AJAX的核心在于异步数据交换，它允许网页在不刷新整个页面的情况下与服务器进行通信，提升用户体验。AJAX通过创建...

    JavaScript高级篇视频教程

    在实际应用中，JavaScript常常与AJAX、WebSocket等技术结合，实现与服务器的实时通信。这部分内容将帮助学习者构建动态交互的Web应用。 总的来说，"JavaScript高级篇视频教程"涵盖了JavaScript进阶所需的核心知识点...

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

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

    Django JavaScript Integration AJAX and jQuery.pdf

    本篇将详细介绍如何利用Django框架与JavaScript（特别是jQuery库）结合，构建功能强大的AJAX应用。 #### 二、Django框架简介 Django是一款用Python语言编写的开源Web框架，遵循模型-视图-模板（MVC）架构。它强调...

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

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

    javascript结合ajax读取txt文件内容.docx

    ### JavaScript结合Ajax读取TXT文件内容 #### 一、引言 在Web开发中，经常需要从服务器获取数据并更新页面内容，而无需重新加载整个页面。这种技术称为Ajax（Asynchronous JavaScript and XML），它允许网页与...

    网络编程基础篇之javascript

    JavaScript，作为全球最广泛使用的编程语言之一，是网络编程领域中的基石，特别是在前端开发中扮演着至关重要的角色。本文将深入探讨JavaScript的基础知识，旨在为初学者提供一个全面的入门指南。 首先，JavaScript...

    AJAX在网页中的应用论文18篇

    AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这一技术由JavaScript、XML、HTML、CSS以及浏览器提供的XMLHttpRequest对象等多种技术组合而成，为用户...

    ajax教程

    **Ajax 教程** ...- 《AJAX开发简略[1].part1-5.rar》：可能是某篇关于Ajax开发的系列教程，分多个部分详细讲解Ajax的各个方面。 通过这些资源，你可以全面地了解和掌握Ajax技术，提升Web开发能力。

    网络编程基础篇之Javascript(EXE)

    此资源为“网络编程基础篇之Javascript”的EXE文件，适合初学者入门学习。 JavaScript的核心概念包括变量、数据类型、运算符、控制结构（如条件语句和循环）、函数、数组以及对象。以下是对这些概念的详细解释： 1...

    Dart VS JavaScript上篇：JavaScript的历史包袱.docx

    JavaScript 作为一门脚本语言，具有悠久的历史，自 Netscape 时代起步，逐步壮大，直到 AJAX 的兴起，JavaScript 成为网络应用的核心语言。然而，JavaScript 同时也存在许多问题，如性能不高、代码冗长、缺乏严格的...

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