سوال: سوال درمورد jquery و ajax و حجم صفحه و ... [بایگانی]

milad_d993

جمعه 04 دی 1394, 14:45 عصر

سلام دوستان
یه صفحه وب دارم که دارای حجم 5 مگابایته و شامل صدها table
میخوام با استفاده از جی کوئری هردفعه یکی از جدول ها رو با استفاده از id'ش فراخوانی بکنم:

$.('#div1').load('page2.html #tbl2');

سوالی که دارم اینه که آیا با اینکار هر دفعه کل صفحه وب (page2) فراخوانی میشه و فقط جدول دوم لود میشه؟؟؟ (هر دفعه 5 مگابایت خونده میشه؟؟؟ سرعت پایین میاد آیا؟؟؟)

اگر این صفحه رو به 10 تا فایل اچ تی ام ال 512KB تقسیم کنم و جدول ها رو از این فایل ها فراخوانی کنم سرعت بیشتر میشه ؟؟؟ بهتره این روش؟؟؟

اصلا فرقی داره؟؟؟؟ تاثیری داره؟؟؟ اگه page2 (فایل اولیه) 10 مگ باشه؟؟؟ و .....

(این جدول ها رو نمیخوام توی بانک اطلاعاتی درج کنم و از اون بخونم؛ فقط از روشی که گفتم کدامشان بهتره...)

مهرداد سیف زاده

جمعه 04 دی 1394, 16:33 عصر

اگر بتونی داده‌های جدولها رو در فایل json ذخیره کنی خیلی بهتره و دیگه الکی کد html رد و بدل نمیکنی و اون طرف با jquery داده‌ها رو بگیری و کدهای html رو توش بزاری
اگر نمیتونی فایل‌ها رو بشکنی و ازش json استخراج کنید همون روش خودت آخرین راهه. البته این کار غیر استانداردی هست که هنوز هم عده‌ای انجام میدن، یعنی بجاری این که دیتای ajax روی json یا xml باشه کلا میان و کدhtml روی جا به جا

mamad_za

جمعه 04 دی 1394, 20:33 عصر

اگر بتونی داده‌های جدولها رو در فایل json ذخیره کنی خیلی بهتره و دیگه الکی کد html رد و بدل نمیکنی و اون طرف با jquery داده‌ها رو بگیری و کدهای html رو توش بزاری
اگر نمیتونی فایل‌ها رو بشکنی و ازش json استخراج کنید همون روش خودت آخرین راهه. البته این کار غیر استانداردی هست که هنوز هم عده‌ای انجام میدن، یعنی بجاری این که دیتای ajax روی json یا xml باشه کلا میان و کدhtml روی جا به جا

اقا مهرداد میشه اینی که گفتید رو بیشتر توضیح بدید نمی دونم چون تا حالا عملی ایم کارو انجام ندادم درکش سخته واسم اون قسمتی که گفتید با xml و json اگه بشه یه مثال کوچیک هم بزنید.

milad_d993

جمعه 04 دی 1394, 21:43 عصر

اگر بتونی داده‌های جدولها رو در فایل json ذخیره کنی خیلی بهتره و دیگه الکی کد html رد و بدل نمیکنی و اون طرف با jquery داده‌ها رو بگیری و کدهای html رو توش بزاری
اگر نمیتونی فایل‌ها رو بشکنی و ازش json استخراج کنید همون روش خودت آخرین راهه. البته این کار غیر استانداردی هست که هنوز هم عده‌ای انجام میدن، یعنی بجاری این که دیتای ajax روی json یا xml باشه کلا میان و کدhtml روی جا به جا

ممنون از پاسختون

مثال w3schools.com رو دیدم؛ ولی انگار که این هم تمام اطلاعات رو که بصورت json هست واکشی میکنه و بعد روش پردازش میکنه (حلقه foreach) نمیخوام همه داده ها رو بگیرم
نمیشه یه شرط بزاری که داده با فلان کلید رو برگردان؟؟؟

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.getJSON("demo_ajax_json.js", function(result){
$.each(result, function(i, field){
$("div").append(field + " ");
});
});
});
});
</script>
</head>
<body>

<button>Get JSON data</button>

<div></div>

</body>
</html>

{
"firstName": "John",
"lastName": "Doe",
"age": 25
}

مهرداد سیف زاده

جمعه 04 دی 1394, 21:57 عصر

شما در حالت عادی فایل زیر رو دارید

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table>
<tbody>
<tr><td>1</td><td>data 1</td></tr>
<tr><td>2</td><td>data 2</td></tr>
<tr><td>4</td><td>data 3</td></tr>
<tr><td>5</td><td>data 5</td></tr>
<tr><td>6</td><td>data 6</td></tr>
</tbody>
</table>
</body>
</html>

در بین tr‌و td دیتای شما هست. نیازی نیست در ajax شما کد html رو رد و بدل کنید و باید ترافیک شبکه رو دیتای بیشتر یه جوری کنترل کنید
برای این کار میان و از json و xml‌ا (http://www.quirksmode.org/blog/archives/2005/12/the_ajax_respon.html)ستفاده میکنن. یکم مطالعه کنید

برای این کار ما این دیتا رو میریزیم توی یه فایل به اسم table.json بصورت زیر

{
"1":"data 1",
"2":"data 2",
"3":"data 3",
"4":"data 4",
"5":"data 5",
"6":"data 6"
}

حالا برای لودش

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<title></title>
</head>
<body>

<button id="get_data" class="pure-button pure-button-primary">Get Data</button>

<hr/>
<table class="pure-table">
<thead>
<th>Row</th>
<th>Data</th>
</thead>
<tbody id="table_data" >
</tbody>
</table>

<script>
$(document).ready(function() {
$('#get_data').click(function(){
$.getJSON('table.json', {}, function(json, textStatus) {
var data_add = '';
for(var k in json)
{
data_add += '<tr><td>'+k+'</td><td>'+json[k]+'</td></tr>';
}

$('#table_data').append(data_add);
});
});
});
</script>
</body>
</html>

مهرداد سیف زاده

جمعه 04 دی 1394, 21:59 عصر

سورس رو اجرا بگیر
http://uploadboy.me/m0eur7catez9/table_loaded_json_ajax.zip