هل من الممكن استعمال تقنية Ajax دون مكتبة Jquery؟

نعم يمكنك فعل ذلك دون اللجوء إلى jquery، وذلك باستخدام  vanilla script بالشكل التالي:

<script type="text/javascript">
function loadXMLDoc() {
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
           if(xmlhttp.status == 200){
               document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
           }
           else if(xmlhttp.status == 400) {
              alert('There was an error 400')
           }
           else {
               alert('something else other than 200 was returned')
           }
        }
    }

    xmlhttp.open("GET", "ajax_info.txt", true);
    xmlhttp.send();
}
</script>

أما الطريقة الاعتيادية فهي باستخدام jquery:

$.ajax({
    url: "test.html",
    context: document.body,
    success: function(){
      $(this).addClass("done");
    }
});

وهذه بعض المقارنات بين jquery و vanila:

• Events:

// jQuery
$(document).ready(function() {
  // code
})

// Vanilla
document.addEventListener('DOMContentLoaded', function() {
  // code
})

// jQuery
$('a').click(function() {
  // code…
})

// Vanilla
[].forEach.call(document.querySelectorAll('a'), function(el) {
  el.addEventListener('click', function() {
    // code…
  })
})

• Selector:

// jQuery
var divs = $('div')

// Vanilla
var divs = document.querySelectorAll('div')

// jQuery
var newDiv = $('<div/>')

// Vanilla
var newDiv = document.createElement('div')

 A Guide to Vanilla Ajax Without jQuery