वास्तव में JSON डेटा के बजाय HTML को वापस करने वाले समापन बिंदु के साथ क्या गलत है?


77

जब मैंने पहली बार PHP सीखना शुरू किया (लगभग 5 या 6 साल पहले) मुझे अजाक्स के बारे में पता चला, और मैं "चरणों" के माध्यम से चला गया:

  1. आपके सर्वर एचटीएमएल डेटा वापस आती है और आप इसे एक के अंदर डाल डोम के innerHTML
  2. आप XML के रूप में डेटा ट्रांसफर स्वरूपों के बारे में सीखते हैं (और कहते हैं कि "ओह, इसलिए इसका उपयोग किया जाता है) और फिर JSON।
  3. आप JSON लौटाते हैं और वेनिला जावास्क्रिप्ट कोड का उपयोग करके अपने UI का निर्माण करते हैं
  4. आप jQuery पर जाते हैं
  5. आप API, हेडर, HTTP स्थिति कोड, REST , CORS और बूटस्ट्रैप के बारे में सीखते हैं
  6. आप एसपीए , और फ्रंटेंड फ्रेमवर्क ( प्रतिक्रिया , Vue.js , और AngularJS ) और JSON API मानक सीखते हैं
  7. आपको कुछ उद्यम विरासत कोड प्राप्त होते हैं और इसका निरीक्षण करने पर, पाते हैं कि वे ऐसा करते हैं जो चरण 1 में वर्णित है।

जैसा कि मैंने इस विरासत कोडबेस के साथ काम किया, मैंने यह भी विचार नहीं किया कि यह HTML को वापस कर सकता है (मेरा मतलब है, हम अभी पेशेवर हैं, ठीक है?), इसलिए मुझे उस JSON समापन बिंदु की तलाश में एक कठिन समय था जो डेटा वापस कर रहा था कि अजाक्स कॉल आबाद। यह तब तक नहीं था जब तक कि मैंने "प्रोग्रामर" से नहीं पूछा कि उसने मुझे बताया था कि यह HTML लौटा रहा है और इनर HTML के साथ सीधे DOM में जोड़ा जा रहा है।

बेशक, यह स्वीकार करना कठिन था। मैंने इसे JSON एंडपॉइंट में रिफैक्ट करने के तरीकों के बारे में सोचना शुरू कर दिया, यूनिट के समापन और इतने पर परीक्षण के बारे में सोच रहा था। हालाँकि, इस कोडबेस का कोई परीक्षण नहीं है। एक भी नहीं। और यह 200k लाइनों से अधिक है। बेशक मेरे कार्यों में से एक में संपूर्ण चीज़ों के परीक्षण के लिए दृष्टिकोणों का प्रस्ताव शामिल है, लेकिन फिलहाल हम इससे निपट नहीं रहे हैं।

इसलिए मैं कहीं नहीं हूं, एक कोने में, सोच रहा हूं: अगर हमारे पास कोई परीक्षण नहीं है, तो हमारे पास इस JSON समापन बिंदु को बनाने के लिए कोई विशेष कारण नहीं है (क्योंकि यह "पुन: प्रयोज्य" नहीं है: यह शाब्दिक रूप से उस डेटा को लौटाता है जो केवल उस हिस्से पर फिट बैठता है आवेदन, लेकिन मुझे लगता है कि यह पहले से ही निहित था ... यह HTML डेटा देता है)।

क्या वास्तव में ऐसा करने के साथ गलत क्या है?



3
इसके अलावा संबंधित: stackoverflow.com/questions/1284381/… <- SO में एक बहुत अच्छा जवाब।
मचाडो

73
हाइपरटेक्स्ट ट्रांसफर प्रोटोकॉल का उपयोग कर एक सर्वर हाइपरटेक्स्ट लौटाता है ?! डर!
एंडी

3
@Andy पूरी तरह से ईमानदार होने के लिए, यह वास्तव में जेनेरिक मैसेज ट्रांसफर प्रोटोकॉल है: इसके बारे में कुछ भी हाइपरटेक्स्ट ट्रांसफर करने के लिए विशिष्ट नहीं है, एफ़टीपी के विपरीत, जो फ़ाइलों और निर्देशिकाओं के लिए विशिष्ट चीजों के बारे में बहुत सारी बातें करता है।
जोकर_vD

4
@ जोकर_वेड मैंने कभी भी जीएमटीपी नामक प्रोटोकॉल के बारे में नहीं सुना है। जबकि चीजें विकसित हुई हैं और आप HTTP पर अन्य प्रकार की सामग्री भेज सकते हैं, यह मूल इरादा नहीं था। मेरा कहना यह है कि सिर्फ इसलिए कि आप HTTP का उपयोग करके हाइपर टेक्स्ट के अलावा अन्य सामग्री भेज सकते हैं, यह सुझाव देना मूर्खतापूर्ण है कि इसके मूल उद्देश्य के लिए इसका उपयोग करने के लिए अब वैध नहीं है।
एंडी

जवाबों:


114

वास्तव में JSON डेटा के बजाय HTML को वापस करने वाले समापन बिंदु के साथ क्या गलत है?

कुछ भी सच नहीं। प्रत्येक एप्लिकेशन की अलग-अलग आवश्यकताएं होती हैं, और यह हो सकता है कि आपका एप्लिकेशन एसपीए होने के लिए डिज़ाइन नहीं किया गया था।

यह हो सकता है कि ये सुंदर रूपरेखाएँ जिन्हें आपने उद्धृत किया है (कोणीय, Vue, React, आदि ...) विकास के समय पर उपलब्ध नहीं थे, या आपके संगठन में उपयोग होने वाली "अप्रतिष्ठित" एंट्रीज़री चीज़ों को "अनुमोदित" नहीं किया गया था।

मैं आपको यह बताने जा रहा हूँ: एक एंडपॉइंट जो HTML लौटाता है, वह जावास्क्रिप्ट लाइब्रेरियों पर आपकी निर्भरता को कम करता है और उपयोगकर्ता के ब्राउज़र पर लोड को कम करता है क्योंकि इसे DOM ऑब्जेक्ट बनाने के लिए JS कोड की व्याख्या / निष्पादित करने की आवश्यकता नहीं होगी - HTML पहले से ही है, यह केवल तत्वों को पार्स करने और उन्हें प्रस्तुत करने की बात है। बेशक, इसका मतलब है कि हम उचित मात्रा में डेटा के बारे में बात कर रहे हैं। 10 मेगाबाइट HTML डेटा उचित नहीं है।

लेकिन चूंकि HTML को वापस करने में कुछ भी गलत नहीं है, इसलिए JSON / XML का उपयोग न करके आप जो खो रहे हैं, वह मूल रूप से एक एपीआई के रूप में आपके समापन बिंदु का उपयोग करने की संभावना है। और यहाँ सबसे बड़ा सवाल है: क्या वास्तव में एपीआई होना आवश्यक है?

संबंधित: क्या JSON API से HTML वापस करना ठीक है?


4
मैं यह कहने से पहले एक कदम पीछे ले जाऊंगा कि यह "बस वरीयता" है। आपके द्वारा किए जाने वाले कुछ "बड़े सौदे" निर्णय हैं: क्या यह एपीआई है या नहीं, क्या मेरे पास क्लाइंट के लिए JSON डेटा के रूप में इसके साथ काम करने के लिए उचित पुस्तकालय हैं, मैं किस प्रकार के ग्राहक का समर्थन करूँगा (जावास्क्रिप्ट के बिना ब्राउज़र) उदाहरण), किस वॉल्यूम बनाम CPU समय का उपयोग करने के लिए मेरे पास उपलब्ध है, मेरे प्रोग्रामर किस रणनीति का बेहतर उपयोग करेंगे, आदि आदि
Machado

7
"डोम ऑब्जेक्ट्स बनाने के लिए जेएस कोड की व्याख्या करने की आवश्यकता नहीं होगी - डोम ऑब्जेक्ट्स पहले से ही हैं, यह सिर्फ उन्हें प्रस्तुत करने की बात है" - ठीक है, एचटीएमएल पहले से ही है (एक बार यह तार पर आ गया है)। ब्राउज़र को HTML को पार्स करना है और उससे डोम ऑब्जेक्ट बनाना है।
पॉल डी। वेइट

7
शून्य कारण है कि HTML एपीआई के रूप में कार्य नहीं कर सकता है। शून्य। कोई नहीं। वास्तव में, एचएएल + जेन्सन और एचएएल + एक्सएमएल एचटीएमएल के लिए एक महत्वपूर्ण समानता है। यहाँ REST के बारे में एक उत्कृष्ट बात है। एक समापन बिंदु से HTML वापस करने के बारे में प्रासंगिक हिस्सा अंत के पास है। youtu.be/pspy1H6A3FM व्यक्तिगत रूप से, मैं अपने सभी समापन बिंदु json और HTML दोनों बनाता हूं। यदि आप खोज योग्य सेवाएं लिख रहे हैं, तो यह वास्तव में इसे ... हां ... ब्राउज़र में ब्राउज़ करना आसान बनाता है।
रबरडक

4
क्योंकि यह वास्तव में किसी भी नए तरीके से उपयोग करने की कोशिश करने वाले डेटा को निकालने के लिए एक पूर्ण कुतिया है?
डेडएमजी

4
HTTP पर HTML की सेवा? यह क्या है? एक वेबसाइट?
एंट पी

50

JSON और HTML दो अलग-अलग अर्थ उद्देश्यों को पूरा करते हैं।

यदि आप डेटा के साथ किसी वेब पेज को पॉप्युलेट कर रहे हैं, तो JSON का उपयोग करें। यदि आप वेब पेज के वेब पेज से वेब पेज बना रहे हैं, तो HTML का उपयोग करें।

वे थोड़े अच्छे लग सकते हैं जैसे वे एक ही चीज़ हैं, लेकिन वे बिल्कुल भी नहीं हैं। एक बात के लिए, जब आप सर्वर द्वारा लौटे HTML का उपयोग करके वेब पेज के एक हिस्से का निर्माण कर रहे हैं, तो आप सर्वर-साइड काम कर रहे हैं जब आप किसी वेब पेज पर डेटा बाइंड कर रहे होते हैं, तो आप क्लाइंट-साइड काम कर रहे होते हैं

इसके अलावा, आपको HTML के साथ सावधान रहना होगा ताकि किसी विशिष्ट पृष्ठ पर कसकर बाँध न सकें। इस तरह से आंशिक पृष्ठों को रेंडर करने का पूरा बिंदु पुन: प्रयोज्य होने के लिए है , और यदि आप आंशिक को भी विशिष्ट बनाते हैं, तो यह अन्य पृष्ठों के लिए रचना नहीं करेगा। JSON में यह समस्या नहीं है, क्योंकि यह केवल डेटा है, न कि वेब पेज संरचना।


1
"एक बात के लिए, जब आप HTML का उपयोग करके वेब पेज के एक हिस्से का निर्माण कर रहे हैं, तो आप सर्वर-साइड काम कर रहे हैं।" क्यों? मुझे कोई कारण नहीं दिखता कि ऐसा क्यों होना चाहिए। यह प्रारंभिक पृष्ठ लोड के लिए केवल स्पष्ट रूप से सच है और यकीनन, तब भी नहीं है क्योंकि ग्राहक उस डेटा के लिए अनुरोध कर सकता है जिसकी उसे जरूरत है।
डेडएमजी

3
@DeadMG यह कहना चाहिए कि "जब आप सर्वर द्वारा लौटे HTML का उपयोग करके वेब पेज के एक हिस्से का निर्माण कर रहे हैं" (जैसा कि JSON सर्वर द्वारा उपयोग किए जाने का विरोध किया गया है)
Immibis

वास्तव में, लेकिन जब से इस मामले के लिए बहुत कम प्रेरणा है, मैं इस बिंदु को नहीं देखता हूं।
डेडएमजी

6
@DeadMG कभी क्या मामला हो सकता है के लिए छोटी प्रेरणा? HTML को वापस करने के लिए सर्वर के लिए? यह वास्तव में इस पूरे एसई सवाल के बारे में क्या है।
इबिसिस

सवाल यह है कि आपको HTML वापस करना चाहिए या नहीं। यह स्पष्ट है कि प्रारंभिक प्रतिक्रिया HTML होनी चाहिए, लेकिन कोई स्पष्ट कारण नहीं है कि कोई अन्य एपीआई HTML क्यों लौटाए।
DeadMG

22

मुख्य समस्या यह है कि यह क्लाइंट को सर्वर को कसकर जोड़ देता है, जिसे HTML संरचना को जानना चाहिए। यह नए तरीकों या नए अनुप्रयोगों में फिर से उपयोग करने के लिए एंडपॉइंट को और अधिक कठिन बनाता है।

सादा डेटा लौटाते हुए और क्लाइंट को इसे रेंडर करने से कपलिंग कम हो जाती है और लचीलापन और परीक्षण क्षमता बढ़ जाती है- आप ग्राहक को नकली डेटा के लिए यूनिट टेस्ट चला सकते हैं, और वांछित डेटा का परीक्षण करने के लिए सर्वर पर यूनिट टेस्ट चला सकते हैं।


11
HTML को यथोचित सामान्य बनाया जा सकता है। उदाहरण के लिए, आप एक बुलेटेड सूची वापस कर सकते हैं, और इसे एक div में भर सकते हैं, जहाँ यह प्रचलित CSS द्वारा स्टाइल के अधीन होगा।
रॉबर्ट हार्वे

10
यह सब उपयोगी नहीं है अगर मुझे इस समय इसे एक स्पैन में सामान करने की आवश्यकता है। या इसे किसी अन्य एप्लिकेशन में रेंडर करें जो HTML में प्रदान नहीं किया गया है।
डेडएमजी

2
मैं हमेशा के लिए HTML की रचना करूंगा , और उस HTML का रूप हमेशा सभी उपयोगों में पूरी तरह से सुसंगत होना चाहिए, जो कि बहुत उपयोगी गारंटी नहीं है। उदाहरण के लिए, हमारे ऐप में हमारे पास सूचियां हैं, लेकिन हमने वास्तव में उपयोग नहीं किया है ulऔर liइसके बजाय प्रत्येक को एक बनाने के लिए बदल दिया है div(याद नहीं क्यों)। मुश्किल हो गया होता यदि सर्वर के साथ HTML का एक समूह लौटे ulऔर liउस में रों।
डेडएमजी

2
लगता है कि पहली जगह में गारंटी प्राप्त करने के लिए जब आप सिर्फ डेटा वापस कर सकते हैं और क्लाइंट को HTML को फिट होने के रूप में प्रस्तुत करने दें (यदि वह इसे बिल्कुल भी प्रस्तुत करने जा रहा है)
DeadMG

1
केवल परिदृश्य मैं देख सकता हूं कि HTML वापस करना कहां बेहतर होगा यदि क्लाइंट के पास खुद को रेंडर करने के लिए पर्याप्त संसाधन नहीं हैं।
डेडएमजी

14

मुझे लगता है कि आपके पास यह थोड़ा पीछे की तरफ है। तुम कहो:

हमारे पास कोई परीक्षण नहीं है, इसलिए हमारे पास इस JSON समापन बिंदु को बनाने के लिए कोई विशेष कारण नहीं है

एक उचित समापन बिंदु का उपयोग करने का एक कारण यह होगा कि आप इसका परीक्षण कर सकें । मैं कहूंगा कि कुछ भी परीक्षण शुरू नहीं करना एक बहुत अच्छा कारण है। यही है, अगर कोई तर्क है जो परीक्षण करने के लिए उपयुक्त होगा।

कोड की 200k लाइनें रिफ्लेक्टर के लिए बहुत कुछ हैं और शायद बनाए रखने के लिए कठिन हैं। कुछ समापन बिंदुओं को तोड़ना और उनका परीक्षण करना एक अच्छी जगह हो सकती है।

एक अन्य कारण सर्वर को क्लाइंट से अलग करना हो सकता है। यदि, दूर के भविष्य में, एप्लिकेशन डिज़ाइन या लेआउट बदलता है, तो HTML आउटपुट की तुलना में उचित डेटा प्रारूप के साथ काम करना आसान होता है। एक आदर्श दुनिया में, आपको केवल क्लाइंट को बदलना होगा और सर्वर को बिल्कुल भी नहीं छूना होगा।


लेआउट परिवर्तन के बारे में बिंदु अंतर्निहित डेटा से टेम्पलेट को अलग करने की आवश्यकता की तरह लगता है , लेकिन ऐसा कोई कारण नहीं है कि उन टेम्पलेट्स को क्लाइंट पर होना चाहिए। वास्तव में, उनके होने के बहुत से कारण हैं, उदाहरण के लिए, यदि आप क्लाइंट पर अपना प्रतिपादन करते हैं, तो आप क्लाइंट से डेटा छिपाने का निर्णय नहीं ले सकते। यदि पूर्ण HTML पृष्ठों के रूप में समान टेंपलेटिंग सिस्टम द्वारा आउटपुट किए जाते हैं तो HTML भाग को फिर से ठीक किया जा सकता है।
IMSoP

6

वेब पेज बनाने के लिए 3 तरीके (कम से कम) हैं:

  • संपूर्ण पेज सर्वर साइड जनरेट करें।
  • सर्वर प्लस कोड (जावास्क्रिप्ट) से एक नंगे हड्डियों के पृष्ठ पर लौटें, और पृष्ठ को अपना डेटा प्राप्त करें और HTML क्लाइंट पक्ष में प्रस्तुत करें।
  • एक आंशिक पृष्ठ प्लस कोड लौटाएं, और HTML के पहले से रेंडर किए गए कोड को लाएं, जिससे वह पृष्ठ में गिर सके।

पहले वाला ठीक है। दूसरा भी ठीक है। यह आखिरी समस्या है।

कारण सरल है: आपने अब HTML पेज के निर्माण को पूरी तरह से डिस्कनेक्ट किए गए भागों में विभाजित किया है। समस्या रखरखाव में से एक है। अब आपके पास UI के विवरण के प्रबंधन के लिए दो अलग-अलग इकाइयाँ हैं। तो आपको सीएसएस और अन्य समान विवरणों को दो अलग-अलग टुकड़ों के बीच सिंक में रखना होगा। आपने साइड बार की चौड़ाई बदल दी है? महान। अब एचटीएमएल टुकड़ा जो वापस आता है, क्षैतिज स्क्रॉलिंग का कारण बनता है क्योंकि साइड बार चौड़ाई के बारे में इसकी धारणा अब धारण नहीं करती है। आपने उस ब्लॉक के लिए पृष्ठभूमि का रंग बदल दिया है? महान, अब आपका HTML टुकड़ा का फ़ॉन्ट रंग टकराता है क्योंकि यह एक अलग पृष्ठभूमि का रंग मान लेता है और कोई उस समापन बिंदु का परीक्षण करना भूल जाता है।

मुद्दा यह है कि आपने अब ज्ञान को विभाजित किया है जिसे एक ही स्थान (अर्थात प्रस्तुति तर्क) में केंद्रीकृत किया जाना चाहिए, और इससे यह सुनिश्चित करना अधिक कठिन हो जाता है कि सभी टुकड़े एक साथ सही ढंग से फिट हों। JSON API का उपयोग करके, आप इसके बजाय उस सभी तर्क को केवल सामने के छोर पर रख सकते हैं, या यदि आप अपने डेटा को HTML में शुरू करने के लिए प्रस्तुत करते हैं, तो आप इसे अपने सर्वर साइड टेम्प्लेट में रख सकते हैं। यह एक ही स्थान पर प्रस्तुति ज्ञान / तर्क रखने के बारे में है, इसलिए इसे लगातार और एक प्रक्रिया के हिस्से के रूप में प्रबंधित किया जा सकता है। HTML / CSS / JS को बहुत छोटे टुकड़ों में तोड़कर बिना सीधा रखना काफी मुश्किल है।

JSON API को प्रस्तुति लॉजिक से पूरी तरह से स्वतंत्र रूप से डेटा उपलब्ध कराने का अतिरिक्त लाभ है। यह एक ही डेटा का उपभोग करने के लिए कई, अलग-अलग प्रस्तुतकर्ता, जैसे कि एक मोबाइल ऐप और एक वेब पेज दोनों की अनुमति देता है । विशेष रूप से, यह एक ब्राउज़र के बिना डेटा का उपभोग करने में सक्षम बनाता है (जैसे कि मोबाइल ऐप या रात्रिकालीन क्रोन जॉब्स); ये उपभोक्ता HTML को पार्स करने में भी सक्षम नहीं हो सकते हैं। (यह निश्चित रूप से एक ऐसी स्थिति होने पर निर्भर करता है जहां विभिन्न उपभोक्ताओं के बीच डेटा समान होता है, या एक दूसरे के उपसमूह का उपयोग कर सकता है।) क्या आपको इस क्षमता की आवश्यकता है यह आपके विशेष एप्लिकेशन की आवश्यकताओं पर निर्भर करता है, हालांकि, अपनी प्रस्तुति का प्रबंधन करते समय। तर्क जरूरी है। मैं कहूंगा कि यदि आप इसे लागू करते हैं, हालांकि, आप भविष्य के विकास के लिए बेहतर तैयार होंगे।


2
मुझे वास्तव में लगता है कि डुप्लिकेट डिस्प्ले लॉजिक से परहेज करना HTML पेज के टुकड़े को रेंडर करने का एक अच्छा कारण हो सकता है : यदि आप सर्वर पर पेज के हिस्से (जैसे हेडर और बेसिक लेआउट) को रेंडर करते हैं, तो क्लाइंट पर JSON डेटा के आधार पर अन्य भागों को उत्पन्न करते हैं, आप टेम्पलेट्स के दो अलग-अलग सेट हैं। सर्वर पर रेंडरिंग पार्टिकल्स इस लॉजिक को आपकी सेंट्रल प्रेजेंटेशन लेयर पर वापस ले जाते हैं , जो किसी भी कंपोनेंट को रेंडर करने के लिए उसी टेम्प्लेट का इस्तेमाल कर सकता है, जैसे कि वह पूरे पेज को स्टैटिस्टिकली असेंबल कर रहा हो।
IMSoP

1
आप केवल एक व्यक्ति हैं जो मोबाइल का उल्लेख करते हैं, मैं आपको इसके लिए एक हजार अपवोट्स देना चाहता हूं
लोविस

1
@IMSoP यदि आपको एक गतिशील पृष्ठ की आवश्यकता है , तो आपके पास फ्रंट एंड लॉजिक होना चाहिए। यदि आप अभी भी टुकड़े सर्वर साइड को रेंडर करते हैं, तो अब आपको यह सुनिश्चित करना होगा कि सामने वाले छोर की धारणाएं सर्वर के पूर्व की स्थिति से मेल खाती हों। आप उस निर्भरता को तोड़ नहीं सकते। यदि सिंक पूरी तरह से विभाजित सिस्टम में विभाजित है, तो उस ज्ञान को सिंक में रखना कठिन है। यदि आप बस सामने के छोर पर प्रस्तुत करते हैं, तो उन मान्यताओं को केंद्रीकृत किया जाता है। मुझे लगता है कि मैं सर्वर साइड टेम्पलेट में प्रारंभिक स्थिति के साथ एक गतिशील फ्रंट एंड को मिलाने से भी बचूंगा; सामने अंत शुरू करने के लिए एक "बूटस्ट्रैप" सरल है।
jpmc26

4

मैं कहूंगा कि HTML टुकड़ा वापस करने वाले सर्वर के साथ कुछ भी गलत नहीं है और UI इसे कुछ तत्व के .innerHTML को असाइन करता है। यह, मेरी राय में, अतुल्यकालिक जावास्क्रिप्ट कोड विकसित करने का सबसे आसान तरीका है। लाभ यह है कि जावास्क्रिप्ट का उपयोग करके जितना संभव हो उतना कम किया जाता है और जितना संभव हो सके एक नियंत्रित बैक-एंड वातावरण में किया जाता है। याद रखें कि ब्राउज़रों में जावास्क्रिप्ट का समर्थन अलग-अलग होता है, लेकिन आपके बैक-एंड में हमेशा बैक-एंड घटकों का एक ही संस्करण होता है, जिसका अर्थ है कि बैक-एंड में जितना संभव हो उतना कम संस्करण का अर्थ असंगतताओं से होगा।

अब, कभी-कभी आप केवल एक HTML टुकड़े से अधिक चाहते हैं। उदाहरण के लिए, एक स्थिति कोड और एक HTML टुकड़ा। तब आप एक JSON ऑब्जेक्ट का उपयोग कर सकते हैं जिसमें दो सदस्य हैं, स्टेटसकोड और HTML जिनमें से दूसरा स्टेटसकोड की जाँच के बाद किसी तत्व के .innerHTML को सौंपा जा सकता है। इसलिए, JSON का उपयोग करना और आंतरिक HTML का उपयोग करना किसी भी तरह से वैकल्पिक अनन्य दृष्टिकोण नहीं हैं; वे एक साथ इस्तेमाल किया जा सकता है।

JSON का उपयोग करके आप एक ही प्रतिक्रिया में कई HTML टुकड़े भी कर सकते हैं जो कई तत्वों के .innerHTML को सौंपा जाता है।

सारांश में: do .innerHTML का उपयोग करें। यह आपके कोड को अधिक से अधिक ब्राउज़र संस्करणों के साथ संगत बनाता है। यदि अधिक आवश्यकता हो तो JSON और .innerHTML का एक साथ उपयोग करें। XML से बचें।


4

सिद्धांत में कुछ भी गलत नहीं है । सवाल यह है: आप क्या हासिल करना चाहते हैं?

JSON डेटा संचारित करने के लिए एकदम सही है। यदि आप इसके बजाय HTML भेजते हैं और ग्राहक से HTML से डेटा निकालने की अपेक्षा करते हैं, तो वह बकवास है।

दूसरी तरफ, यदि आप एचएमटीएल को प्रसारित करना चाहते हैं जो HTML के रूप में प्रस्तुत होने जा रहा है, तो इसे HTML के रूप में भेजें - HTML को स्ट्रिंग में पैक करने के बजाय, स्ट्रिंग को JSON में बदलना, JSON को प्रेषित करना, इसे दूसरी तरफ डिकोड करना। स्ट्रिंग प्राप्त करना, और स्ट्रिंग से HTML निकालना।

और कल ही मैं कोड में भाग गया जिसने दो वस्तुओं को एक सरणी में रखा, सरणी को JSON में बदल दिया, JSON को एक स्ट्रिंग में डाल दिया, स्ट्रिंग को एक सरणी के अंदर रखा, पूरे सरणी को JSON में बदल दिया, इसे क्लाइंट को भेज दिया, जो डीकोड हो गया JSON को एक स्ट्रिंग मिली, जिसमें स्ट्रिंग थी, स्ट्रिंग ली, स्ट्रिंग से JSON निकाला, JSON को डीकोड किया, और दो आइटमों के साथ एक सरणी प्राप्त की। ऐसा मत करो।


+1 बिल्कुल। पहला सवाल है, आपको क्या प्राप्त करने की आवश्यकता है? HTML के एक बिट, या शायद एक पाद लेख, या इसी तरह के तत्वों के रूप में एक समापन बिंदु साइडबार विज्ञापनों के साथ थोड़ा गलत होगा।
एसक्यूबी

3

यह सब एपीआई के उद्देश्य पर निर्भर करता है, लेकिन आम तौर पर आप जो वर्णन करते हैं वह चिंताओं के अलगाव का एक बहुत मजबूत उल्लंघन है :

एक आधुनिक एप्लिकेशन में, एपीआई कोड डेटा के लिए जिम्मेदार होना चाहिए, और क्लाइंट कोड प्रस्तुति के लिए जिम्मेदार होना चाहिए।

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

यदि आपका एपीआई JSON, या शुद्ध डेटा का कोई अन्य रूप लौटाता है, तो यह अधिक उपयोगी हो जाता है। मौजूदा ऐप अभी भी उस डेटा का उपभोग कर सकता है, और इसे उचित रूप से प्रस्तुत कर सकता है। अब, हालांकि, अन्य चीजें समान डेटा तक पहुंचने के लिए एपीआई का उपयोग कर सकती हैं। फिर से, रखरखाव भी आसान है - सभी HTML एक ही स्थान पर रहते हैं, इसलिए यदि आप पूरी साइट को फिर से स्टाइल करना चाहते हैं, तो आपको अपना एपीआई बदलने की कोई आवश्यकता नहीं है।


5
"एक आधुनिक एप्लिकेशन में, डेटा के लिए एपीआई कोड जिम्मेदार होना चाहिए और प्रस्तुति के लिए क्लाइंट कोड जिम्मेदार होना चाहिए।" हमेशा ऐसा क्यों होना चाहिए? मैं मानता हूं कि यह एक सामान्य पैटर्न है और यह कुछ चीजों को आसान बनाता है, लेकिन मुझे इसे "चाहिए" के स्तर तक ऊंचा करने का कोई कारण नहीं दिखता है ... यह एक ऐसा निर्णय है जिसे मामले के आधार पर लिया जाना चाहिए। और निश्चित रूप से ऐसे कारण हैं कि कुछ स्थितियों में आप एक अलग निर्णय लेना चाहते हैं।
जूल्स

@ जूल्स क्योंकि अगर आपके पास एपीआई और क्लाइंट है, तो रेंडरिंग के प्रभारी दोनों के पास चिंताओं के अलगाव का उल्लंघन है। (अब, आपके पास आवश्यक रूप से एक एपीआई और एक ग्राहक नहीं है। आपके पास केवल एक घटक हो सकता है, और क्या यह पूरी प्रस्तुति कर सकता है। लेकिन तब आपके पास एपीआई नहीं है)
njzk2

@ njzk2 सिर्फ इसलिए कि एक API HTML डेटा डिलीट करता है, इसका मतलब यह नहीं है कि उसने इसे प्रदान किया है। उदाहरण के लिए, यह HTML को एक ब्लॉब के रूप में मान सकता है और इसे डेटाबेस में संग्रहीत कर सकता है। साथ ही, क्लाइंट के बजाय सर्वर पर कुछ रेंडरिंग की आवश्यकता हो सकती है (जैसे खोज इंजन के लिए स्थैतिक पृष्ठ प्रदान करना) ताकि पुन: उपयोग करने की क्षमता को दोहराव के उन्मूलन के रूप में देखा जा सके।
जूल्स

1
इसके अलावा, क्लाइंट और एपीपी जोड़ी का निर्माण करना पूरी तरह से संभव है, जहां सर्वर पर सभी रेंडरिंग होती है और क्लाइंट केवल HTML को डोम में निर्धारित पूर्वनिर्धारित स्लॉट में डिलीवर करता है। Jquery में इस तरह के क्लाइंट को समर्पित एक पूरा मॉड्यूल है, जो मुझे सुझाव देता है कि उन्हें यथोचित रूप से सामान्य होना चाहिए।
जूल्स

1
@ जूल्स बहुत सारी चीजें सामान्य रूप से सामान्य हैं, यही कारण है कि वे उचित नहीं हैं।
njzk2

2

HTML एक विशिष्ट डिज़ाइन और उपयोग से जुड़ा हुआ है।

HTML के साथ, यदि आप पृष्ठ लेआउट को बदलना चाहते हैं, तो आपको यह बदलने की आवश्यकता है कि सर्वर कॉल से html कैसे उत्पन्न होता है। आमतौर पर, जिसे बैक-एंड प्रोग्रामर की आवश्यकता होती है। अब आपके पास बैक-एंड प्रोग्रामर हैं, जो परिभाषा के अनुसार आपके सर्वश्रेष्ठ HTML लेखक नहीं हैं, इन अद्यतनों को संभालते हुए।

JSON के साथ, यदि पेज लेआउट बदलता है, तो मौजूदा JSON सर्वर कॉल के लिए जरूरी नहीं है कि वह बिल्कुल बदल जाए। इसके बजाय, आपका फ्रंट-एंड डेवलपर या यहां तक ​​कि डिज़ाइनर, उसी मूल डेटा से इच्छित भिन्न HTML का उत्पादन करने के लिए टेम्पलेट को अपडेट करता है।

इसके अतिरिक्त, JSON अन्य सेवाओं के लिए आधार बन सकता है। आपकी अलग-अलग भूमिकाएँ हो सकती हैं, जिन्हें एक ही मूल डेटा को अलग-अलग तरीकों से देखने की आवश्यकता है। उदाहरण के लिए, आपके पास एक ग्राहक वेब साइट हो सकती है जो किसी ऑर्डर पृष्ठ में किसी उत्पाद के बारे में डेटा दिखाती है, और प्रतिनिधि के लिए एक इनसाइड सेल्स पेज, जो एक ही डेटा को बहुत अलग लेआउट में दिखाता है, शायद कुछ अन्य जानकारी के साथ जो सामान्य ग्राहकों के लिए उपलब्ध नहीं है। JSON के साथ, दोनों दृश्यों में एक ही सर्वर कॉल का उपयोग किया जा सकता है।

अंत में, JSON बेहतर पैमाने पर कर सकता है। हाल के वर्षों में हम क्लाइंट-साइड जावास्क्रिप्ट फ्रेमवर्क के साथ एक तरह से खत्म हो गए हैं। मुझे लगता है कि यह वास्तव में एक कदम वापस लेने का समय है और हम इस बारे में सोचना शुरू करते हैं कि हम किस जावास्क्रिप्ट का उपयोग कर रहे हैं, और यह ब्राउज़र के प्रदर्शन को कैसे प्रभावित करता है ... खासकर मोबाइल उपकरणों पर। कहा कि, यदि आप एक सर्वर फ़ार्म या क्लस्टर की आवश्यकता के लिए एक बड़ी साइट चला रहे हैं, तो एकल सर्वर के बजाय, JSON बेहतर पैमाने पर हो सकता है। उपयोगकर्ता आपको अपने ब्राउज़र में मुफ्त में प्रसंस्करण का समय देंगे, और यदि आप इसका लाभ उठाते हैं तो आप बड़ी तैनाती में सर्वर लोड को कम कर सकते हैं। JSON भी कम बैंडविड्थ का उपयोग करता है, इसलिए फिर से, यदि आप काफी बड़े हैंऔर इसे उचित रूप से उपयोग करें, JSON औसत रूप से सस्ता है। बेशक, यह और भी बदतर हो सकता है, यदि आप 40KB पुस्तकालयों को 2KB को 7KB के डेटा में पार्स करने के लिए फीडिंग को समाप्त करते हैं, तो फिर से: यह इस बात का ध्यान रखता है कि आप क्या कर रहे हैं। लेकिन JSON के प्रदर्शन और लागत में सुधार करने के लिए क्षमता मौजूद है।


1

इस तरह के समापन बिंदु के साथ कुछ भी गलत नहीं है अगर यह अपनी आवश्यकताओं को पूरा करता है। यदि html से बाहर थूकना आवश्यक है कि एक ज्ञात उपभोक्ता प्रभावी रूप से पार्स कर सकता है, तो सुनिश्चित करें कि क्यों नहीं?

समस्या यह है कि, सामान्य मामले के लिए, आप चाहते हैं कि आपका एंडपॉइंट एक पेलोड को थूक दें जो एक मानक पार्सर द्वारा अच्छी तरह से गठित और प्रभावी रूप से पार्स-सक्षम है। और प्रभावी रूप से पार्स-सक्षम द्वारा, मेरा मतलब है, पार्स-सक्षम रूप से घोषित।

यदि आपका ग्राहक पेलोड को पढ़ने के लिए मजबूर है और लूप और स्टेटमेंट से खुली जानकारी बिट्स को चुभता है, तो यह प्रभावी रूप से पार्स-सक्षम नहीं है। और HTML, जिस तरह से, यह खुद को अच्छी तरह से बनने की आवश्यकता नहीं है में बहुत क्षमा की जाती है।

अब, यदि आप यह सुनिश्चित करते हैं कि आपका html xml-compliant है, तो आप स्वर्ण हैं।

उस ने कहा, मुझे इसके साथ एक महत्वपूर्ण समस्या है:

मैं आपको यह बताने जा रहा हूं: एक एंडपॉइंट जो HTML लौटाता है वह जावास्क्रिप्ट लाइब्रेरियों पर आपकी निर्भरता को कम करता है और उपयोगकर्ता ब्राउज़र पर लोड को कम करता है क्योंकि इसे DOM ऑब्जेक्ट बनाने के लिए JS कोड की व्याख्या / निष्पादित करने की आवश्यकता नहीं होगी - HTML पहले से ही है, यह केवल तत्वों को पार्स करने और उन्हें प्रस्तुत करने की बात है। बेशक, इसका मतलब है कि हम उचित मात्रा में डेटा के बारे में बात कर रहे हैं। 10 मेगाबाइट HTML डेटा उचित नहीं है।

यह एक बुरा विचार है कि आप इसे कैसे काटते हैं। सामूहिक औद्योगिक अनुभव के दशकों ने हमें दिखाया है कि, सामान्य रूप से, डेटा (या मॉडल) को इसके प्रदर्शन (या दृश्य) से अलग करना एक अच्छा विचार है।

यहां आप जेएस कोड निष्पादन में तेजी लाने के उद्देश्य से दोनों को भ्रमित कर रहे हैं। और यह एक माइक्रो अनुकूलन है।

मैंने इसे बहुत अच्छी प्रणाली के अलावा कभी भी एक अच्छे विचार के रूप में नहीं देखा है।

मेरी सलाह? यह मत करो। HC SVNT DRACONES , YMMV, आदि।


0

JSON केवल संरचित डेटा की एक पाठ प्रस्तुति है। एक क्लाइंट को स्वाभाविक रूप से डेटा को प्रोसेस करने के लिए एक पार्सर की आवश्यकता होती है लेकिन वस्तुतः सभी भाषाओं में JSON पार्सर फ़ंक्शन होते हैं। यह HTML पार्सर का उपयोग करने की तुलना में JSON पार्सर का उपयोग करने के लिए बहुत अधिक कुशल है। इसमें बहुत कम पदचिह्न लगते हैं। HTML पार्सर के साथ ऐसा नहीं है।

PHP में, आप इसका उपयोग करते हैं json_encode($data)और इसे पार्स करने के लिए दूसरी तरफ क्लाइंट तक है। और जब आप एक वेब सेवा से JSON डेटा प्राप्त करते हैं, तो आप बस उपयोग करते हैं $data=json_decode($response)और आप यह तय कर सकते हैं कि आप वैरिएबल के साथ डेटा का उपयोग कैसे करें।

मान लीजिए कि आपने एक मोबाइल डिवाइस के लिए एक ऐप विकसित किया है, तो आपको HTML प्रारूप की आवश्यकता क्यों है जब मोबाइल ऐप शायद ही कभी डेटा को पार्स करने के लिए वेब ब्राउज़र का उपयोग करते हैं? कई मोबाइल एप्लिकेशन डेटा का आदान-प्रदान करने के लिए JSON (सबसे सामान्य प्रारूप) का उपयोग करते हैं।

यह देखते हुए कि मोबाइल अक्सर पैमाइश की योजना पर हैं, आप HTML का उपयोग क्यों करना चाहते हैं जो JSON की तुलना में बहुत अधिक बैंडविड्थ लेता है?

एचएमटीएल का उपयोग क्यों करें जब HTML अपनी शब्दावली में सीमित है और JSON डेटा को परिभाषित कर सकता है? {"person_name":"Jeff Doe"}HTML से अधिक जानकारीपूर्ण है अपने डेटा के बारे में प्रदान कर सकता है क्योंकि यह केवल HTML पार्सर के लिए संरचना को परिभाषित करता है, डेटा को परिभाषित नहीं करता है।

JSON का HTTP से कोई लेना देना नहीं है। आप JSON को किसी फ़ाइल में रख सकते हैं। आप इसे कॉन्फ़िगरेशन के लिए उपयोग कर सकते हैं। संगीतकार JSON का उपयोग करता है। आप इसे साधारण चर को फाइलों में सहेजने के लिए भी उपयोग कर सकते हैं।


0

एक सही या गलत को वर्गीकृत करना मुश्किल है। IMO, मेरे द्वारा पूछे जाने वाले प्रश्न हैं: " इसे करना चाहिए ", या " क्या यह कम के साथ कर सकता है? "।

प्रत्येक समापन बिंदु को यथासंभव कम सामग्री के साथ संवाद करने का प्रयास करना चाहिए। सिग्नल-टू-शोर अनुपात आमतौर पर HTTP कोड <JSON <XHTML है। अधिकांश स्थितियों में, कम से कम शोर प्रोटोकॉल चुना जाना अच्छा है।

मैं @machado द्वारा क्लाइंट ब्राउज़र लोड के बारे में बिंदु पर भिन्न हूं, जैसा कि आधुनिक ब्राउज़रों के साथ यह एक गैर-मुद्दा है। उनमें से ज्यादातर HTTP कोड और JSON प्रतिक्रियाओं से बहुत अच्छी तरह से सुसज्जित हैं। और यद्यपि आपके पास इस समय परीक्षण नहीं हैं, लेकिन कम शोर प्रोटोकॉल का दीर्घकालिक रखरखाव इसके ऊपर वाले से सस्ता होगा।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.