عمليات AJAX

مقدمة

مثال على Ajax

مثال على Ajax

<div id="result"></div>

<script>
 var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 
        && this.status == 200) {
      //we are writing the AJAX request response 
      //to div element that has result id
      var result = document.getElementById('result');
      result.innerHTML = JSON.stringify(this.responseText);
    }
  };
  xhttp.open("GET", "https://api.coddykit.com/api/coddy-test", true);
  xhttp.send();
</script>

تحذير

أسلوب Ajax

<div id="result"></div>

<script>
$.ajax ({
   url: 'https://api.coddykit.com/api/coddy-test',
   success: function(data){
   $('#result').text(JSON.stringify(data));
  }
});

</script>

مثال على Ajax

const https = require('https');

function ajax(url) {
  const callbacks = { success: [], fail: [], always: [] };
  const req = https.get(url, (res) => {
    let data = '';
    res.on('data', chunk => data += chunk);
    res.on('end', () => {
      callbacks.success.forEach(cb => cb(data));
      callbacks.always.forEach(cb => cb());
    });
  });
  req.on('error', (err) => {
    callbacks.fail.forEach(cb => cb(err));
    callbacks.always.forEach(cb => cb());
  });
  return {
    done: function(cb) { callbacks.success.push(cb); return this; },
    fail: function(cb) { callbacks.fail.push(cb); return this; },
    always: function(cb) { callbacks.always.push(cb); return this; }
  };
}

var ajaxReq = ajax("https://api.coddykit.com/api/coddy-test")
  .done(function() {
   //success callback
  /*
  If our get request is sent to 
  the server with success (HTTP 2xx), 
  this function is called.
 */
  })
  .fail(function() {
   /* This function works 
       if the AJAX request fails.
   */
  })
  .always(function() {
   /*
   This function works in all cases when 
    the AJAX request is 
    successful or unsuccessful.
   */
  });

أسلوب get

<div id="result"></div> 

<script>
$.get("https://api.coddykit.com/api/coddy-test", 
function(response) {
   $('#result').text(JSON.stringify(response));
})
</script>

طريقة Post

<div id="result"></div> 

<script>
$.post("https://api.coddykit.com/api/coddy-test", 
//Please note that we can send data in body while we sending Post Request
{name:'Coddy', age: 3},
function(response) {
   $('#result').text(JSON.stringify(response));
})
</script>

أسلوب Put

<div id="result"></div> 

<script>
$.ajax({
method:'PUT', 
url:"https://api.coddykit.com/api/coddy-test",
//Please note that we can send data in body while we sending Put Request
data: {name:'Coddy', age: 3},
success: function(response) {
   $('#result').text(JSON.stringify(response));
}})
</script>

أسلوب Delete

<div id="result"></div> 

<script>
$.ajax({
method:'DELETE', 
url:"https://api.coddykit.com/api/coddy-test",
success: function(response) {
   $('#result').text(JSON.stringify(response));
}})
</script>

رابط

تهانينا