آجاکس (آژاکس) یا به انگلیسی Ajax یک زبان برنامه نویسی نیست! بلکه یک تکنولوژی جدید در دریافت و ارسال اطلاعات در پس زمینه و پس از لود شدن صفحه توسط جاوا اسکریپت - Javascript می باشد. AJAX مخفف Asynchronous JavaScript And XML یعنی “جاوا اسکریپت و XML غیرهمزمان” می باشد. در آجاکس نیازی نیست برای ارسال و دریافت اطلاعات در سایت، هر بار صفحه را رفرش کنیم و اطلاعات بطور داخلی دریافت و پردازش می شوند. اینکار در صرفه جویی مصرف پهنای باند یا مصرف رم و CPU سرور بسیار مفید و کاربردی است. برای مثال تا چند سال قبل، پیام موفقیت آمیز یا خطای برخی از عملیات ها در اسکریپت ها بعد از رفرش شدن صفحه نمایش داده می شود که همین کار باعث مصرف شدن چندین برابری پهنای باند هاست می شود اما با آجاکس می توان بدون نیاز به اینکه صفحه را رفرش کرد، یک پنجره را نمایش داد، یک بخش از سایت را تغییر داد یا اطلاعاتی به دیتابیس ارسال کرد و حتی آن را دریافت و پردازش کرد. در این تاپیک از انجمن بی تاک قصد داریم درباره آجاکس بیشتر بحث کنیم و شما را با دستورات و کدهای آن آشنا کنیم.
نمونه ساده آجاکس
در آجاکس، ما باید توسط جاوا اسکریپت، یک function جدید تعریف کنیم و درون آن یک فایل حاوی اطلاعات را معرفی کنیم تا به صورت آجاکس و بدون نیاز به ریلود کردن صفحه، اطلاعات آن فایل دریافت و داخل صفحه نمایش داده شود. یک نمونه ساده برای انجام اینکار، کد زیر است. ابتدا ما باید در بخشی از سایت (فوتر یا هیدر یا یک فایل مستقل جاوا اسکریپت) کد جاوا اسکریپت مربوط به آجاکس را به سایت اضافه کنیم:
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("betalk").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
و بجای ajax_info.txt در کد بالا، نام فایل یا مسیر کامل فایل حاوی اطلاعات را باید وارد کنید. و در قسمت getElementById("betalk") بجای کلمه betalk باید آی دی بخشی از HTML سایت را وارد کنید که محتویات فایل تعریف شده در آن محدوده نمایش داده شود. و در نهایت کد HTML صفحه سایت ما باید به این صورت باشد که با کلیک روی یک کلید در صفحه، تابع جاوا اسکریپت اجرا شود:
<!DOCTYPE html>
<html>
<body>
<div id="betalk">
<h2>محتوای پیش فرض که هنگام باز شدن صفحه نمایش داده می شود</h2>
<button type="button" onclick="loadDoc()">دریافت اطلاعات از فایل جدید و نمایش در این قسمت</button>
</div>
</body>
</html>
تمامی فرایند اینکار توسط XMLHttpRequest انجام می شود که این تکنولوژی توسط مرورگرها باید پشتیبانی شود. تقریبا اکثر مرورگرها از این دستور پشتیبانی می کنند.
شما می توانید سایر اطلاعات در این زمینه را از لینک زیر مطالعه کنید:
https://www.w3schools.com/js/js_ajax_http.asp
نمونه پردازش فایل JSON
در حالت بعدی، ما می توانیم اطلاعات موجود در یک فایل JSON را دریافت و پردازش کنیم.
برای ارسال درخواست:
fetch('https://example.com/data.json').then(response => response.json()).then(data => console.log(data));
که بجای https://example.com/data.json باید آدرس مستقیم فایل با فرمت json را وارد کنید.
برای دریافت و پردازش اطلاعات:
fetch('https://example.com/authenticate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username: 'David', password: '12345' })
}).then(response => response.json()).then(data => {
console.log(data);
}).catch(error => {
console.error('Error:', error);
});
و برای استفاده از اطلاعات دریافتی در جاوا اسکریپت:
const formData = new FormData();
formData.append('username', 'David');
formData.append('password', '12345');
fetch('https://example.com/authenticate', {
method: 'POST',
body: formData
}).then(response => response.json()).then(data => {
console.log(data);
}).catch(error => {
console.error('Error:', error);
});
نمونه پردازش فایل XML
فایل XML حائوی اطلاعات ساختاریافته به صورت شاخه ای است که بهترین فرمت برای نمایش سایت مپ یا اطلاعات شاخه دار است. برای پردازش اطلاعات داخل این فایل و نمایش محتویات در سایت، می توانید کد جاوا اسکریپت پردازش این فرمت را به صورت زیر وارد استفاده کنید:
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {myFunction(this);}
xhttp.open("GET", "cd_catalog.xml");
xhttp.send();
}
function myFunction(xml) {
const xmlDoc = xml.responseXML;
const x = xmlDoc.getElementsByTagName("CD");
let table="<tr><th>هنرمند</th><th>عنوان</th></tr>";
for (let i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
در قسمت xhttp.open("GET", "cd_catalog.xml") باید نام فایل یا آدرس فایل در سرورتان را وارد کنید و در ادامه کد، کد HTML جدول مربوط به نمایش اطلاعات و محتویات فایل را شخصی سازی کنید. و برای اجرای این کد، از نمونه کد HTML ابتدای همین تاپیک می توانید استفاده کنید و تابع را با یک کلید اجرا کنید.
نمونه پردازش در PHP
حالت بعدی آجاکس، استفاده از آن در کدهای PHP است و دریافت و پردازش اطلاعات در پس زمینه در کدهای PHP می باشد. یک نمونه ساده برای انجام اینکار:
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<h3>Start typing a name in the input field below:</h3>
<p>Suggestions: <span id="txtHint"></span></p>
<p>First name: <input type="text" id="txt1" onkeyup="showHint(this.value)"></p>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
}
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("txtHint").innerHTML =
this.responseText;
}
xhttp.open("GET", "gethint.php?q="+str);
xhttp.send();
}
</script>
</body>
</html>
پیش نمایش:
https://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_suggest_php
نمونه استفاده در ASP
نمونه جاوا اسکریپت مربوط به اجرا در زبان ASP تقریبا همانند PHP است و در بعضی نقاط کوچک تفاوت دارند:
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<h3>Start typing a name in the input field below:</h3>
<p>Suggestions: <span id="txtHint"></span></p>
<p>First name: <input type="text" id="txt1" onkeyup="showHint(this.value)"></p>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
}
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("txtHint").innerHTML =
this.responseText;
}
xhttp.open("GET", "gethint.asp?q="+str);
xhttp.send();
}
</script>
</body>
</html>
پیش نمایش:
https://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_suggest_asp
