यूआरएल में अजाक्स अनुरोध कैसे दिखाएं?

Question

क्या मैं चाहता हूँ लिंक जो पेज का एक हिस्सा बदल है, और इसके लिए एक गतिशील यूआरएल, जहां मैं इस तरह के चर #calendar=10_2010tabview=tab2

Check this for an exact example:CLICK HERE FOR EXACT DEMO

की तरह तो यहाँ है निर्दिष्ट कर सकते हैं लिंक प्रारूप मैं क्या जरूरत है:

#calendar=10_2010&tabview=tab2

मुझे calendar और tabview जैसे लिंक में चर होने की आवश्यकता है, इसलिए मैं बिना किसी रीयलोडिंग के एक पृष्ठ पर कई चीजें बदल सकता हूं।

---

या किसी अन्य स्वरूप पर http://www.wbhomes.com.au की तरह इस तरह के, इस बिल्कुल है मैं क्या चाहते हैं, लेकिन पहले प्रारूप भी अच्छा है, लेकिन यह बहुत अधिक सुंदर है।

• http://wbhomes.com.au/#/propertiesforsale/houseandland/quinnsbeach-waterland1

---

आवश्यकताओं

• आवश्यकताओं कहीं भी से उदाहरण से एक मेल एक्सेस किए जाने की, या अगर मैं सिर्फ url बार में लिखने ।

• लिंक इतिहास में होना चाहिए, इसलिए अगर मैं बैक या फॉरवर्ड बटन दबाता हूं तो पृष्ठ को एक्सेस करने की आवश्यकता होती है।

• पेज रीफ्रेश भी काम करने की ज़रूरत है।

---

कुछ recources:

उदाहरण:

• www.developer.yahoo.com/

• www.facebook.com - पर साइडबार लिंक अपने प्रोफाइल पेज

• www.wbhomes.com.au/ - 100% मैं क्या

• www.flickr.com/

• www.youtube.com

कुछ ट्यूटोरियल चाहते हैं उसके पास:

• www.ajaxpatterns.org/

• www.contentwithstyle.co.uk/

---

कृपया मेरी मदद करो! मुझे ऐसा करने का कोई समाधान कभी नहीं मिला है, लेकिन मैं jquery या किसी एपीआई, या किसी भी पुस्तकालय का उपयोग नहीं करना चाहता, मैं Javascript/AJAX और PHP स्क्रिप्ट काम करना चाहता हूं।

Answer 1

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

हालांकि, जब फेसबुक, WBHomes और Balupton.com जैसी साइटों जैसे मिश्रण में AJAX कार्यक्षमता जोड़ने की बात आती है तो आपको गंभीर रूप से कठिन समस्याओं की पूरी श्रृंखला का सामना करना पड़ेगा! (मुझे पता है क्योंकि मैं पिछले दो साइटों के लिए मुख्य वास्तुकार था!)। इन समस्याओं में से कुछ हैं:

• शान से और आसानी से इतिहास और AJAX कार्यक्षमता का उपयोग करने, और पता लगाने जब हैश बदल गया है कुछ आंतरिक लिंक को कैसे अपग्रेड करें?जबकि अन्य लिंक पहले की तरह काम करते रहते हैं।
• "www.yoursite.com/myapp/a/b/c" से "www.yoursite.com/myapp/#/a/b/c" पर रीडायरेक्ट कैसे करें? और अभी भी उपयोगकर्ता के लिए अनुभव को चिकनी रखें ताकि 3 आवश्यक रीडायरेक्ट जितना संभव हो उतना चिकनी हो।
• AJAX का उपयोग करके फॉर्म मान और डेटा कैसे सबमिट करें और हैश अपडेट करें? और इसके विपरीत अगर वे जावास्क्रिप्ट का समर्थन नहीं करते हैं।
• यह पता लगाने के लिए कि पृष्ठ का कौन सा विशेष क्षेत्र AJAX अनुरोध चाहता है? इस तरह के उपपृष्ठ सही पृष्ठ के साथ प्रदर्शित होते हैं।
• AJAX स्थिति में परिवर्तन होने पर पृष्ठ शीर्षक को कैसे बदला जाए? और अन्य गैर-पेज सामग्री।
• AJAX स्थिति लोड और परिवर्तन करते समय अच्छा परिचय/आउट्रो प्रभाव कैसे करें? जैसे कि उपयोगकर्ता अंधेरे में नहीं छोड़ा जाता है।
• जब हम AJAX के माध्यम से लॉगिन करते हैं तो साइडबार लॉगिन जानकारी को कैसे अपडेट करें? जाहिर है, हम नहीं चाहते हैं कि लॉगिन बटन अब ऊपर रहने के लिए ऊपर बाईं ओर हो।
• अभी भी उन उपयोगकर्ताओं के लिए वेबसाइट का समर्थन कैसे करें जिनके पास जेएस सक्षम नहीं है? ऐसा लगता है कि यह खोज इंजन द्वारा अनुक्रमित रूप से घटता है और अभी भी अनुक्रमित है।

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

गुड लक, और आप कोई और प्रश्न हैं तो सिर्फ इस जवाब पर एक टिप्पणी पोस्ट और मैं :-)

अद्यतन यथाशीघ्र देने का प्रयास करेंगे: वहाँ अब एचटीएमएल 5 इतिहास एपीआई है (pushState, पॉपस्टेट) जो HTML4 hashchange कार्यक्षमता को बहिष्कृत करता है। History.js अब jQuery इतिहास के लिए सहायक है और एचटीएमएल 5 इतिहास एपीआई और optionalhashchange एचटीएमएल 4 ब्राउज़र के लिए फॉलबैक के लिए क्रॉस-ब्राउज़र संगतता प्रदान करता है। jQuery Ajaxy History.js के लिए उन्नत किया जाएगा

Answer 2

Szevasz .. :)

एचटीएमएल

<a href="/bye.php?user=abc&page=messages" 
    onclick="return goToWithAjax(this);">bye</a> 

जावास्क्रिप्ट

function goToWithAjax(hash) { 
    hash = hash.href ? hash.getAttribute("href", 2) : hash; 
    ajax(hash, function(response) { 
    document.getElementById("content").innerHTML = response; 
    }); 
    hash = ("#!/" + hash).replace("//","/"); 
    window.location.hash = hash; 
    return false; 
} 

////////////////////////////////////////////////////////////////////////////// 

function getXmlHttpObject() { 
    var xmlHttp; 
    try { 
     xmlHttp = new XMLHttpRequest(); 
    } catch (e) { 
     try { 
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (e) { 
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
    } 
    return xmlHttp; 
} 

function ajax(url, onSuccess, onError) { 
    var xmlHttp = getXmlHttpObject(); 
    xmlHttp.onreadystatechange = function() { 
     if (this.readyState == 4) { 
      // onError 
      if (this.status != 200) { 
       if (typeof onError == 'function') { 
        onError(this.responseText); 
       } 
      } 
      // onSuccess 
      else if (typeof onSuccess == 'function') { 
       onSuccess(this.responseText); 
      } 
     } 
    }; 
    xmlHttp.open("GET", url, true); 
    xmlHttp.send(null); 
    return xmlHttp; 
}​ 

Answer 3

मुझे लगता है कि आप ऐसा कर बहुत आसानी से एचटीएमएल 5 में onHashChange घटना वर्तमान का उपयोग कर या एक JavaScript लाइब्रेरी कि ब्राउज़रों नहीं है कि में emulates कि "हैश" व्यवहार का उपयोग कर सकते हैं पूर्ण एचटीएमएल 5 समर्थन। ऐसी एक पुस्तकालय MooTools onhashchange हो सकती है, लेकिन कई अन्य भी हैं।

से यदि आप एक एचटीएमएल 5 अवगत ब्राउज़र, या इस तरह के पुस्तकालय है कि व्यवहार emulates है बस का उपयोग करें:

window.sethash("#newsection");

जावास्क्रिप्ट से कुछ नया करने के लिए बदलने के लिए, और/या कि onHashChange घटना के लिए एक कॉलबैक इसे रोकने के लिए, अपने उपयोग के आधार पर मामले परिदृश्य।

Answer 4

CorMVC Jquery Framework इस तरह से किया जाता है, यह ओपनसोर्स है जिसे आप स्रोत में खोद सकते हैं और इससे तर्क प्राप्त कर सकते हैं।

और वास्तव में यह बहुत सीधे आगे है। निर्माता इसे नीचे इस वीडियो पर अच्छी तरह से बताता है।

http://www.bennadel.com/resources/jing/2009-12-21_0933.swf

पी एस खेद दूसरी कड़ी पोस्ट नहीं कर सकते बीसी मैं एक नया उपयोगकर्ता हूँ।

Answer 5

यह कुछ है कि ज्यादातर नए AJAXian डेवलपर्स eludes है। यह हल करने के लिए एक आसान मुद्दा हालांकि है।

पहली बात आप की आवश्यकता होगी jQuery कोर जो jquery.com

अगले आप jQuery हैश परिवर्तन भी बेन Alman द्वारा प्लगइन जिसे आप यहां प्राप्त कर सकते हैं की आवश्यकता होगी पर नि: शुल्क है: http://benalman.com/projects/jquery-hashchange-plugin/ आप की जरूरत नहीं होगी यह उन ब्राउज़रों के नए संस्करणों के लिए है जो HTML5 हैशचेंज ईवेंट का समर्थन करते हैं लेकिन आप ब्राउज़र के पुराने संस्करणों के लिए करेंगे। आपको कुछ भी करने की ज़रूरत नहीं है लेकिन इस पृष्ठ को अपने पृष्ठ में शामिल करें, यह बाकी को संभालती है।

अपने लिंक तुम इतनी तरह एक क्वेरी स्ट्रिंग फैशन में उन्हें का निर्माण करने की आवश्यकता होगी के लिए अब

:

<a href="user.php?q=/topic/article" class="dynlnk">Link Text/Image</a> 

अब आप लिंक है कि पृष्ठों के लिए जाने के लिए और मामले जावास्क्रिप्ट बंद कर दिया है में php में नियंत्रित किया जा सकता है। आपको बस इतना करना है कि सुपर ग्लोबल $ _GET का उपयोग करें और पृष्ठ सामग्री को संभालने के लिए क्वेरी स्ट्रिंग को पार्स करें।

अब पृष्ठ पर अपने जावास्क्रिप्ट में आप अपने लिंक hashchange को गति प्रदान कर की आवश्यकता होगी। आप इसे # क्यू = इस तरह से # के साथ बदलकर कर सकते हैं।

$(".dynlnk").each(function(){ 
    $(this).attr("href", $(this).attr("href").replace("?q=", "#")); 
}); 

अब अपने लिंक hashchange ट्रिगर किया जाएगा, केवल एक चीज है करने के लिए एक समारोह है कि कुछ करता है के लिए hashchange बाध्य है छोड़ दिया है। यह इस तरह jQuery के साथ बहुत बस किया जा सकता है:

$(window).bind('hashchange', function(e){ 

    //this splits the part after the hash so you can handle the parts individually. 
    //to handle them as one just use location.hash 
    pageparts = location.hash.split("/"); 

}); 

अब बस कभी कोड है कि आप अपने ajax और सामग्री को संभालने के लिए कर जोड़ें।

अब तुम सिर्फ जावास्क्रिप्ट में से एक पिछले बिट की जरूरत है hashchange मामले में पेज एक हैश के साथ लोड किया गया था, ताकि आप केवल खिड़कियों ट्रिगर समारोह पृष्ठ लोड होने

$(window).trigger('hashchange'); 

उम्मीद है कि इस फोन के साथ शुरू गति प्रदान करने के पर्याप्त है, अगर नहीं, तो अधिक प्रश्न पूछने के लिए मुझसे संपर्क करने में संकोच नहीं करें।

Answer 6

हैश लिंक का उपयोग करने के बजाय पृष्ठ पुनः लोड करने की, जावा स्क्रिप्ट कोड को गति प्रदान करने बुकमार्क/साझा किए जाने योग्य लिंक के लिए अनुमति देता है। Ben Almans jQuery hashchange event इस प्लगइन पुराने ब्राउज़र है कि यह सामान्य रूप से समर्थन नहीं करते के साथ काम करता है, तो आप hashchange घटना के लिए एक ईवेंट हैंडलर बाध्य करने के लिए अनुमति देता है। एक ईवेंट हैंडलर hashchange करने के लिए बाध्य यूआरएल के हैश हिस्सा पढ़ा है, और किसी भी समारोह कॉल कर सकते हैं।

// register event handler 
function bindHashchange() { 

    $(window).bind('hashchange', function(event) { 
     event.preventDefault(); 
     var label = location.hash.substring(1); 
     handleLabel(label); 
    }); 

    // trigger event so handler will be run when page is opened first time 
    // otherwise handler will only run when clicking on hash links 
    $(window).trigger('hashchange'); 
} 

// read and handle hash part of url 
function handleLabel(label) { 

    if (label.length > 0) { 
     // using label from url 
     switchPage(label); 
    } else { 
     // use the default label, if no hash link was present 
     switchPage('start'); 
    } 
} 

// in this case, load hidden <div>'s into a <div id="content"> 
function switchPage(label) { 
    if (label == 'start) { 
     $('div#content').html($('div#start')); 
    } else if (label == 'some_other_page') { 
     // do something else 
    } 
} 

यह अन्य ईवेंट हैंडलर उसी यूआरएल में एक बिंदु ('।') से अलग 2 तर्कों को संसाधित कर सकता है।

function processHash() { 

    var str = location.hash.substring(1); 
    var pos = $.inArray('.', str); 

    var label = ''; 
    var arg = ''; 

    if (pos > -1) { 
     label = str.substring(0, pos); 
    } else { 
     label = str.substring(0); 
    } 

    if (pos > 1) { 
     arg = str.substring(pos+1); 
    } 

    if (label.length == 0) { 
     // the default page to open of label is empty 
     loadContent('start'); 
    } else { 
     // load page, and pass an argument 
     loadContent(label, arg); 
    } 
} 

नियमित अभिव्यक्ति उपयोग किया जाता है, वर्ण के किसी भी संयोजन पार्स किया जा सकता।

mysite/# company.page = आइटम:

var registry = {}; 

// split on character '.' 
var args = label.split(/\./g); 

for (i in args) { 
    var arg = args[i]; 

    // split on character '=' 
    var temp = arg.split('='); 
    var name = temp[0]; 
    var value = temp[1]; 

    // store argument in registry 
    registry[name] = value; 
} 
// registry is loaded, ready to run application that depends on arguments 

इस यूआरएल को बदलने होंगे।रंग = लाल

निम्न JavaScript वस्तु में:

वस्तु {कंपनी = अपरिभाषित, पेज = "आइटम", color = "red"}

तो यह केवल एक है अपने चुने हुए तत्वों पर jQuery के शो() या छुपाएं() फ़ंक्शन चलाने का मामला।

इसे गैर-jQuery जावास्क्रिप्ट में परिवर्तित किया जा सकता है, लेकिन फिर आप उस कार्यक्षमता को खो देंगे जो बेन अल्मन डिलीवर करता है, जो एक पोर्टेबल समाधान के लिए महत्वपूर्ण है।

Answer 7

क्या आप चाहते हैं एक तरह से AJAX में इतिहास समर्थन करने के लिए जो कई पहले से ही विद्यमान पुस्तकालयों उपयोग किया जा सकता है। मैं YUI 3 page on history पढ़ने की सिफारिश करता हूं।