0

آموزش واقعی ajax

 
kaktoosii
kaktoosii
کاربر برنزی
تاریخ عضویت : شهریور 1390 
تعداد پست ها : 67
محل سکونت : زنجان

آموزش واقعی ajax

با سلام خدمت دوستان

می خوام آموزش ajax رو شروع کنم لطفا برای اینکه مشخص باشه دنبال می کنید تشکر یا پست بزنید

تکنولوژی ajax برای بار گذاری یک قسمت از صفحه بدون لود مجدد کل صفحه است و مخفف Asynchronous JavaScript and XML می باشد

مراحل درخواست ها در ajax  به صورت زیر می باشد 

در اینجا ابتدا یک درخواست ایجاد میشه و به سرور فرستاده میشه سپس سرور جواب رو به مرور گر بر می گردونه و توسط جاوا پردازش می شه این تکنولوژی اولین بار در سال 2005 توسط گوگل با Google Suggest معرفی شد

پیش نیاز ها :

 آشنایی با زبان جاوا اسکریپت, html , css

آشنایی با زبان سمت سرور در اینجا با php

 

سه شنبه 27 فروردین 1392  1:55 PM
تشکرات از این پست
rezahaghighi97
kaktoosii
kaktoosii
کاربر برنزی
تاریخ عضویت : شهریور 1390 
تعداد پست ها : 67
محل سکونت : زنجان

پاسخ به:آموزش واقعی ajax

شروع می کنیم

ما می خوایم یک دکمه داشته باشیم و با کلیک روی اون بدون لود صفحه یک متن نمایش داده بشه

خوب این کد رو تو نوت پد کپی کنید و با پسوند html ذخیره کنید

e1
<!DOCTYPE html>
<html>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>
palic.gigfa.com

می بینید که یک div داریم که یک کادر برای تغییر داریم که mydiv هست و یک دکمه change content به یک تابع که کد ajax رو صدا می زنه

حالا کد زیر رو بعد از تگ html  قرار بدبد

e2
<head>
<script>
function loadXMLDoc()
{
.... AJAX script goes here ...
}
</script>
</head>
 

در این قسمت تابع  معرفی شده در قسمت قبل درون دکمه رو تعریف می کنیم

 

مجله علمی پالیک محلی برای دانستن
سه شنبه 27 فروردین 1392  2:07 PM
تشکرات از این پست
kaktoosii
kaktoosii
کاربر برنزی
تاریخ عضویت : شهریور 1390 
تعداد پست ها : 67
محل سکونت : زنجان

پاسخ به:آموزش واقعی ajax

 

The XMLHttpRequest Object

در واقع پایه اصلی ایجکس همین XMLHttpRequest object است که همه مرورگر های مدرن از آن پشتیبانی می کنند که در واقع اطلاعات رو با سرور رد و بدل می کنه

برای ساخت اون از  دستور

variable=new XMLHttpRequest();  

 

استفاده می  کنیم ولی برای سازگاری با ie5 , 6 دستور زیر رو هم  کنارش استفاده می کنیم

variable=new ActiveXObject("Microsoft.XMLHTTP");

و کد نهایی:

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

 

مجله علمی پالیک محلی برای دانستن
سه شنبه 27 فروردین 1392  2:21 PM
تشکرات از این پست
kaktoosii
kaktoosii
کاربر برنزی
تاریخ عضویت : شهریور 1390 
تعداد پست ها : 67
محل سکونت : زنجان

پاسخ به:آموزش واقعی ajax

ارسال درخواست به سرور

برای ارسال از open یا send استفاده می کنیم

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

 

شکل توضیحات
open(method,url,async) method: نوع درخواست: GET or POST
url: محل فایل روی سرور 
async:جواب 
send(string) ارسال درخواست به سرور

string:فقط استفاده از POST 

 

GET یا POST

get راحت تر است و سریعتر و بیشتر مواقع مورد استفاده است

xmlhttp.open("GET","demo.php",true);
xmlhttp.send();

post ایمن تر است

xmlhttp.open("GET","demo.php?t=" + Math.random(),true);
xmlhttp.send();

برای ارسال اطلاعات فرم باید  یک تابع نیز بیفزاییم

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

 

مجله علمی پالیک محلی برای دانستن
چهارشنبه 28 فروردین 1392  9:09 PM
تشکرات از این پست
دسترسی سریع به انجمن ها