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

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

js代码实例(tool.ajax.js):

  1. /**
  2. * JS库 使用ajax
  3. * @author jlb
  4. */
  5. if(typeof tool == 'undefined') {
  6. var tool = function(){};
  7. }
  8. tool.ajax = function(){};
  9.  
  10. /**
  11. * 获取ajax对象
  12. * @return 成功返回ajax对象
  13. */
  14. tool.ajax.getAjaxObject = function () {
  15. try{return new XMLHttpRequest()}catch(e){}
  16. try{return new ActiveXOject('Microsoft.XMLHTTP')}catch(e){}
  17. alert('您的浏览器版本过低!请升级您的浏览器');
  18. }
  19.  
  20. /**
  21. * ajax提交数据
  22. * @param 参数列表
  23. * @return void
  24. */
  25. tool.ajax.formSubmit = function (options) {
  26. var allow_param, //允许的参数列表
  27. HTTP, //ajax对象
  28. url, //请求的地址
  29. data; //携带的数据
  30.  
  31. allow_param = ['method', 'url', 'data', 'success', 'type'];
  32. //设置默认值
  33. if(!options['type']) {
  34. options['type'] == 'text';
  35. }
  36.  
  37. //处理url与数据, 将数据与URL合并
  38. var disposeParam = function (list) {
  39. var data = {url:list['url'],data:''};
  40. if(list['method'] == 'get') {
  41. data['data'] += '?';
  42. for (var i in list['data']) {
  43. data['data'] += i + '=' + list['data'][i] + '&';
  44. }
  45. }
  46. if(list['method'] == 'post') {
  47. for (var i in list['data']) {
  48. data['data'] += i + '=' + list['data'][i] + '&';
  49. }
  50. }
  51. return data
  52. }
  53. data = disposeParam(options);
  54. HTTP = tool.ajax.getAjaxObject();
  55. //ajax回调函数
  56. HTTP.onreadystatechange = function () {
  57. if(HTTP.readyState == 4 && HTTP.status == 200) {
  58. if(options['type'] == 'text') {
  59. options['success'](HTTP.responseText);
  60. }
  61. else if(options['type'] == 'json') {
  62. options['success'](eval('(' + HTTP.responseText + ')'));
  63. }
  64. }
  65. }
  66.  
  67. if(options['method'] == 'get') {
  68. url = data['url'] + data['data'];
  69. HTTP.open(options['method'],url);
  70. //设置请求头解决get提交有缓存问题,通过修改文件最后修改时间解决
  71. HTTP.setRequestHeader('If-Modified-Since', 0);
  72. HTTP.send(null);
  73. return;
  74. }
  75.  
  76. if(options['method'] == 'post') {
  77. HTTP.open(options['method'], data['url']);
  78. //设置请求头
  79. HTTP.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  80. HTTP.send(data['data'].replace(/(&*$)/g,''));
  81. return;
  82. }
  83. }

使用实例(ajax_test.html):

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5. <title>简单ajax功能库用法示例</title>
  6. </head>
  7. <body>
  8. <!--引入编写好的tool.ajax.js文件-->
  9. <script src="tool.ajax.js"></script>
  10. <script>
  11. //ajax_test.html
  12.  
  13. //仿jquery方式ajax请求
  14. var options = {
  15. url : "ajax_test.php", //请求的脚本地址
  16. method : "get", //是get还是post,注意必须是小写哦..懒得转了...
  17. data : {name:"莫问出处丶",age: 20}, // 要携带的数据,只支持json格式
  18. success : function (msg) { //请求完毕后回调函数..
  19. alert(msg);
  20. },
  21. type : 'text', //不写默认就是text,也就是说回调函数携带的数据是字符串.另外就是json
  22. };
  23.  
  24. tool.ajax.formSubmit(options);
  25. </script>
  26. </body>
  27. </html>

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

  1. <?php
  2. //ajax_test.php
  3. echo "名字:{$_GET['name']} 年龄: {$_GET['age']}";

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

  1. 名字:莫问出处丶 年龄: 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. MVC 使用AJAX POST上传图片的方式

    我们来总结一下使用AJAX以POST方式上传图片的方法. 一.普遍的一种是以file的格式请求.在Request.Files中获取文件. public ActionResult UploadFile( ...

  2. 转:BZERO()等的区别

    BZERO()等的区别 bzero  原型: extern void bzero(void *s, int n); 用法: #include <string.h> 功能:置字节字符串s的前 ...

  3. 剑指offer之O(1)算法删除指针所指向的节点

    题目如图: 1.把要删除pToBeDeleted的节点的后面节点覆盖点要删除的节点pToBeDeleted 2.要考虑如果删除的节点是最后一个节点怎么办 3.要考虑如果总共只有一个节点,删除的是头结点 ...

  4. Android菜单详解(一)——理解android中的Menu

    前言 今天看了pro android 3中menu这一章,对Android的整个menu体系有了进一步的了解,故整理下笔记与大家分享. PS:强烈推荐<Pro Android 3>,是我至 ...

  5. jboss部署应用

    简单的部署应用. 第一种方法是直接写JSP代码,然后放到指定的WAR文件夹中. 第二种,是同时META-INF下的application.xml文件,然后用JAR -CF编成WAR,再集合JSP形成E ...

  6. JAVA中,字符串STRING与STRINGBUILDER的效率差异

    如果可变字符串操作较多的话,用STRINGBUILDER显然优势得多. public class HelloJava { public static void main(String[] args) ...

  7. Building Web Apps with SignalR, Part 1

    Building Web Apps with SignalR, Part 1 In the first installment of app-building with SignalR, learn ...

  8. android 截取指定位置字符串

    String str = "s\ziyuan"; String newStr = str.subString(str.indexOf("\\"),str.len ...

  9. FZU2176---easy problem (树链剖分)

    http://acm.fzu.edu.cn/problem.php?pid=2176 Problem 2176 easy problem Accept: 9    Submit: 32Time Lim ...

  10. hdu1166敌兵布阵

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...