开发者

Is there a jQuery stand-alone Ajax module?

I开发者_开发技巧s there a way to get jQuery's Ajax module? The point is I do not need the whole library, but only its Ajax module (I need to include this module in several iframes).


Update 2016

You can use this tool to build your own custom jQuery version.

jQuery Builder

As of jQuery 2.1.1

Full file sized unminified is: 241.55 Kb

Ajax Only minified is: 49.60 Kb

That is a 5x reduction in size.

Is there a jQuery stand-alone Ajax module?


As Darin already says, it's all or nothing. JQuery's Ajax functions are closely intertwined with the rest of the functionality.

There are a few other, stand-alone Ajax libraries around like Matt Kruse's Ajax toolbox - maybe that helps.

I would consider loading the full jQuery library. If you link to jQuery on a CDN, loading times will be minuscule.


Another option would be to use the built-in fetch API provided by the browser.

Here is an example snippet:

fetch('http://localhost:3000/users.json', {
  method: 'POST', 
  mode: 'cors', 
  redirect: 'follow',
  body: JSON.stringify({
     user: {
       firstName: 'john',
       lastName: 'doe'
     }
  }),
  headers: new Headers({ 'Content-Type': 'application/json' })
}).then(function() {
  /* handle response */
});

This blog post is a great introduction to the API and shows more use cases.

fetch doesn't have full cross-browser support yet (I think mainly IE and Safari are lacking), but there is polyfill that you can use until that day comes.

fetch polyfill: https://github.com/github/fetch

Older browsers will also need a Promise polyfill (one option, another option).


As of jQuery 1.8 you can do it: LINK


You can view standard javascript alternatives to jQuery at youmightnotneedjquery.com

For example the alternative to $.ajax post is:

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

And the alternative to $.ajax get is:

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var resp = request.responseText;
  } else {
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();


I've created a custom build of jQuery 1.7.1 here:

https://github.com/dtjm/jquery/tree/ajaxonly


AMD user please read this, my answer is for building a single file.
Or just use this library: ded / reqwest (4 KB, min & gzip)


  1. Download source code and run npn i

  2. Open /src/jquery.js and remove any moudle you don't want, but keep "./exports/amd", "./exports/global"

    define([
        "./ajax",
        "./ajax/xhr",
        "./ajax/script",
        "./ajax/jsonp",
        "./exports/amd",
        "./exports/global"
    ], function (jQuery) {
        "use strict";
        return jQuery;
    });
    
  3. Run grunt custom:-sizzle

  4. Goto /dist and take your build

Modules in your build now:

  • core
  • deferred
  • ajax

Size:

  • just build: 85 KB
  • build with min: 26 KB
  • build with min & gzip: 10 KB


If you really really want just the Ajax parts of jQuery you can get the code from their repository (https://github.com/jquery/jquery), glancing at it you would want to look at "ajax.js" and "core.js" in the "src" directory. You would then want to compile them together with the closure compiler or something.

But as others stated, it would be a lot easier to just load it from one of the CDNs (jQuery, Google, Microsoft) which most users will have cached anyway.


YES, I just did mine, http://noypi-linux.blogspot.com/2013/05/build-jquery-with-ajax-only.html

you only need these files (resulting minified is about 30Kb):

/d/dev/javascript/jquery/jquery/src/intro.js
/d/dev/javascript/jquery/jquery/src/core.js
/d/dev/javascript/jquery/jquery/src/callbacks.js
/d/dev/javascript/jquery/jquery/src/deferred.js
/d/dev/javascript/jquery/jquery/src/support.js
/d/dev/javascript/jquery/jquery/src/data.js
/d/dev/javascript/jquery/jquery/src/event.js
/d/dev/javascript/jquery/jquery/src/serialize.js
/d/dev/javascript/jquery/jquery/src/ajax.js
/d/dev/javascript/jquery/jquery/src/ajax/xhr.js
/d/dev/javascript/jquery/jquery/src/exports.js
 /d/dev/javascript/jquery/jquery/src/outro.js


Update: This library was removed from GitHub, I would recommend using Fetch API instead. All modern browsers support it without IE.

Old answer: You can try AJAJ. It's a very tiny(less than 1kb gzipped) library to make ajax calls. And its syntax is very similar to jQuery.

For example:

ajaj({
  method: "POST",
  url: "/path/to/request",
  data: {
    name: "AJAJ",
    version: "1.0.0",
  },
  success: function (data) {
    console.log(data);
  },
  fail: function (error) {
    console.log(error);
  },
});


It's all or nothing. Of course jquery is open source and you could extract the part you are interested in in your own library (good luck with this). You may consider using a CDN which will ensure that most users will already have it cached in their browsers so you shouldn't be concerned about size.


There is none out of the box but you can of course cut and paste from the existing file and then minimize it.

If you are just worried about the size of the library serving it from a CDN from Google, MS or jQuery will probably require less data traffic as most browsers already have the files cached.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜