मैं AJAX के साथ फ़ाइल से JSON ऑब्जेक्ट कैसे लोड करूं?

Question

मैं डेटा स्थानांतरित करने के लिए JSON का उपयोग कर रहा हूं।

मुझे अपने एचटीएमएल पेज में अजाक्स के साथ फाइल पढ़ने के लिए क्या चाहिए जिसमें केवल मेरी स्क्रिप्ट में एक JSON ऑब्जेक्ट शामिल है?

क्या मुझे jQuery की भी आवश्यकता है, या क्या यह JSON फ़ाइल अजाक्स के साथ लोड करना संभव है?

क्या यह विभिन्न ब्राउज़रों पर अलग है?

Answer 1

आप किसी भी पुस्तकालय की जरूरत नहीं है, सब कुछ जावास्क्रिप्ट एक json फ़ाइल लाने और यह पार्स करने के लिए वेनिला में उपलब्ध है

var a = new XMLHttpRequest(); 
a.open("GET","your_json_file",true); 
a.onreadystatechange = function() { 
    if(this.readyState == 4) { 
    if(this.status == 200) { 
     var json = window.JSON ? JSON.parse(this.reponseText) : eval("("+this.responseText+")"); 
     // do something with json 
    } 
    else alert("HTTP error "+this.status+" "+this.statusText); 
    } 
} 
a.send(); 

Answer 2

अतीत में, अजाक्स अलग-अलग ब्राउज़रों में अलग था (और फिर भी यदि आपको पुराने ब्राउज़र का समर्थन करने की आवश्यकता है, तो दुर्भाग्य से उपयोगकर्ताओं की एक अच्छी संख्या अभी भी उपयोग कर रही है)। पुराने ब्राउज़र के लिए, ब्राउज़र अंतरों को संभालने के लिए आपको JQuery (या अपने समकक्ष कोड) जैसी लाइब्रेरी की आवश्यकता होगी। किसी भी मामले में, शुरुआत के लिए, मैं अच्छे दस्तावेज़ों, एक साधारण एपीआई, और जल्दी से शुरू करने के लिए jQuery की अनुशंसा कर सकता हूं, हालांकि MDN जावास्क्रिप्ट के लिए भी सहायक है (और आपको वास्तव में जावास्क्रिप्ट/डोम एपीआई को समझना चाहिए, भले ही आप मुख्य रूप से jQuery पर भरोसा करते हैं)।

function fetchJSONFile(path, callback) { 
    var httpRequest = new XMLHttpRequest(); 
    httpRequest.onreadystatechange = function() { 
     if (httpRequest.readyState === 4) { 
      if (httpRequest.status === 200) { 
       var data = JSON.parse(httpRequest.responseText); 
       if (callback) callback(data); 
      } 
     } 
    }; 
    httpRequest.open('GET', path); 
    httpRequest.send(); 
} 

// this requests the file and executes a callback with the parsed result once 
// it is available 
fetchJSONFile('pathToFile.json', function(data){ 
    // do something with your data 
    console.log(data); 
}); 

Answer 3

लिए सबसे कारगर तरीका जावास्क्रिप्ट सादे उपयोग करने के लिए है:

Answer 4

मैं AJAX jquery का उपयोग करना पसंद करता हूं। Jquery बहुत आसान बनाता है।

if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'){ 
    // if it's an ajax request 

    $json['success'] = 1; 
    $json['html'] = '<div id="test">..[more html code here].. </div>'; 
    echo json_encode($json); 
}else{ 
    // if it's an non ajax request 


} 

ग्राहक के पक्ष में आप निम्नलिखित का उपयोग कर jQuery ajax कर सकते हैं::

$.ajax({ 
      type: "POST", 
      url: "[your request url here]", 
      data: { name: "JOKOOOOW OOWNOOO" }, 
      complete: function(e, xhr, settings){ 
       switch(e.status){ 
        case 500: 
        alert('500 internal server error!'); 
        break; 
        case 404: 
         alert('404 Page not found!'); 
        break; 
        case 401: 
         alert('401 unauthorized access');  
        break;  
       } 
      }   
     }).done(function(data) { 
      var obj = jQuery.parseJSON(data) 

      if (obj.success == 1){ 

        $('div#insert_html_div').html(obj.html); 

      }else if (obj.error == 1){ 


          } 


      // etc 

     });