آموزش واقعی ajax
با سلام خدمت دوستان
می خوام آموزش ajax رو شروع کنم لطفا برای اینکه مشخص باشه دنبال می کنید تشکر یا پست بزنید
تکنولوژی ajax برای بار گذاری یک قسمت از صفحه بدون لود مجدد کل صفحه است و مخفف Asynchronous JavaScript and XML می باشد
مراحل درخواست ها در ajax به صورت زیر می باشد
در اینجا ابتدا یک درخواست ایجاد میشه و به سرور فرستاده میشه سپس سرور جواب رو به مرور گر بر می گردونه و توسط جاوا پردازش می شه این تکنولوژی اولین بار در سال 2005 توسط گوگل با Google Suggest معرفی شد
پیش نیاز ها :
آشنایی با زبان جاوا اسکریپت, html , css
آشنایی با زبان سمت سرور در اینجا با php
شروع می کنیم
ما می خوایم یک دکمه داشته باشیم و با کلیک روی اون بدون لود صفحه یک متن نمایش داده بشه
خوب این کد رو تو نوت پد کپی کنید و با پسوند 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> |
در این قسمت تابع معرفی شده در قسمت قبل درون دکمه رو تعریف می کنیم
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 |
ارسال درخواست به سرور
برای ارسال از 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");