اذهب إلى المحتوى
  • 0

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

Simoh

السؤال

Recommended Posts

  • 0

نعم يمكنك فعل ذلك دون اللجوء إلى 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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...