自己封装的ajax

/**
 * ITCAST WEB
 * Created by lsy on 2016/5/24.
 */
/*
 * 1. 请求的类型                type    get post
 * 2. 请求地址                  url
 * 3. 是异步的还是同步的         async   false true
 * 4. 请求内容的格式            contentType
 * 5. 传输的数据                data    json对象
 *
 * 6.响应成功处理函数           success   function
 * 7.响应失败的处理函数         error     function
 *
 * 这些都是动态参数  参数对象  options
 * */

/*封装一个函数*/
window.$ = {};
/*申明一个ajax的方法*/
$.ajax = function(options){

    if(!options || typeof options != ‘object‘){
        return false;
    }

    /*请求的类型*/
    var type = options.type || ‘get‘;/*默认get*/
    /*请求地址 */
    var url = options.url || location.pathname;/*当前的地址*/
    /*是异步的还是同步的 */
    var async = (options.async === false)?false:true;/*默认异步*/
    /*请求内容的格式 */
    var contentType = options.contentType || "text/html";

    /*传输的数据 */
    var data = options.data || {};/*{name:‘‘,age:‘‘}*/
    /*在提交的时候需要转成 name=xjj 这种格式*/

    var dataStr = ‘‘/*数据字符串*/

    for(var key in data){
        dataStr += key+‘=‘+data[key]+‘&‘;
    }

    dataStr = dataStr && dataStr.slice(0,-1);

    /*ajax 编程*/
    var xhr = new XMLHttpRequest();

    /*请求行*/
    /*(type==‘get‘?url+‘?‘+dataStr: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 && xhr.status == 200){
            /*success*/
            var data = ‘‘;
            var contentType = xhr.getResponseHeader(‘Content-Type‘);
            /*如果我们服务器返回的是xml*/
            if(contentType.indexOf(‘xml‘) > -1){
                data = xhr.responseXML;
            }
            /*如果我们的服务器返回的是json字符串*/
            else if(contentType.indexOf(‘json‘) > -1){
                /*转化json对象*/
                data = JSON.parse(xhr.responseText);
            }
            /*否则的话他就是字符串*/
            else{
                data = xhr.responseText;
            }

            /*回调 成功处理函数*/

            options.success && options.success(data);
        }
        /*计时请求xhr.status不成功  他也需要的响应完成才认作是一个错误的请求*/
        else if(xhr.readyState == 4){
            /*error*/
            options.error && options.error(‘you request fail !‘);

        }

    }
}
$.post = function(options){
    options.type = ‘post‘;
    $.ajax(options);
}
$.get = function(options){
    options.type = ‘get‘;
    $.ajax(options);
}
时间: 2024-10-18 15:34:42

自己封装的ajax的相关文章

自己封装的Ajax - JavaScript

1. [代码][JavaScript]代码      //javascript Object: ajax Object//Created By RexLeefunction Ajax(url,data){    this.url=url;    this.data=data;    this.browser=(function(){          if(navigator.userAgent.indexOf("MSIE")>0) {              return &

封装一个Ajax工具函数

/*封装一个ajax工具函数*/ window.$ = {}; /*通过$定义一个ajax函数*/ /* * 1. type   string   请求的方式  默认是get * 2. url    string   请求地址  接口地址 * 3. async  boolean  默认的是true * 4. data   object   {}请求数据 * * 5.success function  成功回调函数 * 6.error   function  失败的回调函数 * */ $.ajax

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

当我们不会写后端接口来测试ajax时,我们可以使用node环境来模拟一个后端接口. 1.模拟后端接口可参考http://www.cnblogs.com/heyujun-/p/6793900.html网站整站开发小例子,在打开命令窗口并转到所在项目文件夹下在命令行中输入npm install express --save,安装express中间件. 2.把当中的app.js的内容换成 var express=require('express'); //var path=require('path'

封装的ajax请求

在做登录注册这类提交表单数据时,我们经常需要局部刷新网页来验证用户输入的信息,这就需要用到ajax请求,我们通常需要获取表单中的数据,发起ajax请求,通过服务程序,与数据库的数据进行比对,判断信息的正确与否.这儿也将ajax请求进行了封装,当我们在项目中需要多次ajax请求时,就可以用封装的函数了,不用每次都写ajax请求,提高了代码的利用率和工作效率.当然封装得不一定很完美,网上也有很多优秀的封装好的ajax请求.也是通过闭包思想,具体的封装思路,在代码注释中也写得很详细了 这是封装的aja

自己封装的AJAX (带JSON)

最简单的封装的AJAX: function myajax(url,onsuccess,fail){ //确定是否支持xhr var xhr = new XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Microsoft.XMLHTTP'); //准备发送post异步请求 xhr.open('POST', url, true); //监听并获得返回结果 xhr.onreadystatechange = function () { i

原生封装的ajax

原生封装的ajax的代码如下: //将数据转换成 a=1&b=2格式; function json2url(json){ var arr = []; //加随机数防止缓存; json.t = Math.random(); for(var name in json){ arr.push(name+'='+json[name]); } return arr.join('&'); } function ajax(json){ //1.创建一个ajax对象; if(window.XMLHttpRe

自己封装个ajax

你是否发现项目中有很多页面只用到了框架不到十分之一的内容,还引了压缩后还有70多kb的jquery库 你是否发现项目中就用了两三个underscore提供的方法,其他大部分的你方法你甚至从来没有看过 你是否发现fetch好像比ajax好用那么一点 你是否想过自己封装个ajax.... 纯前端写得久了,便想折腾点事情.比如先定一个小目标,年前自己写个类jquery轻量级库.... 那么就从自己封装一个ajax切入吧,首先我整理的一个思维导图,一目了然 解析参数数据 通常我们的请求后面会有一些参数,

先定一个小目标,自己封装个ajax

你是否发现项目中有很多页面只用到了框架不到十分之一的内容,还引了压缩后还有70多kb的jquery库 你是否发现项目中就用了两三个underscore提供的方法,其他大部分的你方法你甚至从来没有看过 你是否发现fetch好像比ajax好用那么一点 你是否想过自己封装个ajax.... 纯前端写得久了,便想折腾点事情.比如先定一个小目标,年前自己写个类jquery轻量级库.... 那么就从自己封装一个ajax切入吧,首先我整理的一个思维导图,一目了然 解析参数数据 通常我们的请求后面会有一些参数,

mui封装的ajax请求

由于项目中引进MUI框架,所以就不需要引进jquery,但需要和后台交互时,常写为jquery格式:所以笔者觉得有必要将mui封装的ajax请求在这里提一下: 1,mui框架基于htm5plus的XMLHttpRequest,封装了常用的Ajax函数,支持GET.POST请求方式,支持返回json.xml.html.text.script数据类型: 本着极简的设计原则,mui提供了mui.ajax方法,并在mui.ajax方法基础上,进一步简化出最常用的mui.get().mui.getJSON

jQuery封装的ajax操作

jQuery中ajax请求有三种操作方式$.get() $.post() $.ajax() get和post(是对$.ajax的封装) //不传递数据 $.get("./16.php",function(msg){ alert(msg); }); //给服务器传递数据 $.get("./16.php",{name:'tom',age:23},function(msg){ alert(msg); }); //用法与get方法类似 $.post("./16.p