hody.ir

4-دریافت اطلاعات از فایل XML در ajax | هودی | آموزشای متنی

4-دریافت اطلاعات از فایل XML در ajax

Ajax Tutorial

سلام دوستان امیدوارم سلامت باشید، در این جلسه در مورد چگونگی دریافت اطلاعات از فایل XML توضیح می دهیم

در جلسه قبل متود onreadystatechange را توضیح دادیم

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

XML چیست؟

XML مخفف Extensible Markup Language و به معنای زبان نشانه‌گذاری گسترش‌پذیر است.

این ابزار برای دسته‌بندی و انتقال داده‌ها استفاده می‌شود و در ظاهر سایت هیچ اثری ندارد.

یکی از ویژگی های XML قابلیت تعریف تگ های دلخواه است، یعنی شما میتوانید هر تگی را با عنوان دلخواه در آن وارد کنید.

مثال:

<speakers>
	<speaker>
		<post>
			<title>
				1 عنوان
			</title>
			<content>
				لوریم ایپسوم 1 ...
			</content>
		</post>
	</speaker>
	<speaker>
		<post>
			<title>
				2 عنوان
			</title>
			<content>
				لوریم ایپسوم 2 ...
			</content>
		</post>
	</speaker>
	<speaker>
		<post>
			<title>
				3 عنوان
			</title>
			<content>
				لوریم ایپسوم 3 ...
			</content>
		</post>
	</speaker>
</speakers>

نکته: در ساختار «ایکس ام ال» حتما باید از تگ های speakers و speaker استفاده شود

حال روش استفاده از «ایکس ام ال» در Ajax چگونه است؟

اول ساختار html را وارد صفحه میکنیم

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="post">
		<header>
			
		</header>
		<section>
			
		</section>
	</div>
	<script>
		
	</script>
</body>
</html>

حال که ساختار html را نوشتید باید شی XMLHttpRequest را فراخوانی کنید و فایل XML باز کنید، من در کد زیر فایل data.xml را باز کردم

var Request = new XMLHttpRequest;
Request.open('GET', 'data.xml', true)

Request.onreadystatechange = function() {
	if(Request.readyState == 4 && Request.status == 200) {
		
	}
}

Request.send()

برای دریافت راحت اطلاعات از یک متغیر استفاده میکنیم و دیگر نیازی نیست responseXML را وارد کنیم

کد های زیر را در آکولاد if مینویسیم*

var XMLData = Request.responseXML;

ما میخواهیم از تگ post محتوای داخل تگ های title و content را دریافت کنیم، برای این کار باید به این تگ ها هم دسترسی داشته باشیم

var dataTitle = XMLData.getElementsByTagName('title');
var dataContent = XMLData.getElementsByTagName('content');

چون قرار هست محتوا را در تگ های header و section نمایش بدیم باید کلید دست رسی آن را بنویسید

var post = document.getElementById('post')
var header = post.getElementsByTagName('header')[0]
var section = post.getElementsByTagName('section')[0]

برای دریافت دیتا از xml شما باید شماره ی شیء را وارد کنید و innerHTML آن را دریافت کنید

مثال:

header.innerHTML = dataTitle[0].innerHTML;
section.innerHTML = dataContent[0].innerHTML;

نتیجه کد های بالا:

عنوان 1
لوریم ایپسوم 1 ...

Ajax با گرفتن دیتا از تگ های title و content توانست اطلاعات را در تگ های header و section نمایش بده

یعنی در اینجا «ایکس ام ال» مانند یک دیتا بیس عمل میکند

برای تمرین به شما پیشنهاد میشود که برنامه ای را طراحی کنید که شامل عنوان، عکس و محتوا باشد و زمانی که به فایل «ایکس ام ال» محتوایی اضافه کنید در صفحه نمایش پیدا کند

دوستان این جلسه هم به پایان رسید، خوشحال میشم که ما را با کامنت های تان همراهی کنید

اگر سوال برایتان پیش اومده حتما در کامنت ها یا در گروه تلگرام ما سوالتون را بپرسید

امیدوارم این جلسه برایتان مفید بوده باشد خداحافظ

0 0 vote
Article Rating
Subscribe
اطلاع از
guest
0 Comments
Inline Feedbacks
View all comments