ايجكس

[ravand]

سلام
من تا حالا با ايجكس كار نكردم و برام سوال شده. يعني نه كه كار نكرده باشم فقط گيج شدم.
آيا ايجكس يك نوع زبان برنامه نويسي هست ؟ يا به خاطر كار خاصي كه انجام ميده بهش ميگن ايجكس.
من چند تا كد با جي كوئري و html نوشتم بهم گفتم اين ايجكس هست.:لبخند: :متفکر:

[farhadfery]

من چند تا كد با جي كوئري و html نوشتم بهم گفتم اين ايجكس هست
هر کس به سما گفته، درست گفته:چشمک:.
توی بخش js و Ajax بپرسید بهتره.

[MostafaEs3]

//////////

[ravand]

داداش يعني اين كد ساده ي html كه باعث ميشه صفحه رفرش نشه هم ايجكس هست؟

<form action="8.php" target="myFrame" method="post">
<input type="text" name="user"><br>
<input type="password" name="pass"><br>
<input type="submit" value="submit">
</form>
<iframe name="myFrame" style="display: none;"></iframe>

مي تونم دستور زير رو هم در سمت سرور قرار بدم كه پيغام بده

echo("<script type='text/javascript'>alert('صحيح است')</script>");
پس ايجكس يك اصطلاح هست تا برنامه نويسي درسته؟:متفکر:

[MostafaEs3]

//////////

[persian-boy]

Ajax یک زبان برنامه نویسی نیست :)

اون کدی که قرار دادید فقط تارگت رو روی آیفرم قرار دادید . صفحه رفرش نمیشه ولی تارگت رفرش میشه :)

[ravand]

خوب اون كاري كه اين دوستان ميگن رو انجام ميده. شما يه كد خيلي ساده از ايجكس داري بذاري؟

[MostafaEs3]

//////////

[ravand]

آخر من نفهميدم برنامه نويسي هست يا نه!!!!!!!!!!!!!!!!
بگذريم يه چيزي هست!
اين كدي هم كه شما گذاشتي توي اينترنت زياد ديدم اصلاً ساده هم نيست! مخ آدم گير پاج ميكنه :لبخند:

[MostafaEs3]

//////////

[رضا قربانی]

این در مورد ایجکس :
http://www.writeage.com/what_is_ajax.html

اینم دانلود کتاب پی دی اف 990 کیلوبایتی در مورد همه چیز در مورد ایجکس :
http://padash.net/download/1720.aspx
اینم یه کتاب دیگه :
http://blog.monavarian.ir/redirect.php?saq_target=http://monavarian.persiangig.com/document/pdf_computer/farsbazar_Ajax_All_About.pdf

و و و

در کل استفاده ار ایجکس در اصول سئو به منفی خوردن سایت اعمال می شه و رتبه سایت رو می کشه پایین و خیلی هم معایب داره .

[Reza1607]

آخر من نفهميدم برنامه نويسي هست يا نه!!!!!!!!!!!!!!!!
زبان برنامه نويسي نيست بلكه يك تكنولوژي هست كه بر پايه استفاده از javascript و XML ايجاد شده



اين كدي هم كه شما گذاشتي توي اينترنت زياد ديدم اصلاً ساده هم نيست! مخ آدم گير پاج ميكنه :لبخند:
دوست عزيز خيلي سخت نيست كل اي جكس همون چيزي هست كه دوستمون آقا مصطفي گفتن هست بازم من براتون توضيح مي دم

اين كد آقا مصطفي هستش


var xmlhttp;
if (str.length==0)
{
document.getElementById("ID").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("ID").innerHTML=xmlhttp.re sponseText;

}
}
xmlhttp.open("GET","ajax.php?form1="+str,true);
xmlhttp.send();
}

شما بايد براي كار با اي جكس يك شي از نوع XMLHttpRequest ايجاد كنيد كه مسلما براي اين كار از اين خط استفاده مي كنيد


xmlhttp=new XMLHttpRequest();

ولي اگه طراح وب باشيد خيلي خوب اين موضوع رو مي دونيد كه بايد كاري رو كه انجام مي دين دوبار انجام بدين ( به خاطر IE لعنت الله عليه) به همين خاطر ما مجبور اون يك خط رو به اين صورت بنويسيم

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

تا اسكريپت ما تو IE 5 , 6 هم درست كار كنه

خوب كار بعدي كه بايد انجام بديم اينه كه يك كانكشن باز كنيم و در خواستمون رو بفرستيم
اين خط


xmlhttp.open("GET","ajax.php?form1="+str,true);

خوب تو اين خط ما اومديم يك كانكشن به فايل ajax.php ايجاد كرديم كه قرار اطلاعات به صورت GET براي فايل ajax.php ارسال بشه

خوب حالا كه ما اين كانكشن رو ايجاد كرديم و فايل سرور و متد ارسال اطلاعات رو مشخص كرديم بايد اطلاعات رو ارسال كنيم و اين كار هم با يك خط و اون هم اينه



xmlhttp.send();


خوب حالا كه ما اطلاعات رو فرستاديم بايد منتظر اين بمونيم تا اين كه فايل ajax.php(همون فايل سرور) كارش تموم شه و اطلاعات رو براي ما بفرسته

خوب چون ما نمي دونيم كه كار فايل ajax.php تمومه از رويداد onreadystatechange شي XMLHttpRequest استفاده مي كنيم كه كار اين رويداد اين هست كه به محض تغيير در وضعيت فعلي تابع اي رو كه مشخص كرده ايد رو اجرا مي كنه (callback)
طريقه استفاده هم به اين صورت هست




xmlhttp.onreadystatechange=function()
{
//your code
}


ولي چون اين احتمال وجود داره كه اجرا فرمان ما با خطا مواجه شه بايد چك كنيم ببينيم كه آيا درخواست ما اجرا شده يا نه؟ و اين كار با استفاده از يك if خيلي ساده انجام ميشه


if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//your code
}

خوب ديگه تمومه فقط مونده تا اطلاعاتي رو بخونيم و اين كار با استفاده از اين دستور انجام ميشه



xmlhttp.responseText

خوب اميدوارم متوجه شده باشين
اگر سوالي داشتين در خدمتم

[ravand]

اين كد جي كوئري هم كارش توي مايه هاي اون كدهاي شماست. يكي از بچه ها گفت تركيبي از جي كوئري و ايجكس هست ولي اين كدهايي كه من ميبينم با ايجكس خيلي فرقشه:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<button id="b">ajax load</button>
<div id="result"> </div>
<script>
$("#b").click(function(){
$.post("http://localhost/cms/nicEdit/delete.php?id=3", function(data) {
alert("Data Loaded: " + data);
});
});
</script>
</body>
</html>
متشكرم

[Reza1607]

اين كد جي كوئري هم كارش توي مايه هاي اون كدهاي شماست. يكي از بچه ها گفت تركيبي از جي كوئري و ايجكس هست ولي اين كدهايي كه من ميبينم با ايجكس خيلي فرقشه:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<button id="b">ajax load</button>
<div id="result"> </div>
<script>
$("#b").click(function(){
$.post("http://localhost/cms/nicEdit/delete.php?id=3", function(data) {
alert("Data Loaded: " + data);
});
});
</script>
</body>
</html>
متشكرم

بله خود جي كوئري هم چند تابع براي كار به صورت ajax داره
مثلا
$.load
$.post
$.get
$.getJSON
$.ajax

[MMSHFE]

دوست عزیز، AJAX مخفف Asynchronous Javascript And XML و به معنای ترکیب غیرهمزمان Javascript و XML هست. قضیه هم از این قراره که میتونیم با کمک جاوا اسکریپت، رویدادهای سمت کلاینت رو دریافت کنیم (مثل کلیک کردن، گذشتن مدت زمان خاص، تایپ کردن و...) و برحسب اونها، یک اسکریپت رو از سمت سرور درخواست کنیم (با کمک شئ XMLHttpRequest) و پاسخ رو از سرور دریافت کرده و مجدداً با استفاده از Javascript، فقط همون بخشی از صفحه که قراره تغییر کنه رو اصلاح کنیم و نیاز به رفرش مجدد کل صفحه نباشه. این میشه کل AJAX که همونطور که میبینید، نیازمند تسلط نسبی به جاوا اسکریپت و ساختار شئ XMLHttpRequest هست. بنابراین، حداقل در سمت کلاینت برنامه نویسی نیاز داره. ازطرفی، در سمت سرور هم اسکریپت موردنظر ممکنه یک صفحه معمولی باشه یا یک اسکریپت پویا که با PHP یا ASP.NET یا JSP و... ساخته شده و خروجی اون، توسط شئ XMLHttpRequest دریافت شده و در صفحه مورد استفاده قرار میگیره. بنابراین، اونچه که مشخصه، خود AJAX یک زبان برنامه نویسی واحد نیست ولی برای اجرای صحیح، نیازمند برنامه نویسی در سمت سرور و کلاینت هست تا بتونیم صفحات تعاملی تر و با ساختاری نزدیک تر به برنامه های دسکتاپ داشته باشیم. مثلاً در همون زمانی که کاربر در حین ثبت نام، نام کاربری موردنظرش رو تایپ کرده و داره بقیه فرم رو تکمیل میکنه، میتونیم چک کنیم ببینیم این نام قبلاً توی دیتابیس ثبت شده یا نه و قبل از تکمیل فرم، به کاربر این مسئله رو اطلاع بدیم. البته یکسری تغییرات که فقط در سمت کلاینت انجام میشه مثل تایمر معکوس و... رو نباید با AJAX اشتباه بگیریم. مهم اینه که در AJAX باید یک اسکریپت از سرور درخواست بشه و خروجی اون در صفحه مورد استفاده قرار بگیره، بدون اینکه کل صفحه Refresh بشه. حالا این وسط کتابخانه های مبتنی بر JS مثل jQuery با کمک توابعی مثل post.$ و get.$ و ajax.$ ساختار ساده تری رو برای استفاده از AJAX فراهم کردن چون توی مرورگرهای مختلف، شئ XMLHttpRequest به شکلهای مختلفی ساخته میشه و باید رویدادها و کدهای Response و... رو بررسی کنیم و مثلاً اگه کد پاسخ برابر با فلان عدد بود یعنی جواب با موفقیت دریافت شده و... اما در این کتابخانه ها و بکمک توابع معرفی شده، نیازی به این کار نیست و با یکبار نوشتن کد، میتونیم با خیال راحت توی همه مرورگرها از اونها استفاده کنیم چون خود این کتابخانه ها برحسب نوع مرورگر، شئ مناسب رو ایجاد کرده و مورد استفاده قرار میدن که به این ویژگی اصطلاحاً Cross-Browserبودن کد میگن.
اگه جایی رو احیاناً بد توضیح دادم یا ابهامی بود، بفرمایید تا بیشتر توضیح بدم. موفق باشید.

[ravand]

نه مهندس خوب توضيح داديد، دوستان ديگر هم خوب توضيح دادن از همه متشكرم.
فكرام رو كردم ميبينم اگه بخوام براي ايجكس از جي كوئري استفاده كنم بهتره ، البته از لحاظ راحتي ميگم . چون جي كوئري زبان خيلي ساده اي هست ، من خودم با كار كردن باهاش لذت ميبرم.
نظرتون چيه؟
متشكرم.

[MMSHFE]

jQuery علاوه بر ساده بودن، مزیت اجرای صحیح کد در تمام مرورگرها رو هم داره و دیگه نیاز نیست نگران اجراشدن کدتون (بخصوص توی IE) باشید.

[masoud_tamizy]

فریم ورک دیگری که می توان از آن استفاده کرد ExtJS می باشد .
من که باهاش کمی کار کردم واقعا معرکست البته نه واسه کارای کوچک و دم دستی :چشمک:
آدرس سایتش هم sencha.com ه :لبخندساده:
درپناه حق

[Reza1607]

فریم ورک دیگری که می توان از آن استفاده کرد ExtJS می باشد .
من که باهاش کمی کار کردم واقعا معرکست البته نه واسه کارای کوچک و دم دستی :چشمک:
آدرس سایتش هم sencha.com ه :لبخندساده:
درپناه حق

البته اگه اشتباه نكنم حجمش خيلي بالاست ( فكر كنم 500 كيلو باشه )

[lady64]

فكرام رو كردم ميبينم اگه بخوام براي ايجكس از جي كوئري استفاده كنم بهتره ، البته از لحاظ راحتي ميگم . چون جي كوئري زبان خيلي ساده اي هست .
من نتونستم نتیجه گیری کنم . بالاخره برای یادگیری ajax باید به جاوااسکریپت مسلط بود یا jquery ؟

[ravand]

ببين ايجكس يه زبان نيست بلكه يك تكنيك هست. كه مثلا بدون رفرش صفحه مقداري رو ارسال ميكني. و جواب ارسال رو دريافت ميكني. الان خود جي كوئري هم يه بحث ايجكس داره. توي گوگل سرچ كن ايجكس در جي كوئري.
يه نمونه مثال :

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<button id="b">ajax load</button>
<div id="result"> </div>
<script>
$("#b").click(function(){
$.post("http://localhost/cms/nicEdit/delete.php?id=3", function(data) {
alert("Data Loaded: " + data);
});
});
</script>
</body>
</html>
من با كد بالا مقدار رو حذف كردم و جواب رو دريافت كردم بدون اينكه صفحه ي من بره . و رفرش بشه.
خوبي اين روش ايجكس در جي كوئري اينه كه ساده تر هست و با مرورگر ها سازگار تر هست.

[lady64]

درسته . آخه تو تاپیک ها گفته شده ، برای یادگیری ایجکس میبایست جاوااسکریپت و html بدونیم . بعد شما فرمودین چون جی کوئری راحت تره از اون استفاده میکنید. به همین خاطر سوال کردم . ممنونم.

[MMSHFE]

استفاده از jQuery هم باید مثل هر ابزار دیگری با دقت انجام بشه. مثلاً فایل jQuery که توی برنامه با تگ SCRIPT بارگذاری میکنید، حدود 92 کیلوبایت هست (نسخه 1.7.2) و اگه درست ازش استفاده نکنید و کارهای زیادی رو نخواین با jQuery انجام بدین و مثلاً همین AJAX رو فقط بخواین کار کنید، در اینصورت بخاطر صرفه جویی در (فرضاً) 100 کارکتر (یعنی 100 بایت)، 92 کیلوبایت اضافه تر باید Download و بارگذاری بشه. این یعنی مصرف بیهوده ترافیک سایت شما. درسته که با jQuery کدها خیلی کوتاه و مرتب میشن ولی باید ببینید ارزشش رو داره یا نه. اما مثلاً اگه بخوایم یک Slideshow بنویسیم، بدون jQuery شاید لازم باشه 300 کیلوبایت یا بیشتر کدنویسی کنیم که در اینجا بارگذاری از این اسکریپت 92 کیلوبایتی مقرون به صرفه هست چون با کمک اون میشه بجای 300 کیلوبایت، همون کار رو با 2 الی 3 کیلوبایت کد انجام داد. درهرحال حتی اگه از jQuery هم استفاده میکنید، آشنایی با اصول استفاده از AJAX بدون jQuery و با استفاده از Javascript خام ایده خوبیه چون میدونید در پشت پرده کارها چطور انجام میشه و شئ XML HTTP Request چیه و چه کاری انجام میده و توی هر مرورگر چطور باید این شئ رو ایجاد کرد و مثلاً وضعیت خروجی 200 یعنی چی و الی آخر.
موفق باشید.

[رضا قربانی]

سلام و خسته نباشید

من یک فانکشن دارم :
function Reza(){
echo 'testttttttttttttt';
}

می خوام در یک صفحه بدون اینکه صفحه رفرش بشه با زدن بر روی دکمه type="submit" فانکشنم اجرا بشه. من هیچ form ی ندارم و باید روی دکمه مانور داد .

ممنون میشم راهنماییم کنید

[رضا قربانی]

یک سوال دیگه هم اینه که چطور می تونم با یک سابمیت بدون اینکه صفحه رفرش بشه یک فایل php رو به صورت blank باز کنم و مثلا بعد 10 ثانیه صفحه که به صورت blank باز شده اتوماتیک بسته بشه ؟

[MMSHFE]

من یک فانکشن دارم :
...می خوام در یک صفحه بدون اینکه صفحه رفرش بشه
این کد رو بگذارین توی یک فایل PHP (مثلاً به نام reza.php) :


function reza() {
echo 'test';
}
reza();

حالا این کد رو توی صفحه HTML خودتون بنویسید:


<!doctype html>
<html>
<head>
<title>Hello</title>
<meta charset="utf-8"/>
<script src="jqmin.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#show").click(function() {
$("#result").load("reza.php");
});
});
</script>
</head>
<body>
<input id="show" type="button" value="Show"/>
<div id="result">&nbsp;</div>
</body>
</html>

[MMSHFE]

یک سوال دیگه هم اینه که چطور می تونم با یک سابمیت بدون اینکه صفحه رفرش بشه یک فایل php رو به صورت blank باز کنم و مثلا بعد 10 ثانیه صفحه که به صورت blank باز شده اتوماتیک بسته بشه ؟
باید با JS و تابع window.open توی رویداد click دکمه موردنظر، پنجره جدید باز کنید و کنترل کننده اون رو توی یک متغیر بگذارین و بعد از 10 ثانیه (با setTimeout) با فرستادن متغیری که خروجی window.open رو توش ذخیره کردین بعنوان پارامتر برای تابع window.close اون رو ببندید. مثال:

var whnd = window.open('http://www.mysite.com/test.php');
setTimeout(function() { window.close(whnd); }, 10000);

[رضا قربانی]

این کد رو بگذارین توی یک فایل PHP (مثلاً به نام reza.php) :


function reza() {
echo 'test';
}
reza();

حالا این کد رو توی صفحه HTML خودتون بنویسید:


<!doctype html>
<html>
<head>
<title>Hello</title>
<meta charset="utf-8"/>
<script src="jqmin.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#show").click(function() {
$("#result").load("reza.php");
});
});
</script>
</head>
<body>
<input id="show" type="button" value="Show"/>
<div id="result">&nbsp;</div>
</body>
</html>


مشکل من اینه که من نباید صفحه ای رو فراخوانی کنم . مثلا من فقط یک یک فایل ایندکس دارم که در این فایل یک فانکشن هست و یک دکمه از نوع submit

صفحه وقتی باز شد این فانکشن من رو میخونی ولی نباید بهش اجازه اجرا داد . زمانی که روی سابمیت کلیک شد این فانکشن رو اجرا کنه .. صفحه هم نباید رفرش بشه :D

[MMSHFE]

در اینصورت کاری که شما میخواین انجام بدین AJAX نیست چون در AJAX باید یک اسکریپت از سرور درخواست بشه. اگه میخواین همه چیز سمت کلاینت اجرا بشه، تابعی با Javascript بنویسید و توی رویداد کلیک دکمه، اون رو فراخوانی کنید.

[رضا قربانی]

در اینصورت کاری که شما میخواین انجام بدین AJAX نیست چون در AJAX باید یک اسکریپت از سرور درخواست بشه. اگه میخواین همه چیز سمت کلاینت اجرا بشه، تابعی با Javascript بنویسید و توی رویداد کلیک دکمه، اون رو فراخوانی کنید.
آره دقیقا .منم همین کارو کردم . گفتم بیام سوال کنم شاید چاره ای باشه.

اومدم با کلیک کردن، یک صفحه ای رو باز کردم و بعد از اینکه دستورات اجرا شد صفحه خودش بسته میشه . چاره ی دیگه ای نتونستم پیدا کنم.

تشکر

[nariman_t]

خوب برنامه نویسی نیستش اجکس یک ترفنده در اصل که با استفاده از زبان java script که برای پویا تر کردن صفحات وب استفادئه میشه
خود اجکس کلا ترفنده مثلا اون بالا یک کدی نوشته بودین که از Hframe استفاده کرده بود در بعضی جاها با استفاده از javascript و همون iframe میتونید uplder هایی مانند ajax درست کنید که یه سرچ بزنی میتونی ببینی
سرچ کن Uploder با استفاده از Iframe
اطلااعت بیشتری خواستین بگین تنا کامل تر بگم و یا کدشو بذارم

[nariman_t]

راستی یادم رفت بگم که برای استفاده از ajax از jquery استفاده کنید چون راحت تز میتونید کد نویسی کنید اگر بخواهید مستقیم از کدهای javascript استفاده کنید مدیریت کدها و همچنین مقدار کدهاتون بد جور میره بالا در حالی که با چند خط jquery می تونید کار رو تمکام کنید

[aysha_6586]

این در مورد ایجکس :

در کل استفاده ار ایجکس در اصول سئو به منفی خوردن سایت اعمال می شه و رتبه سایت رو می کشه پایین و خیلی هم معایب داره .

واقعا؟؟؟؟؟؟؟؟؟؟؟؟؟؟!!!!!!!!!!!! !!!!!!!!