एक वेब साइट

Question

मैं हाल ही में कैसे History.js, jQuery और ScrollTo का उपयोग कर एचटीएमएल 5 इतिहास एपीआई के साथ एक वेबसाइट Ajaxify करने पर इस सार पाया ajaxify करने के लिए कैसे समझने में सहायता चाहिए इस काम का सरल संस्करण और मुझे यकीन नहीं है कि मैं सबकुछ समझता हूं। सबसे पहले, मैं सभी सार में प्रदान की स्क्रिप्ट लोड है, तो एक बहुत आसान एनएवी और सामग्री अनुभाग की स्थापना:

<ul id="nav"> 
    <li id="home-link"><a href="/" title="Home">Home</a>/</li> 
    <li id="work-link"><a href="/work" title="Work">Work</a>/</li> 
    <li id="labs-link"><a href="/labs" title="Labs">Labs</a>/</li> 
    <li id="blog-link"><a href="/blog" title="Blog">Blog</a>/</li> 
    <li id="contact-link"><a href="/contact" title="Contact">Contact</a></li> 
</ul> 

<div id="content"></div> 

इसके बाद, मैं एचटीएमएल मैच के लिए चयनकर्ता चर बदल दिया है:

/* Application Specific Variables */ 
contentSelector = '#content', 
$content = $(contentSelector), 
contentNode = $content.get(0), 
$menu = $('#nav'), 
activeClass = 'active', 
activeSelector = '.active', 
menuChildrenSelector = 'li', 

क्या मुझे अगली बार ऐसा करना है जहां मैं खो गया हूं। मैं बस इतना करना चाहता हूं कि चयनित एनवी लिंक के लिए विशिष्ट एचटीएमएल सामग्री में लोड हो। इसलिए यदि मैंने "वर्क" पर क्लिक किया है, तो मैं सामग्री अनुभाग में वर्क.html फ़ाइल लोड करना चाहता हूं और यूआरएल को "mywebsite.com/work" में बदलना चाहता हूं। चीजों को आसान रखने के लिए वर्क.html कहें और अन्य सभी अजेय सामग्री एक ही निर्देशिका में स्थित है।

किसी भी मदद की बहुत सराहना की जाती है! चीयर्स!

Answer 1

तो यहां एक वास्तविक बेयर हड्डियों का उदाहरण है कि मैं जिस वेबसाइट पर काम कर रहा था, उस पर मैं इस सवाल को प्रेरित करता हूं। वास्तव में लंबे विलंब के लिए खेद है। सबसे पहले HTML:

<ul id="nav"> 
     <li id="home-link"><a href="home" class="ajaxify" title="Home">Home</a></li> 
     <li id="work-link"><a href="work" class="ajaxify" title="Work">Work</a></li> 
     <li id="labs-link"><a href="labs" class="ajaxify" title="Labs">Labs</a></li> 
     <li id="blog-link"><a href="blog" class="ajaxify" title="Blog">Blog</a></li> 
    </ul> 

    <div id="content">Home Content</div> 

अगला जावास्क्रिप्ट:

<script type="text/javascript"> 

    var directory = 'content/'; //directory of the content we want to ajax in 
    var state = History.getState(); 

    //for when they click on an ajax link 
    $('.ajaxify').on('click', function(e){ 
     var $this = $(this); 
     var href = $this.attr('href'); // use the href value to determine what content to ajax in 
     $.ajax({ 
      url: directory + href + '.html', // create the necessary path for our ajax request 
      dataType: 'html', 
      success: function(data) { 
       $('#content').html(data); // place our ajaxed content into our content area 
       History.pushState(null,href, href + '.html'); // change the url and add our ajax request to our history 
      } 
     }); 
     e.preventDefault(); // we don't want the anchor tag to perform its native function 
    }); 

    //for when they hit the back button 
    $(window).on('statechange', function(){ 
     state = History.getState(); // find out what we previously ajaxed in 
     $.ajax({ 
      url: directory + state.title + '.html', //create our path 
      dataType: 'html', 
      success: function(data) { 
       $('#content').html(data); 
      } 
     }); 
    }); 
    </script> 

मूलतः सभी मैं कर रहा हूँ एंकर टैग में अवरोध डालने के वर्ग के साथ क्लिक करता है 'ajaxify' संकेत करने के लिए क्या विशिष्ट सामग्री मैं में लोड करना चाहते हैं प्रयोग किया जाता है। एक बार जब मैं क्लिक को रोकता हूं और निर्धारित करता हूं कि कौन सी सामग्री लोड होनी है, तो मैं Outlook.js pushSate() का उपयोग यह ट्रैक रखने के लिए करता हूं कि उपयोगकर्ता साइट के माध्यम से किस क्रम में जा रहा है और पेज को पुनः लोड किए बिना यूआरएल बदल सकता है। यदि वे बैक बटन हिट करने का निर्णय लेते हैं, तो राज्य परिवर्तक श्रोता सही सामग्री में लोड होगा। यदि वे रीफ्रेश बटन हिट करने का निर्णय लेते हैं, तो आपको अलग-अलग यूआरएल नामों के साथ अपने इंडेक्स पेज को डुप्लिकेट करने की विधि के साथ आने की आवश्यकता होगी। यह php में करना आसान है या आप आवश्यकतानुसार इंडेक्स पेज की प्रतिलिपि बना सकते हैं, पेस्ट कर सकते हैं और उसका नाम बदल सकते हैं।

यहाँ एक उदाहरण मैं Github पर तैनात है: https://github.com/eivers88/ajaxify-simple-demo

बस एक चेतावनी है, जब स्थानीय स्तर पर ajax साथ काम करना, यह MAMP या WAMP की तरह एक व्यक्तिगत वेब सर्वर पर अपनी परियोजनाओं को चलाने के लिए सबसे अच्छा है। सर्वर के बिना क्रोम में यह डेमो विफल हो जाएगा। हालांकि, इसे सर्वर के बिना फ़ायरफ़ॉक्स में काम करना चाहिए।

Answer 2

ऐसी आवश्यकताओं को करने के लिए आपको कई चीजें करने की आवश्यकता होगी।

function doAjax(htmlpage){ 
$.ajax({ 
    url:"/"+htmlpage, 
    type: 'GET', 
    success: function(data){ 
     $('#content').html(data) 
    } 
}); 
} 

इस बाहर हुक करने की तरह बनना ऊपर अपने टैग समायोजित करने के लिए किया जाएगा सबसे आसान तरीका: हालांकि यह होगा थोड़ा और अधिक "सही"

<a href="#" onclick="doAjax('work.html');return false;"><img></a> 

यहाँ एक समारोह का उपयोग कर सकते है (हालांकि कार्यात्मक रूप में एक ही) इस jQuery के साथ एक स्क्रिप्ट टैग में शीर्ष पर ऐसा करने के लिए:

$(function() { 
    $('#buttonid1').click(function(){doAjax('work.html')}); 
    $('#buttonid2').click(function(){doAjax('about.html')}); 
    $('#buttonid3').click(function(){doAjax('contact.html')}); 
}); 

दोनों ही मामलों में ध्यान दें, इन "work.html" पृष्ठों पूर्ण HTML दस्तावेज़ नहीं होना चाहिए, वे तो बस होना चाहिए मैं क्या जाता हूँ एन आपकी सामग्री div।

यह AJAX आपके विज़िटर को देखे जाने वाले यूआरएल को बदलने के लिए कुछ भी नहीं करेगा। इसे काम करने के लिए, आपको html5 history api का उपयोग करना होगा। यह ऊपर दिए गए AJAX अनुरोध से काफी जटिल है। इसलिए यदि आपके ऊपर ऊपर जो लिखा गया है, उसकी पूर्ण निपुणता नहीं है, तो यह उचित हो सकता है या नहीं भी हो सकता है।