اے جی ایکس - ایکس آر ال ایوبجیکٹ
- پچھلے پیج اے جی ایکس معرفی
- پائیدار پیج اے جی ایکس رکست
وسیعت XMLHttpRequest پایهای است که AJAX بر اساس آن بنا شده است.
- 创建 XMLHttpRequest 对象
- 定义回调函数
- وسیعت XMLHttpRequest باز میشود
- درخواست به سرور ارسال میشود
XMLHttpRequest 对象
همه مرورگرهای مدرن آن را پشتیبانی میکنند XMLHttpRequest 对象。
XMLHttpRequest وسیعتی است که میتواند برای تبادل دادهها با سرور وب در پسزمینه استفاده شود. این به این معناست که میتوان بخشهایی از وبسایت را بهروزرسانی کرد بدون اینکه نیاز به بارگذاری مجدد کل صفحه باشد.
创建 XMLHttpRequest 对象
所有现代浏览器（Chrome、Firefox、IE、Edge、Safari、Opera）都有内置的 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：
variable = new XMLHttpRequest();
定义回调函数
回调函数是作为参数传递给另一个函数的函数。
在这种情况下，回调函数应包含响应准备就绪时要执行的代码。
xhttp.onload = function() {
// 当响应准备就绪时要做什么
}
发送请求
如需向服务器发送请求，您可以使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
مثال
// 创建 XMLHttpRequest 对象
const xhttp = new XMLHttpRequest();
// 定义回调函数
xhttp.onload = function() {
// 您可以在这里使用数据
}
// 发送请求
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
跨域访问（Access Across Domains）
出于安全原因，现代浏览器不允许跨域访问。
这意味着网页和它尝试加载的 XML 文件必须位于同一台服务器上。
CodeW3C.com 上的例子都打开位于 CodeW3C.com 域中的 XML 文件。
如果您想在自己的网页之一上使用上面的例子，您加载的 XML 文件必须位于您自己的服务器上。
XMLHttpRequest 对象方法
| 方法 | توضیحات |
|---|---|
| new XMLHttpRequest() | 创建新的 XMLHttpRequest 对象。 |
| abort() | 取消当前请求。 |
| getAllResponseHeaders() | 返回头部信息。 |
| getResponseHeader() | 返回特定的头部信息。 |
| open(method, url, async, user, psw) |
规定请求。
|
| send() | 向服务器发送请求，用于 GET 请求。 |
| send(string) | 向服务器发送请求，用于 POST 请求。 |
| setRequestHeader() | 将标签/值对添加到要发送的标头。 |
XMLHttpRequest 对象属性
| ویژگی | توضیحات |
|---|---|
| onload | 定义接收到（加载）请求时要调用的函数。 |
| onreadystatechange | 定义当 readyState 属性发生变化时调用的函数。 |
| readyState |
وضعیت XMLHttpRequest را ذخیره کنید.
|
| responseText | پاسخ به عنوان رشته بازگردانده میشود. |
| responseXML | پاسخ به عنوان داده XML بازگردانده میشود. |
| وضعیت |
وضعیت درخواست را بازگردانید
برای لیست کامل، لطفاً بروید به Http مواصفات پیام |
| statusText | نوشتار وضعیت را بازگرداند (مثلاً "OK" یا "Not Found") |
ویژگی onload
هنگام استفاده از XMLHttpRequest، میتوانید یک تابع بازگشتی تعریف کنید تا هنگام دریافت پاسخ درخواست اجرا شود.
لطفاً در XMLHttpRequest تعیین کنید onload تابع در این ویژگی تعریف شده است:
مثال
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
کالبکهای چندگانه
اگر در وبسایت چندین وظیفه AJAX وجود دارد، باید یک تابع ایجاد کنید که XMLHttpRequest را اجرا میکند و برای هر وظیفه AJAX یک تابع بازگشتی ایجاد کنید.
درخواست باید شامل URL و تابعی باشد که باید هنگام آمادهسازی پاسخ اجرا شود.
مثال
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
// اینجا عمل است
}
function myFunction2(xhttp) {
// اینجا عمل است
}
ویژگی onload
readyState وضعیت XMLHttpRequest را ذخیره میکند.
onreadystatechange ویژگی یک تابع بازگشتی را تعریف میکند که هنگام تغییر readyState اجرا میشود.
وضعیت ویژگیها و statusText ویژگی وضعیت XMLHttpRequest را ذخیره میکند.
| ویژگی | توضیحات |
|---|---|
| onreadystatechange | تابعی را تعریف کنید که هنگام تغییر readyState تعیین میشود. |
| readyState |
وضعیت XMLHttpRequest را ذخیره کنید.
|
| وضعیت |
وضعیت درخواست را بازگردانید
برای لیست کامل، لطفاً بروید به Http مواصفات پیام |
| statusText | statusText |
حالت پیغام برآمد کریں (مثلاً "OK" یا "Not Found").
جب readyState تبدیل ہوگا، onreadystatechange فانکشن کا کال کردی جائیگا۔ 4 اور status 200 جب، جواب تیار ہوجائیگا:
مثال
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
onreadystatechange ایونٹ چار بار (1-4) کے لئے کال کردی گئی، ہر بار readyState تبدیل ہوئی۔
- پچھلے پیج اے جی ایکس معرفی
- پائیدار پیج اے جی ایکس رکست
