1. /**
    * Created by liyinghao on 2016/8/23.
    */
    /*仿jQuery中的ajax方法,简单版实现;封装ajax的工具函数*/
    /*
    * 1 请求方式 type get post 默认是get方式
    * 2.接口地址 url 都是地址 默认的是当前地址
    * 3.是否异步 async true false 默认的true 异步请求
    * 4.请求数据 data {}对象形式 默认是空对象
    *
    *
    * 5.成功回调函数(成功需要做的事情) success
    * 6.失败回调函数(失败需要做的事情) error
    *
    * 比如 发送前要做的事情 beforeSend
    * */
    window.$ ={
    /* ajax:function(){
    }*/
    };
    /*定义一个ajax工具函数*/
    /*options 是一个对象*/
    $.ajax =function(options){
    /*如果你什么都没传呢?停止执行*/
    /*if(options && typeof options == 'object'){
    }*/
    if(!options ||typeof options !='object')return fasle;
    /*如果传了*/
    var type = options.type ||'get';
    var url = options.url || location.pathname;
    /* false true "" false */
    var async = options.async ===false?false:true;
    /*需要传递的数据*/
    var data = options.data ||{};
    /*需要data转化成ajax传递数据的格式 {name:'',age:''} ===>>> name=gc&age=10 */
    var dataStr ='';
    for(key in data){
    dataStr += key+'='+data[key]+'&';
    };
    /*str.slice(0,-1); 取到倒着数几个字符*/
    dataStr = dataStr && dataStr.slice(0,-1);
    /*ajax编程*/
    /*初始化*/
    var xhr =newXMLHttpRequest();
    /*设置请求行*/
    /*如果是get请求 参数是不是该拼接在url后面*/
    xhr.open(type,type=='get'?url+'?'+dataStr:url,async);
    /*设置请求头*/
    if(type =='post'){
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    }
    /*设置请求内容*/
    xhr.send(type=='get'?null:dataStr);
    /*响应*/
    xhr.onreadystatechange =function(){
    /*首先确定通讯完全完成*/
    if(xhr.readyState ==4){
    /*如果是成功的请求 status == 200 */
    if(xhr.status ==200){
    /*成功*/
    /*知道后台想要返回什么数据类型 application/json;charset=utf-8*/
    /*application/xml application/json text/html text/xml text/json text/css*/
    var contentType = xhr.getResponseHeader('Content-Type');
    var result =null;
    if(contentType.indexOf('xml')>-1){
    /*返回什么数据类型xml*/
    result = xhr.responseXML;
    }elseif(contentType.indexOf('json')>-1){
    /*返回什么数据类型json*/
    var data = xhr.responseText;
    result = data && JSON.parse(data);
    }else{
    result = xhr.responseText;
    }
    /*执行成功回调函数*/
    options.success && options.success(result);
    }else{
    /*失败*/
    options.error && options.error({status:xhr.status,statusText:xhr.statusText});
    }
    }
    }
    };
    /*get*/
    $.get=function(options){
    options.type ='get';
    $.ajax(options);
    }
    /*post*/
    $.post =function(options){
    options.type ='post';
    $.ajax(options);
    } 来自为知笔记(Wiz)

      

Ajax,ajax封装的更多相关文章

  1. 原生态AJAX详解和jquery对AJAX的封装

    AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript    JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...

  2. 【前端学习笔记04】JavaScript数据通信Ajax方法封装

    //Ajax 方法封装 //设置数据格式 function setData(data){ if(!data){ return ''; } else{ var arr = []; for(k in da ...

  3. 原生ajax与封装的ajax使用方法

    当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...

  4. Ajax入门(二)Ajax函数封装

    如果看了的我上一篇博客<Ajax入门(一)从0开始到一次成功的GET请求>的话,肯定知道我们已经完成了一个简单的get请求函数了.如下: 1234567891011121314151617 ...

  5. js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用)

    js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...

  6. jQuery-实现简单的Ajax请求封装

    封装的意义在于复用,在于减少重复的代码. 我在项目中做了简单的Ajax请求封装,实现方式如下: //封装Ajax请求 $.extend({ ajaxDirect:function(url,type,d ...

  7. JQ中的Ajax的封装

    1.认识JQ中ajax的封装      jQ 对于ajax的封装有两层实现:$.ajax 为底层封装实现:基于 $.ajax ,分别实现了$.get 与$.post 的高层封装实现: 2.Ajax的底 ...

  8. Ajax的封装。

    封装 Ajax 因为Ajax 使用起来比较麻烦,主要就是参数问题,比如到底使用GET 还是POST:到 底是使用同步还是异步等等,我们需要封装一个Ajax 函数,来方便我们调用.    封装支持接收来 ...

  9. Jquery Ajax简单封装(集中错误、请求loading处理)

    Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...

  10. Ajax的封装,以及利用jquery的ajax获取天气预报

    1.Ajax的封装 function ajax(type,url,param,sync,datetype,callback){//第一个参数是获取数据的类型,第二个参数是传入open的url,第三个是 ...

随机推荐

  1. CentOS7下python虚拟环境

    搭建python虚拟环境 1.我们先创建一个隐藏目录 .virtualenvs,所有的虚拟环境都放在此目录下 :mkdir /root/.virtualenvs 2.安装虚拟环境 确认pip:wher ...

  2. Junit简单使用

    上篇文章也说到了,接口测试我使用的是Junit框架.因为我还是刚刚接触,也还没有深入了解,主要学会了断言的使用.断言是对测试运行结果的判断,如果结果符合要求,程序就会继续执行下去.反之,如果结果和预计 ...

  3. ss证书问题

    #SSL--校验网站证书 #一.什么是SSL证书 from urllib import request #ssl免验证 import ssl ssl._create_default_https_con ...

  4. Numpy的基本运算及操作

    import numpy as np ''' 一.算术运算 元素级 1.标量 加减乘除 数组(元素级:位置对应) 自增和自减 通用函数 2.数组 +-*/ 数组 (元素级) 3.条件和布尔运算 a&g ...

  5. static_cast关键字 dynamic_cast关键字

    前言 说起C++中的继承.多态.虚函数等概念,可能很多同学都有所了解,但是要说真正熟知的同学可能就不是很多了.最近在编程过程中了解到C++类型的层次转换(这就涉及到了多态和继承的相关概率),通常C语言 ...

  6. 利用程序随机构造N个已解答的数独棋盘

    高级软件工程第二次作业:利用程序随机构造N个已解答的数独棋盘,代码如下: package SudokuGame; /** * 解决这个问题使用的是回溯+剪枝的算法 * 基本思想:不断地将每个格子可填入 ...

  7. 【怒转】 idea快捷键说明大全(中英文对照)

    1 编辑[Editing] 快捷键 英文说明 中文说明 Ctrl + Space Basic code completion (the name of any class, method or var ...

  8. C#base使用笔记

    一,base继承使用 using System; using System.Collections.Generic; using System.Linq; using System.Text; nam ...

  9. MariaDB学习笔记(二)

    七 索引索引:索引是创建在表上的,是对数据库表中的一列或多列的值进行排序的一种结构.索引可以提高查询的速度.索引有两种存储类型: B型树索引 哈希索引I nnoDB和MyISAM支持B型树索引,MEM ...

  10. tomcat脚本

    !/bin/sh # eg: tomcat.sh start xxx # proc_dir="/usr/local/xxx/tomcat-zc-web/bin" proc_name ...