本人学习的是php,所以就用php跟js来演示代码了,主要是锻炼自己写js的能力,练练手而已。

下面这是我编写的操作ajax的代码功能,勉强让我称之为库吧。。

js代码实例（tool.ajax.js）：

 /**

  * JS库  使用ajax

  * @author  jlb

  */

 if(typeof tool == 'undefined') {

     var tool = function(){};

 }

 tool.ajax = function(){};

 /**

  * 获取ajax对象

  * @return 成功返回ajax对象

  */

 tool.ajax.getAjaxObject = function () {

     try{return new XMLHttpRequest()}catch(e){}

     try{return new ActiveXOject('Microsoft.XMLHTTP')}catch(e){}

     alert('您的浏览器版本过低！请升级您的浏览器');

 }

 /**

  * ajax提交数据

  * @param 参数列表

  * @return void

  */

 tool.ajax.formSubmit = function (options) {

     var allow_param, //允许的参数列表

             HTTP,    //ajax对象

             url,     //请求的地址

             data;    //携带的数据

     allow_param = ['method', 'url', 'data', 'success', 'type'];

     //设置默认值

     if(!options['type']) {

         options['type'] == 'text';

     }

     //处理url与数据，  将数据与URL合并

     var disposeParam = function (list) {

         var data = {url:list['url'],data:''};

         if(list['method'] == 'get') {

             data['data'] += '?';

             for (var i in list['data']) {

                 data['data'] +=  i + '=' + list['data'][i] + '&';

             }

         }

         if(list['method'] == 'post') {

             for (var i in list['data']) {

                 data['data'] += i + '=' + list['data'][i] + '&';

             }

         }

         return data

     }

     data = disposeParam(options);

     HTTP = tool.ajax.getAjaxObject();

     //ajax回调函数

     HTTP.onreadystatechange = function () {

         if(HTTP.readyState == 4 && HTTP.status == 200) {

             if(options['type'] == 'text') {

                 options['success'](HTTP.responseText);

             }

             else if(options['type'] == 'json') {

                 options['success'](eval('(' + HTTP.responseText + ')'));

             }

         }

     }

     if(options['method'] == 'get') {

         url = data['url'] + data['data'];

         HTTP.open(options['method'],url);

         //设置请求头解决get提交有缓存问题,通过修改文件最后修改时间解决

         HTTP.setRequestHeader('If-Modified-Since', 0);

         HTTP.send(null);

         return;

     }

     if(options['method'] == 'post') {

         HTTP.open(options['method'], data['url']);

         //设置请求头

         HTTP.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

         HTTP.send(data['data'].replace(/(&*$)/g,''));

         return;

     }

 }

使用实例(ajax_test.html):

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html lang="en">

 <head>

     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

     <title>简单ajax功能库用法示例</title>

 </head>

 <body>

     <!--引入编写好的tool.ajax.js文件-->

     <script src="tool.ajax.js"></script>

     <script>

         //ajax_test.html

         //仿jquery方式ajax请求

         var options = {

             url : "ajax_test.php", //请求的脚本地址

             method : "get", //是get还是post,注意必须是小写哦..懒得转了...

             data : {name:"莫问出处丶",age: 20}, // 要携带的数据,只支持json格式

             success : function (msg) {  //请求完毕后回调函数..

                 alert(msg);

             },

             type : 'text', //不写默认就是text,也就是说回调函数携带的数据是字符串.另外就是json

         };

         tool.ajax.formSubmit(options);

     </script>

 </body>

 </html>

ajax请求的脚本代码(ajax_test.php):

 <?php

 //ajax_test.php

 echo "名字：{$_GET['name']} 年龄: {$_GET['age']}";

在浏览器打开ajax_test.html这文件,浏览器显示:

名字：莫问出处丶 年龄: 20

如果返回的数据是json格式将option 中的 type 属性的值改为 json即可

有什么问题就评论留言我吧,第一次写博客,有点小激动.本菜鸟迈出第一步了.

编写自己的javascript功能库之Ajax(仿jquery方式)的更多相关文章

  1. 网页制作中最有用的免费Ajax和JavaScript代码库

    网上看到的一篇小文,挺有用的,收藏在这. 本文中,我整理了12个免费的Ajax和JavaScript代码库,可以帮助Web开发人员将应用程序提升到一个新水平. Ajax Instant Messeng ...

  2. three.js是JavaScript编写的WebGL第 三方库

    three.js是JavaScript编写的WebGL第 三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质 ...

  3. QT就是别人好心帮你做一些枯燥，并且很重复的代码编写工作，让你更好的把精力投入到你界面的逻辑和功能的实现的功能库（否则写了上万行代码了，才写出个BUG一大堆的毛坯）

    好了,现在开始记录我学习QT的学习历程 . 本人也不是计算机专业出来的,自学了一点,但还是不好找工作,于是参加了培训,虽然感觉没多学到什么 编程的学习生涯就是不断的看别人的源码,然后自己参考着写写自己 ...

  4. 初识JavaScript，Ajax，jQuery，并比较三者关系

    一.基本认识 1.JavaScript 定义: javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态 ...

  5. 深入理解JavaScript系列（1）：编写高质量JavaScript代码的基本要点

    深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 2011-12-28 23:00 by 汤姆大叔, 139489 阅读, 119 评论, 收藏, 编辑 才华横溢的 ...

  6. JavaScript、Ajax与jQuery的关系

    简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...

  7. 编写高质量JavaScript代码绳之以法（The Essentials of Writing High Quality JavaScript）翻译

    原文:The Essentials of Writing High Quality JavaScript 才华横溢的Stoyan Stefanov,在他写的由O'Reilly初版的新书<Java ...

  8. ABP+AdminLTE+Bootstrap Table权限管理系统第七节--登录逻辑及abp封装的Javascript函数库

    经过前几节,我们已经解决数据库,模型,DTO,控制器和注入等问题.那么再来看一下登录逻辑.这里算是前面几节的一个初次试水. 首先我们数据库已经有的相应的数据. 模型和DTO已经建好,所以我们直接在服务 ...

  9. javascript功能插件大集合，写前端的亲们记得收藏

    伯乐在线已在 GitHub 上发起「JavaScript 资源大全中文版」的整理.欢迎扩散.欢迎加入. https://github.com/jobbole/awesome-javascript-cn ...

随机推荐

  1. <Pro .NET MVC4> 三大工具之依赖注入神器——Ninject

    这篇内容是对<Pro .NET MVC4>一书中关于Ninject介绍的总结. Ninject是.NET MVC的一款开源的依赖注入工具. 使用场景:当MVC项目中使用了依赖注入技术来给程 ...

  2. SwitchySharp怎样设置 （ proxy switch！的设置与使用方法）

    规则列表URL  https://autoproxy-G{过}F{滤}Wlist.googlecode.com/svn/trunk/G{过}F{滤}Wlist.txt 注:不同的代{过}{滤}理  相 ...

  3. 普通的101键盘在Mac上的键位对应

    为了方便,搞了一个普通的101有线全键盘 + Magic TrackPad配Macbook.        然后发现了一个小问题,按键对应似乎不像我想的那么完美,F1~F12和Macbook不对应,于 ...

  4. 超酷创意HTML5动画演示及代码

    HTML5是未来的网页开发神器,今天分享的这些HTML5动画大部分利用了CSS3的动画属性来实现,废话不多说,直接上演示和代码. HTML5/CSS3实现大风车旋转动画 这次我们要来分享一款很酷的HT ...

  5. zoj3658 Simple Function (函数值域)

    Simple Function Time Limit: 2 Seconds       Memory Limit: 32768 KB Knowing that x can be any real nu ...

  6. Day01_UNIX基础及VI简介

    2013年09月29日 星期日 11时35分58秒 Linux 是一个区别于Windows的操作系统 Linux 是一个多用户的操作系统 Linux 系统通过账号区分不同的用户 在使用Linux系统的 ...

  7. 使用python程序监控云服务器的带宽

    将一些不重要的服务迁移到云服务上,有些下载什么的,为了防止带宽超了,python做了一个监控程序.用python3写的,由于和python2有些区别,特记录下来备查. 代码如下: #this is f ...

  8. Sequence(组合数学，集合不同元素的个数)

    Sequence [组合数学] 时间限制: 3 Sec  内存限制: 128 MB 提交: 138  解决: 52 [提交][状态][讨论版] 题目描述 在某个夜黑月高的晚上,!!!,原谅我编不下去了 ...

  9. 简单的通过NSFileManager 存储图片

    UIImage *image = [UIImage imageNamed:@"Default.png"]; NSData *data = UIImageJPEGRepresenta ...

  10. 整型数组处理算法（八）插入（+、-、空格）完成的等式：1 2 3 4 5 6 7 8 9=N[华为面试题]

    有一个未完成的等式:1 2 3 4 5 6 7 8 9=N 当给出整数N的具体值后,请你在2,3,4,5,6,7,8,9这8个数字的每一个前面,或插入运算符号“+”,或插入一个运算符号“-”,或不插入 ...