ajax ट्यूटोरियल
अजैक्स के साथ शुरुआत करना

ASP.NET asp.net-mvc C# Language HTML JavaScript jQuery MySQL Node.js PHP Ruby on Rails

टिप्पणियों

AJAX (एक तुल्यकालिक जम्मू avaScript एक nd एक्स एमएल) आप कोड के निष्पादन को रोके बिना बाहरी डेटा का अनुरोध करने की अनुमति देता है। कई मामलों में यह एक पृष्ठ के टुकड़ों या सर्वर से जानकारी (XMLhttpRequests के माध्यम से) और फिर प्रसंस्करण और जावास्क्रिप्ट का उपयोग करके इसे प्रदर्शित करने के लिए लागू किया जाता है।

AJAX की गैर-अवरुद्ध प्रकृति वह है जो इसे ऐसे व्यापक सॉफ़्टवेयर पैटर्न बनाती है। चूंकि जावास्क्रिप्ट ब्राउज़र में अवरुद्ध है, एक तुल्यकालिक बाहरी कॉल ब्राउज़र को कॉल की अवधि के लिए अनुत्तरदायी बना देगा जब तक कि वह या तो डेटा वापस नहीं करता है या समय समाप्त हो गया है। आपके आवेदन को पूरी तरह से बाहरी वास्तुकला पर निर्भर करते हुए और यह कितना अच्छा प्रदर्शन करेगा।

AJAX कॉल आमतौर पर अतिरिक्त कार्यक्षमता या पठनीयता प्रदान करने के लिए अमूर्त किया जाता है, लेकिन कार्यान्वयन (आमतौर पर) XMLHttpRequest विशिष्टता पर निर्मित होते हैं।

स्थापना या सेटअप

AJAX क्या है?

AJAX अतुल्यकालिक जावास्क्रिप्ट और XML के लिए खड़ा है। संक्षेप में, यह सर्वर-साइड स्क्रिप्ट के साथ संवाद करने के लिए XMLHttpRequest ऑब्जेक्ट का उपयोग है। यह JSON, XML, HTML और यहां तक कि पाठ फ़ाइलों सहित विभिन्न स्वरूपों में सूचना प्राप्त करने के साथ-साथ भेज सकता है। -मोजिला डेवलपर नेटवर्क 2016

AJAX को लागू करने का सबसे आसान तरीका, खासकर यदि आप सर्वर के साथ संचार करने की योजना बना रहे हैं, तो यह jQuery का उपयोग करके है।

JQuery क्या है?

jQuery एक तेज़, छोटा और सुविधा संपन्न जावास्क्रिप्ट लाइब्रेरी है। यह HTML डॉक्यूमेंट ट्रैवर्सल और मैनिपुलेशन, ईवेंट हैंडलिंग, एनीमेशन और अजाक्स जैसी चीजों को आसान बनाने वाले एपीआई के साथ बहुत सरल बनाता है जो ब्राउज़रों की भीड़ में काम करता है। -jquery.com

जिन लोगों ने ज्यादा jQuery का उपयोग नहीं किया है, वे इसे उन कार्यों के रूप में सोचें जिनका उपयोग हम अपने जीवन को आसान बनाने के लिए कर सकते हैं। यह AJAX के साथ उपयोग करने के लिए एकदम सही है क्योंकि यह उसी चीज़ को पूरा करने के लिए हमें कितनी मात्रा में कोड लिखना है!

अपनी वेब साइट पर jQuery कैसे जोड़ें

यदि आपको अजाक्स का उपयोग करने की आवश्यकता है, तो आपको अपने प्रोजेक्ट में jQuery जोड़ने की आवश्यकता है। http://jquery.com/download/ इस लिंक में आप jquery को जोड़ने के कई तरीके देख सकते हैं। आप jQuery के डाउनलोड किए गए संस्करण का उपयोग कर सकते हैं या आप CDN का उपयोग कर सकते हैं। http://jquery.com/download/#jquery-39-s-cdn-provided-by-maxcdn । लेकिन अगर आप CDN का उपयोग करते हैं तो कुछ सुरक्षा जोखिम हैं। बेक्वेसी प्रोजेक्ट का उपयोग कर jquery का उपयोग करता है, इसलिए एक हैकर कॉल को हेरफेर कर सकता है। यदि आप डाउनलोड किए गए संस्करण का उपयोग कर सकते हैं तो बेहतर है। HTML प्रोजेक्ट में jquery जोड़ने का तरीका देखें। यह आसान है। पहला उदाहरण Downloaded स्रोत का उपयोग करना है। इस लिंक का उपयोग http://jquery.com/download/#jquery डाउनलोड करें। अगर आप सिर्फ jquery का उपयोग करना चाहते हैं, तो मैं आपको सुझाव देता हूं कि आप डाउनलोड संकुचित, उत्पादन jQuery 3.1.1 डाउनलोड करें। जब आप इसे डाउनलोड करते हैं तो उचित स्थान पर jquery-version.min.js जोड़ते हैं (जैसे कि आपके प्रोजेक्ट का जावास्क्रिप्ट फ़ोल्डर) तो बस आपको टैग करना होगा src = jquery / स्थान के साथ नीचे की तरह।

<head>

<script src="path/from/html/page/to/jquery.min.js"></script>

</head>

एक सीडीएन का उपयोग करने का तरीका देखें। यह लिंक http://jquery.com/download/#use-jquery-with-a-cdn आप विभिन्न CDN (कंटेंट डिलीवरी नेटवर्क) देख सकते हैं।

<head>

<script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>

</head>

जैसा कि आप देख सकते हैं कि आपको केवल उन टैग्स को जोड़ना होगा जो CDN प्रदाता को आपूर्ति करते हैं। अब HTML पेज पर कुछ स्क्रिप्ट्स डालकर यह जाँच करें कि यह काम कर रहा है।

<script>
$(document).ready(function(){
    alert("jQuery Works")
});
</script>

यदि आप jQuery के कामों को देखते हैं, तो इसका मतलब है कि आपने इसे सही तरीके से जोड़ा है।

सर्वर के साथ संवाद करने के लिए सरल jQuery का उदाहरण

jQuery.ajax API वेब साइट से लिया गया:

$.ajax({
    method: "POST",
    url: "some.php",
    data: {
        name: "John",
        location: "Boston"
    },
    success: function(msg) {
        alert("Data Saved: " + msg);
    },
    error: function(e) {
        alert("Error: " + e);
    }
});

JQuery के कारण कोड का यह हिस्सा पढ़ने और समझने में आसान है कि क्या हो रहा है।

$.ajax - इस बिट को jQuery की ajax कार्यक्षमता कहते हैं।
method: "POST" - यह पंक्ति यहां बताती है कि हम सर्वर के साथ संवाद करने के लिए एक POST विधि का उपयोग करने जा रहे हैं। अनुरोधों के प्रकारों पर पढ़ें!
url - यह चर घोषित करता है कि अनुरोध कहां भेजा जा रहा है। आप कहीं के लिए एक अनुरोध भेज रहे हैं। ये तो कमाल की सोच है।
data - बहुत सीधे आगे। यह वह डेटा है जिसे आप अपने अनुरोध के साथ भेज रहे हैं।
success - इस समारोह यहां आप क्या डेटा के साथ करने का फैसला करने के लिए लिखने तक वापस पहुंचने के msg ! जैसा कि उदाहरण से पता चलता है, यह वर्तमान में केवल msg साथ एक अलर्ट बना रहा है जो वापस आ जाता है।
error - यह फ़ंक्शन यहां आप त्रुटि संदेश प्रदर्शित करने के लिए लिखते हैं, या जब ajax अनुरोध त्रुटियों के माध्यम से काम करने के लिए कार्य प्रदान करते हैं।

.done का एक विकल्प है

success: function(result) {
    // do something
});

सिंक - Async अजाक्स अनुरोध

अतुल्यकालिक अजाक्स कॉल

इस प्रकार के अजाक्स कॉल के साथ, कोड कॉल के पूरा होने की प्रतीक्षा नहीं करता है।

$('form.ajaxSubmit').on('submit',function(){
    // initilization...
    var form   = $(this);
    var formUrl    = form.attr('action');
    var formType   = form.attr('method');
    var formData   = form.serialize();
    
    $.ajax({
        url: formUrl,
        type: formType,
        data: formData,
        async: true,
        success: function(data) {
            // .....
        }
    });
    //// code flows through without waiting for the call to complete
    return false;
});

सिंक्रोनस अजाक्स कॉल

इस प्रकार के अजाक्स कॉल के साथ, कोड कॉल के पूरा होने की प्रतीक्षा करता है।

$('form.ajaxSubmit').on('submit',function(){
    // initilization...
    var form   = $(this);
    var formUrl    = form.attr('action');
    var formType   = form.attr('method');
    var formData   = form.serialize();
    var data = $.ajax({
            url: formUrl,
            type: formType,
            data: formData,
            async: false
        }).responseText;
    //// waits for call to complete
    return false;
});

XMLHttpRequest ऑब्जेक्ट का उपयोग करके सरल अजाक्स अनुरोध भेजा गया

var httpRequest = new XMLHttpRequest();

httpRequest.onreadystatechange = getData;

httpRequest.open('GET', 'https://url/to/some.file', true);
httpRequest.send();

function getData(){
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
        alert(httpRequest.responseText);
    }
}

new XMLHttpRequest() एक नया XMLHttpRequest ऑब्जेक्ट बनाता है - यही वह है जिसके साथ हम अपना अनुरोध भेजेंगे

onreadystatechange बिट हमारे अनुरोध बताता है कॉल करने के लिए getData() हर यह की स्थित बदलकर

.open() हमारा अनुरोध बनाता है - यह एक अनुरोध विधि (' GET ', ' POST ', आदि) लेता है, जिस पृष्ठ का आप क्वेरी कर रहे हैं, और वैकल्पिक रूप से, अनुरोध अनुरोध के अनुरूप होना चाहिए या नहीं।

.send() हमारा अनुरोध भेजता है - यह वैकल्पिक रूप से सर्वर को भेजने के लिए डेटा को स्वीकार करता है जैसे .send(data)

अंत में, getData() वह फ़ंक्शन है जो हमने कहा है कि हर बार हमारे अनुरोध की स्थिति में परिवर्तन कहा जाना चाहिए। यदि readyState किया के बराबर है तो यह अलर्ट responseText जो सिर्फ डेटा सर्वर से प्राप्त है।

अधिक जानकारी MDN पर आरंभ किए गए मार्गदर्शिका में मिल सकती है।

एक साधारण कॉलबैक के साथ वेनिला जावास्क्रिप्ट में अजाक्स का उपयोग करना

यहाँ हमारा कार्य वेनिला जावास्क्रिप्ट में लिखा गया एक सरल अजाक्स कॉल बनाने का है (es2015 नहीं)

function ajax(url, callback) {
    var xhr;
     
    if(typeof XMLHttpRequest !== 'undefined') xhr = new XMLHttpRequest();
    else {
        var versions = ["MSXML2.XmlHttp.5.0", 
                        "MSXML2.XmlHttp.4.0",
                        "MSXML2.XmlHttp.3.0", 
                        "MSXML2.XmlHttp.2.0",
                        "Microsoft.XmlHttp"]

         for(var i = 0, len = versions.length; i < len; i++) {
            try {
                xhr = new ActiveXObject(versions[i]);
                break;
            }
            catch(e){}
         } // end for
    }
     
    xhr.onreadystatechange = ensureReadiness;
     
    function ensureReadiness() {
        if(xhr.readyState < 4) {
            return;
        }
         
        if(xhr.status !== 200) {
            return;
        }

        // all is well  
        if(xhr.readyState === 4) {
            callback(xhr);
        }           
    }
     
    xhr.open('GET', url, true);
    xhr.send('');
}

और इसका उपयोग इस प्रकार किया जा सकता है:

ajax('myFile.html', function(response) {
    document.getElementById('container').innerHTML = response.responseText;
});

यदि आप एक्मास्क्रिप्ट 6 (जिसे es2015 भी कहा जाता है) का उपयोग करना चाहते हैं, तो आप लाने के तरीके का उपयोग कर सकते हैं, जो एक वादा लौटाता है:

fetch('myFile.json').then(function(res){
    return res.json();
 });

Es2015 वादों के बारे में पढ़ने के लिए लिंक बलो का अनुसरण करें: वादे

टाइपस्क्रिप्ट का उपयोग करके एक अतुल्यकालिक AJAX कॉल करना

एक शॉपिंग कार्ट में एक उत्पाद जोड़ना

निम्न उदाहरण दर्शाता है कि AJAX और टाइपस्क्रिप्ट का उपयोग करते हुए डेटाबेस टेबल पर किसी उत्पाद (या कुछ) को कैसे जोड़ें।

declare var document;
declare var xhr: XMLHttpRequest;

window.onLoad = () =>
{
    Start();
};

function Start()
{
    // Setup XMLHttpRequest (xhr).
    if(XMLHttpRequest)
    {
        xhr = new XMLHttpRequest();
    }
    else
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    AttachEventListener(document.body, "click", HandleCheckBoxStateChange);
}

function AttachEventListener(element: any, e, f)
{
    // W3C Event Model.
    if(element.addEventListener)
    {
        element.addEventListener(e, f, false);
    }
    else if(element.attachEvent)
    {
        element.attachEvent("on" + e, (function(element, f)
        {
            return function()
            {
                f.call(element, window.event);
            };
        })
        (element, f));
    }

    element = null;
}

function HandleCheckBoxStateChange(e)
{
    var element = e.target || e.srcElement;

    if(element && element.type == "checkbox")
    {
        if(element.checked)
        {
            AddProductToCart(element);
        }
        else
        {
            // It is un-checked.
            // Remove item from cart.
        }
    }
    else
    {
        break;
    }
}

AddProductToCart(e)
{
    var element = <HTMLInputElement>document.getElementById(e.id);

    // Add the product to the Cart (Database table)
    xhr.onreadystatechange = function()
    {
        if(xhr.readyState == 4)
        {
            if(xhr.status == 200)
            {
                if(element != null)
                {
                    console.log("200: OK");
                }
                else
                {
                    console.log(":-(");
                }
            }
            else
            {
                // The server responded with a different response code; handle accordingly.
                // Probably not the most informative output.
                console.log(":-(");
            }
        }
    }

    var parameters = "ProductID=" + encodeURIComponent(e.id) + "&" + "Action=Add&Quantity=" + element.value;

    xhr.open("POST", "../Cart.cshtml");
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.setRequestHeader("Content-length", parameters.length.toString());
    xhr.setRequestHeader("Connection", "close");

    xhr.send(parameters);

    return e.id;
}

इस उदाहरण को पूर्ण बनाने के लिए, वास्तव में इस डेटा को डेटाबेस में सम्मिलित करने के लिए अपने सर्वर-साइड कोड को अपडेट करें। उपरोक्त कोड यह मानता है कि आप C # का उपयोग कर रहे हैं और एक Cart.cshtml फ़ाइल है। हालाँकि, बस cshtml को php बदलें, और अपनी पसंद की भाषा का उपयोग करके अपना स्वयं का सर्वर-साइड लॉजिक लिखें।

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow