1. /**
  2.  *     @todo 封装Ajax 传输类
  3.  *     @param params:参数
  4.  *    @example 用法: var mAjaxer = new Ajaxer(parames);mAjaxer.send();
  5.  */
  6. (function (window,undefined) {
  7.     var defined = {},
  8.         rtrim = /^(\s|\u00A0)+|(\s|\u00A0)+$/g;
  9.     defined.trim = function( text ) 
  10.     {
  11.         return (text || "").replace( rtrim, "" );
  12.     };
  13.     defined.parseJSON = function(data,error) 
  14.     {
  15.         if ( typeof data !== "string" || !data ) 
  16.             return null;
  17.         data = this.trim(data);
  18.         // Make sure the incoming data is actual JSON
  19.         // Logic borrowed from http://json.org/json2.js
  20.         if ( /^[\],:{}\s]*$/.test(data.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, "@")
  21.             .replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, "]")
  22.             .replace(/(?:^|:|,)(?:\s*\[)+/g, "")) ) {
  23.             // Try to use the native JSON parser first
  24.             return window.JSON && window.JSON.parse ?
  25.                 window.JSON.parse( data ) :
  26.                 (new Function("return " + data))();
  27.         }
  28.         else 
  29.             error("Invalid JSON: " + data);
  30.     };
  31.     defined.json2String = function(jsonData) {
  32.         var strArr = [];
  33.         for(var k in jsonData) {
  34.             strArr.push(+ "=" + jsonData[k]);    
  35.         }
  36.             
  37.         return strArr.join("&");
  38.     }
  39.     var Ajaxer = function(params)
  40.     {
  41.         var _p = {},
  42.             xmlHttp;
  43.         if (typeof params == 'undefined') 
  44.         {
  45.             return false;
  46.         }
  47.         // 发送请求
  48.         this.send =    function ()
  49.         {
  50.             xmlHttp = null;
  51.             xmlHttp = _p.createXMLHttp();
  52.             if(xmlHttp == null)
  53.             {
  54.                 error = {'code' : 404,"message" : "您的浏览器版本过低,无法创建异步对象,请升级您的浏览器!"}
  55.                 params.error(error);
  56.             }
  57.             else
  58.             {
  59.                 //打开ajax请求
  60.                 xmlHttp.open(params.method,params.url,params.async);
  61.                 //一般jquery会传递这个参数,进行区分ajax请求
  62.                 xmlHttp.setRequestHeader("X-Requested-With","XMLHttpRequest"); 
  63.                 //如果是post的话,要对url进行encode
  64.                 if (params.method.toLowerCase() == 'post')
  65.                 {
  66.                     xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  67.                     if (typeof params.data != 'string')
  68.                         params.data = defined.json2String(params.data);
  69.                     //对post或get发送数据
  70.                     xmlHttp.send(params.data);
  71.                 }
  72.                 else
  73.                 {
  74.                     xmlHttp.send(null);
  75.                 }
  76.                 
  77.                 //处理状态
  78.                 xmlHttp.onreadystatechange = _p.SendBack;
  79.             }
  80.         };
  81.         //处理回调函数
  82.         _p.SendBack = function ()
  83.         {    
  84.             if(xmlHttp.readyState == 4)
  85.             {
  86.                 if(xmlHttp.status == 200)
  87.                 {    
  88.                     var data,
  89.                         ct = xmlHttp.getResponseHeader("content-type") || "";
  90.                     data = xmlHttp.response;
  91.                     //判断是否是json
  92.                     if (params.dataType === "json" || !params.dataType && ct.indexOf("json") >= 0)
  93.                     {
  94.                         data = defined.parseJSON(data,params.error);
  95.                     }
  96.                     params.success(data);                
  97.                 }
  98.                 else
  99.                 {
  100.                     var error = {'code' : xmlHttp.status,"message" : xmlHttp.statusText};
  101.                     params.error(error);
  102.                 }
  103.                 if (params.async) 
  104.                 {
  105.                     xmlHttp = null;
  106.                 }
  107.             }
  108.         };
  109.         //创建ajax对象
  110.         _p.createXMLHttp = function()
  111.         {
  112.             var xmlhttp = null;
  113.         
  114.             // 针对不同浏览器建立这个对象的不同方式写不同代码
  115.             if(window.XMLHttpRequest) {
  116.                 xmlhttp = new XMLHttpRequest();
  117.                 //针对某些特定版本的Mozillar浏览器的BUG进行修正
  118.                 if(xmlhttp.overrideMimeType) {
  119.                     xmlhttp.overrideMimeType("text/xml");
  120.                 }
  121.                 
  122.             } else if (window.ActiveXObject) {
  123.                 var activexName = ['MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
  124.                 for (var i=0; i<activexName.length; i++) {
  125.                     try {
  126.                         xmlhttp = new ActiveXObject(activexName[i]);
  127.                         break;
  128.                     } catch(e) {}
  129.                 }
  130.             }
  131.             return xmlhttp;
  132.         }
  133.     }
  134.     
  135.     window.Ajaxer = Ajaxer;
  136.     window.defined = defined;
  137. })(window);用惯了jquery原生的忘了差不多,补一下. 

javascript-ajax学习的更多相关文章

  1. javascript Ajax 学习

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! AJAX是asynchronousjavascript and XML的简写,就是异步的javascrip ...

  2. Ajax学习心得

    Ajax学习心得 大致学了下Ajax,才知道它不是某种编程语言,而是一种在无需加载整个页面的情况下能够更新部分网页的技术.了解了它的功能后觉得这真是一种好的技术,这得给前端和运维省多少力啊! 传统的网 ...

  3. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  4. 大量Javascript/JQuery学习教程电子书合集

    [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人   不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pd ...

  5. [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人

    不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pdf 274.79 KB   21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...

  6. AJAX学习前奏----JS基础加强

     AJAX学习前奏----JS基础加强 知识概要: 1.js类&属性&方法的定义 2.静态属性与方法 3.构造方法 4.原型的使用 5.Object对象直接加属性和方法 6.JSO ...

  7. JavaScript紧凑学习

    JavaScript紧凑学习 windows本地,调用命令行: win键+R 键入cmd , (cmd是Command 命令行 简称) 目录是C盘下的 C:\Users\Administrator&g ...

  8. AJAX学习2

    作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主.有不正确的地方,欢迎批评指正. 本文学习内容:https://www. ...

  9. [学习笔记]AJAX学习

    AJAX学习 ——在w3cschool学习AJAX的学习笔记 参考网站:w3cschool XMLHttpRequest 是 AJAX 的基础. XMLHttpRequest 对象 所有现代浏览器均支 ...

  10. javascript立体学习指南

    javascript立体学习指南第一章:首先了解javascript 首先,什么是javascript? JavaStrip出生于1995年,是一种文本脚本语言,成都装修公司是一种动态的.弱类型的.基 ...

随机推荐

  1. Android android.support.v7.appcompat.R$styleable

    引入第三方jar或者library时比如自定义控件.突然报如下错误: 07-17 09:22:25.430: E/CrashHandler(14102): Caused by: android.vie ...

  2. BZOJ1108: [POI2007]天然气管道Gaz

    1108: [POI2007]天然气管道Gaz Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 410  Solved: 211[Submit][Sta ...

  3. [Redux] Generating Containers with connect() from React Redux (VisibleTodoList)

    Learn how to use the that comes with React Redux instead of the hand-rolled implementation from the ...

  4. 寒哥细谈之AutoLayout全解

    文/南栀倾寒(简书作者)原文链接:http://www.jianshu.com/p/683fbcbfb705著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 看到群中好多朋友还停留在Fr ...

  5. qt 3d 绘图

    首先不得不说,要感谢北京邮电大学的阿科.感谢他慷慨的分享和极具科学态度的记录,将自己搜集到的众多资料收集整理发布,拯救众多苦逼寻找方案的程序员于苦海之中.因为最近接手新的项目,涉及到使用opengl做 ...

  6. (转)javascript组件开发方式

    作为一名前端工程师,写组件的能力至关重要.虽然javascript经常被人嘲笑是个小玩具,但是在一代代大牛的前仆后继的努力下,渐渐的也摸索了一套组件的编写方式. 下面我们来谈谈,在现有的知识体系下,如 ...

  7. Asp.net实现在线人数统计功能代码实例

    application最经典的一个方法:统计在线人数,这需要借助于我们的全局应用程序类来对登录的用户信息进行统计: 以下是代码片段:    void application_start(object ...

  8. Java性能漫谈-数组复制之System.arraycopy

    当我还年幼的时候,我很任性,复制数组也是,写一个for循环,来回倒腾,后来长大了,就发现了System.arraycopy的好处. 为了测试俩者的区别我写了一个简单赋值int[100000]的程序来对 ...

  9. sql 2000 分页

    create PROCEDURE [dbo].[Proc_GetPageList] (   @Tables varchar(1000),          --表名   @PK varchar(100 ...

  10. AngularJs练习Demo8 自定义过滤器

    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...