(۱۱ مرداد ۱۳۹۲ ۰۹:۲۵ ق.ظ)simorghsimorgh نوشته شده توسط: خیلی جالبه ... توی همون صفحه ای که متن نوشته میشه ، متن بزرگ میشه ولی در عین حال یک فایل دیگه Server.php هم باید باشه. میشه این کدها رو بیشتر توضیح بدین که هر قسمت چکار میکنه دقیقا ؟
مخصوصا اینکه من با جاوا اسکریپت اصلا آشنا نیستم.
الان تقریبا میشه گفت همه ی سایت ها از Ajax استفاده میکنن مثلا موقع ثبت نام شما userName رو وارد میکنید بلا فاصله زیرش یک پیغام نمایش داده میشه که آیا نام کاربری صحیحه یا قبلا وارد شده :
تو این قسمت یک شی از نوع XMLHttpRequest می سازیم که وظیفه برقراری ارتباط با سرور و ارسال و دریافت اطلاعات رو داره :
کد:
var requestObject = new XMLHttpRequest();
در قسمت بعدی هم روی داد onkeyup شی Textbox رو توسط تابع execute هندل کردیم و گفتیم که بیا یک ارتباط با سرور بر قرار کن، نحوه ی برقراری ارتباط با سرور هم که توسط تابع open شی requestObject صورت میگیره دو نوع هست
۱- GET : در این نوع تو همون قسمتی که url نوشته میشه پارامتر ها هم نوشته میشه و موقع send کردن ما چیزی به سرور نمیفرستیم (null) را می فرستیم : که تو این مثال من این کارو کردم،
کد:
requestObject.open("GET",
"Server.php?text="+
document.getElementById("yourname").value,
true);
requestObject.send(null);
۲- POST : دراین نوع شما موقع open کردن کانکشن فقط url سرور رو مشخص میکنید ولی پارامتر ها رو توسط تابع Send ارسال میکنید، برای ارسال پارامتر هم روش های مختلفی وجو داره که یکیش اینه که یک شعی از نوع FormData درست کنید و پارامتر ها رو با اون بفرستید . توجه بشه که تو این متد برنامه سرور هم باید تغییر کنه چون پارامتر ها توی شی GET_ رویخته نمیشن توی شی POST_ ریخته میشن :
کد:
requestObject.open("POST",
"Server2.php",
true);
var data = new FormData();
data.append('text', document.getElementById("yourname").value);
requestObject.send(data);
پارامتر آخر هم نشون میده که آیا ارتباط asynchronous (غیر هم زمان) (true) و یا synchronous (هم زمان) (false) باشه . تفاوت این دو تا هم به این شرحه اگه ما نوع ارتباط رو غیر هم زمان در نظر بگیریم که معمولا در بیشتر مواقع این گونه هست وقتی که ما داده را ارسال میکنیم سیستم منتظر یک Callback از سمت سرور میمونه و این Callback توسط تابع onreadystatechange هندل میشه و دیگه نیازی نیست که منتظر پاسخ باشیم ولی اگه هم زمان باشه باید منتظر بمونیم تا سرور پاسخ بده . یعنی این عبارت رو باید زیر تابع سند بنویسیم :
کد:
if(requestObject.readyState==4)
{
document.getElementById("entered").innerHTML = requestObject.responseText;
}
این عبارت هم یعنی اینکه پیام به درستی و بدون خطا دریافت شده requestObject.readyState و میتونید اونو نمایش بدید.
این هم کد Client2.html :
کد:
<html>
<head>
<title>
Hello Ajax!
</title>
</head>
<body>
<script language="JavaScript" type="text/JavaScript">
var requestObject = new XMLHttpRequest();
function execute()
{
requestObject.open("POST",
"Server2.php",
true);
var data = new FormData();
data.append('text', document.getElementById("yourname").value);
requestObject.send(data);
if(requestObject.readyState==4)
{
document.getElementById("entered").innerHTML = requestObject.responseText;
}
}
</script>
<form name ="form">
Enter Your Name:
<input id ="yourname" type="text" name="yourname" onkeyup= "execute()">
<br/>
<div id="entered">
Wait For Response
</div>
</form>
</body>
</html>
و این هم کد Server2.php :
کد:
<?PHP
if(isset($_POST['text']))
{
echo strtoupper($_POST['text']);
}
?>
امیدوارم که یاد گرفته باشی. برای کسب اطلاعات بیشتر هم از گوگل استفاده کن.
