2011-03-21 12 views
68

यह Stream data with Node.js के समान है, लेकिन मुझे नहीं लगता कि उस प्रश्न का पर्याप्त उत्तर दिया गया था।jQuery AJAX कॉल का उपयोग कैसे करें node.js

मैं एक पृष्ठ और एक node.js सर्वर के बीच डेटा स्थानांतरित करने के लिए एक jQuery AJAX कॉल (प्राप्त, लोड, getJSON) का उपयोग करने की कोशिश कर रहा हूँ। मैं अपने ब्राउज़र से पता हिट कर सकता हूं और 'हैलो वर्ल्ड!' देख सकता हूं, लेकिन जब मैं इसे अपने पेज से आज़माता हूं, तो यह विफल रहता है और दिखाता है कि मुझे कोई प्रतिक्रिया नहीं मिली है। मैंने इसका परीक्षण करने के लिए एक सरल परीक्षण पृष्ठ और हैलो वर्ल्ड उदाहरण स्थापित किया है:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>get test</title> 
</head> 
<body> 
    <h1>Get Test</h1> 
    <div id="test"></div> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script> 
    <script> 
     $(document).ready(function() { 
      //alert($('h1').length); 
      $('#test').load('http://192.168.1.103:8124/'); 
      //$.get('http://192.168.1.103:8124/', function(data) {     
      // alert(data); 
      //}); 
     }); 
    </script> 
</body> 
</html> 

और

var http = require('http'); 

http.createServer(function (req, res) { 
    console.log('request received'); 
    res.writeHead(200, {'Content-Type': 'text/plain'}); 
    res.end('Hello World\n'); 
}).listen(8124); 
+1

हम पता है कि आप जिस फ़ाइल को लोड कर रहे हैं में है की जरूरत है - लोड की गई फ़ाइल में कोड कैसे निष्पादित किया जा रहा है? – mattsven

उत्तर

84

यदि आपका सरल परीक्षण पृष्ठ अन्य प्रोटोकॉल/डी पर स्थित है आपके हैलो वर्ल्ड node.js उदाहरण से मुख्य/बंदरगाह उदाहरण आप क्रॉस-डोमेन अनुरोध कर रहे हैं और same origin policy का उल्लंघन कर रहे हैं इसलिए आपके jQuery AJAX कॉल (प्राप्त करें और लोड) चुपचाप विफल हो रहे हैं। इस कामकाजी क्रॉस-डोमेन को प्राप्त करने के लिए आपको JSONP आधारित प्रारूप का उपयोग करना चाहिए।

var http = require('http'); 

http.createServer(function (req, res) { 
    console.log('request received'); 
    res.writeHead(200, {'Content-Type': 'text/plain'}); 
    res.end('_testcb(\'{"message": "Hello world!"}\')'); 
}).listen(8124); 

और क्लाइंट साइड जावास्क्रिप्ट/jQuery: उदाहरण के लिए कोड Node.js

$(document).ready(function() { 
    $.ajax({ 
     url: 'http://192.168.1.103:8124/', 
     dataType: "jsonp", 
     jsonpCallback: "_testcb", 
     cache: false, 
     timeout: 5000, 
     success: function(data) { 
      $("#test").append(data); 
     }, 
     error: function(jqXHR, textStatus, errorThrown) { 
      alert('error ' + textStatus + " " + errorThrown); 
     } 
    }); 
}); 

वहाँ भी अन्य तरीकों से कैसे reverse proxy की स्थापना करके उदाहरण के लिए इस काम के होते हैं, या अपने वेब अनुप्रयोग का निर्माण कर रहे हैं पूरी तरह ढांचे के साथ express

+0

बहुत बढ़िया, धन्यवाद! मैंने इसे आपके उदाहरण में उल्लिखित जेसनपी का उपयोग करने के लिए सेट किया है, और यह पूरी तरह से काम कर रहा है। – briznad

+0

महान उत्तर yojimbo, यह वास्तव में मेरी मदद की। मैंने कुछ अतिरिक्त सामानों के साथ एक उत्तर पोस्ट किया है। –

+0

अभिव्यक्ति के साथ नोडज एप्लिकेशन कैसे निर्माण क्रॉस डोमेन अनुरोध समस्या हल करेगा? –

3

मैं सबसे ब्राउज़रों कि लोड फ़ाइल फ़ाइल लोड करने से एक ही बंदरगाह पर होना में अपने html पृष्ठ एक अलग बंदरगाह पर होस्ट की है लगता है। एक ही मूल नीति requires

7

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

यह मेरा ग्राहक साइड कोड है।

$.getJSON("http://localhost:8124/dummy?action=dostuff&callback=?", 
function(data){ 
    alert(data); 
}, 
function(jqXHR, textStatus, errorThrown) { 
    alert('error ' + textStatus + " " + errorThrown); 
}); 

यह मेरा सर्वर साइड Node.js

var http = require('http'); 
var querystring = require('querystring'); 
var url = require('url'); 

http.createServer(function (req, res) { 
    //grab the callback from the query string 
    var pquery = querystring.parse(url.parse(req.url).query); 
    var callback = (pquery.callback ? pquery.callback : ''); 

    //we probably want to send an object back in response to the request 
    var returnObject = {message: "Hello World!"}; 
    var returnObjectString = JSON.stringify(returnObject); 

    //push back the response including the callback shenanigans 
    res.writeHead(200, {'Content-Type': 'text/plain'}); 
    res.end(callback + '(\'' + returnObjectString + '\')'); 
}).listen(8124); 
+0

आपका कोड बढ़िया काम करता है। ध्यान दें कि आपको सामग्री प्रकार के रूप में टेक्स्ट/सादे के साथ एक माइम त्रुटि मिलेगी। एप्लिकेशन/जावास्क्रिप्ट को सामग्री-प्रकार बदलने से हल हो जाता है। – payling

1

सर्वर साइड पर निम्नलिखित की तरह कुछ का उपयोग है:

http.createServer(function (request, response) { 
    if (request.headers['x-requested-with'] == 'XMLHttpRequest') { 
     // handle async request 
     var u = url.parse(request.url, true); //not needed 

     response.writeHead(200, {'content-type':'text/json'}) 
     response.end(JSON.stringify(some_array.slice(1, 10))) //send elements 1 to 10 
    } else { 
     // handle sync request (by server index.html) 
     if (request.url == '/') { 
      response.writeHead(200, {'content-type': 'text/html'}) 
      util.pump(fs.createReadStream('index.html'), response) 
     } 
     else 
     { 
      // 404 error 
     } 
    } 
}).listen(31337) 
संबंधित मुद्दे