یادگیری AJAX یکبار برای همیشه!

مفهوم Asynchronous و  Synchronous :

در واقع معنای اصلی این کلمات در موارد دیگری استفاده می شود. 

var request = new XMLHttpRequest();
request.open('GET', 'test.txt' );
request.send();

if( ( request.status === 200 ) ){
   console.log(request);
}

اگر تصویر زیر را مشاهده کنید در قسمت کنسول مرورگر پاسخ درخواست که محتوای فایل test.txt است برای ما ارسال شده است.

همانطور که در تصویر بالا مشاهده می کنید، رخ دادهای زیادی وجود دارند که با on شروع می شوند، رویداد onreadystatechange یک AJAX API مرورگر است که برای ما مشخص می کند چه مقدار از درخواست پیش رفته است، مثلا اگر عدد صفر باشد یعنی هنوز درخواست ارسال نشده است و زمانی که عدد ۴  باشد یعنی عملیات ارسال و دریافت درخواست ها به طور کامل انجام شده است.

var request = new XMLHttpRequest();
request.open('GET', 'test.txt');
request.onreadystatechange = function()
{
    if ( ( request.status === 200 ) && (request.readyState === 4) ) 
    {
        console.log(request);
    }
}
request.send();

Use XMLHttpRequest objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing. XMLHttpRequest is used heavily in Ajax programming.

اعمال تغییرات AJAX با استفاده از DOM 

var request = new XMLHttpRequest();
request.open('GET', 'test.txt');
request.onreadystatechange = function()
{
    if ( ( request.status === 200 ) && (request.readyState === 4) ) 
    {
        var parent = document.getElementById('parent');
        parent.innerHTML = request.responseText;
    }
}
request.send();

 AJAX و دریافت داده ها از فایلهای با فرمت XML 

var request = new XMLHttpRequest();
request.open('GET', 'cd_catalog.xml');
request.onreadystatechange = function()
{
    if ( ( request.status === 200 ) && (request.readyState === 4) ) 
    {
        console.log( request.responseXML );
    }
}
request.send();

var request = new XMLHttpRequest();
request.open('GET', 'cd_catalog.xml');
request.onreadystatechange = function()
{
    if ( ( request.status === 200 ) && (request.readyState === 4) ) 
    {
        var cdTag = request.responseXML.getElementsByTagName('CD');
        var parent = document.getElementById('parent');
        var output = "<ul>";

        for (var i = 0; i < cdTag.length; i++) {

            output += "<li>";
            output += cdTag[i].getElementsByTagName('TITLE')[0].firstChild.nodeValue;
            output += "</li>";

        }
        output += "</ul>";
        parent.innerHTML = output;
    }
}
request.send();

 AJAX و دریافت داده ها از فایلهای با فرمت JSON  

var items = JSON.parse( request.responseText );

var request = new XMLHttpRequest();
request.open('GET', 'data.json');
request.onreadystatechange = function()
{
    if ( ( request.status === 200 ) && (request.readyState === 4) ) 
    {
        var items = JSON.parse( request.responseText );
        var output = ”<ul>";

        for(var key in items )
        {
            output += "<li>" + items[key].name + "</li>";
        }

        output += "</ul>";
        document.getElementById('parent').innerHTML = output;
    }
}
request.send();

نکته مهم : 

var request = new XMLHttpRequest();
request.open('GET', 'test.json');
request.onreadystatechange = function()
{
    if ( ( request.status === 200 ) && (request.readyState === 4) ) 
    {
        var jsontext = request.responseText;  
        var items = JSON.parse( jsontext );

        var output = "<ul>";
        for(var key in items.colors )
        {
            output += "<li>" + items.colors[key].color + "</li>";
        }
        output += "</ul>";
        document.getElementById('parent').innerHTML = output;
    }
}
request.send();