عرض محتوى AJAX response قبل تنفيذ طلب AJAX آخر

بدأه Xacker في 16 أكتوبر 2011 · 2 رد · 953 مشاهدة · في قسم البرمجة بــ Javascript

#116 أكتوبر 2011 في 03:36 صاحب الموضوع

السلام عليكم ورحمة الله وبركاته،

قمت بكتابة كود جافاسكربت وفيه أقوم بتنفيذ الكثير من عمليات POST المتزامنة (synchronous) الواحدة تلو الأخرى، وأحتاج لعرض محتوى الرد response في الصفحة بشكل كامل قبل تنفيذ الطلب التالي..

المشكلة أنه يتم البدء بتنفيذ الطلب التالي قبل انتهاء الـ rendering للرد السابق، وهذا ما يجعل الصفحة لا تتغير كمحتوى على الإطلاق..

حاولت كثيراً طوال البارحة دون فائدة، حتى استبدال أجزاء بسيطة من محتوى المستند document الأصلي لم ينجح حيث لا تظهر التعديلات لكون طلبات AJAX تنفذ بشكل أسرع.

قمت بكتابة مثال بسيط وقريب جداً لما أقوم به، هل هناك اقتراحات تمكنني من تنفيذ ما أرغب به؟

شكراً

XACKER = {
	URLs: '',
	xml_get: function(url) {
		var response = $.ajax({
			type: 'GET',
			url: url,
			headers: {
				'User-agent': navigator.userAgent, 
				'Accept': 'application/atom+xml,application/xml,text/xml', 
				'Referer': url
			},
			dataType: 'html',
			async: false,
			cache: false,
			processData: false
		}).responseText;
		return response;
	},
	init: function() {
		this.URLs = new Array(
			'/page1.html', 
			'/page2.html', 
			'/page3.html', 
		);

		this.fetchEmAll();
	},
	fetchEmAll: function() {
		var that = this;
		that.URLs.forEach(function(url, index, x) {
			response = that.xml_get(url);
			$('html').html(response);
		});
	}
}

$(document).ready(function() {
	XACKER.init();
});

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#216 أكتوبر 2011 في 11:49

تفضل اخي الكريم اضفت على

دالة التحميل صورة صغيرة 1*1 بكسل المفترض after rendering بثانية واحدة تقوم باستدعاء دالة requestNext التي اضفتها بدلا عن fetchEmAll

اتمنى ان يفي بالمطلوب تحياتي

<html>
<head>
<title>XACKER example</title>
   <script type="text/javascript" 
   src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
   </script>
<script>

XACKER = {
	// pages
        URLs: ['page1.html' , 'page2.html'],
	// real worker
        xml_get: function(url) {

		var request = $.ajax({
                        type: 'GET',
                        url: url,
                        headers: {
                                //'User-agent': navigator.userAgent, 
                                //'Accept': 'application/atom+xml,application/xml,text/xml', 
                                //'Referer': url
                        },
                        dataType: 'html',
                        async: false,
                        cache: false,
                        processData: false ,

                });
		// when done submit result
		request.done(function(msg) {
			// the trick here
			// -----------------------------------V
			$("#html").html( msg + "<img onload='setTimeout(\"XACKER.requestNext();\",1000) '  src=\"pixel.png\" width='0'/>" );
		});
		// when fail notify me
		request.fail(function(jqXHR, textStatus) {
		  console.log( "Request failed: " + textStatus );
		});

        },
	// no really begin before timeout 
        init: function(timeout) {
		setTimeout("XACKER._init()",timeout)
	},
	// real initiator 
        _init: function() {
                this.requestNext();
        },
	//counter
	current:1,
	// stepworker
	requestNext: function() {
		this.xml_get('page' + this.current +'.html');
		this.current = this.current +1 ;

	},

}

$(document).ready(function() {
        XACKER.init(2000);
});

</script>
</head>

<body>

Current PAGE :
  <div id="html" >Loading wait 2 seconds </div>

</body>
</html>

تعليقات على الكود

x.rar

تم تعديل هذه المشاركة بواسطة ihope في 16 أكتوبر 2011 في 14:24

other ESTJ thing