درخواست آموزش اسكريپت آجاكس

[BANDIT]

سلام به همه دوستان عزيز
در خواست هاي آموزش اسكريپت آجاكس خود را در اين تالار بگوئيد و در تالار آموزش اسكريپت آجاكس دريافت كنيد


براي درخواست اسكريپت به تاپيك و براي درخواست آموزش يك اسكريپت به اين تاپيك برويد
همچنين براي دريافت اسكريپت هاي در خواستي خود به تاپيك و براي مشاهده آموزش اسكريپتهاي خواسته شده به تاپيك برويد
با تشكر
Bandit

 

[teamnet]

نقل قول:
نویسنده alishafiee مشاهده پست
دوست عزیز با توجه به این که سوال شما برای بسیاری از کاربران دیگر هم پیش آمده من سعی می کنم به صورت کاملا ابتدایی و ساده برای شما و بقیه توضیح بدم .

البته برای این کار روش های زیادی هست و من سعی می کنم یکی از ساده ترین روش ها را برای شما توضیح بدهم :

برای شروع قبل از </head> در فایل اصلی سایتتون ( فایل default.asp و یا فایل index ) اسکریپت زیر را قرار دهید ، البته شما می توانید این اسکریپت را در یک فایل بصورت sample.js هم ذخیر کنید و سپس این فایل را در فایل اصلی فراخوانی کنید :

کد HTML:

<script type="text/javascript">
<!--
var xmlHttp;
function createRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}

function page(url){
createRequest();
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = updatepage;
xmlHttp.send(null);
}

function updatepage(){
document.getElementById('page').innerHTML = "<div><img src='loading.gif'><br>Requesting Content ...</div>"
if(xmlHttp.readyState == 4){
document.getElementById('page').innerHTML = xmlHttp.responseText
}
}
//-->
</script>

و اما توضیحاتی که فکر می کنم به درد شما بخوره :

1. اگر توجه کنید در کد بالا قسمتی شبیه به <div><img src='loading.gif'><br>Requesting Content ...</div> وجود دارد ، این قسمت مربوط به پیامی است که هنگام لود شدن صفحه به شما نمایش داده می شود شما می توانید این پیام را بصورت دلخواه تغییر دهید .

2. این کد در صفحه شما به دنبال لایه یا جدولی با شناسه page می گردد و محتویات مورد نظر شما را جایگزین محتوای آن لایه می کند .


و اما ادامه کار :

حالا در صفحه قسمتی که نیاز است تغییر کند را درون یک لایه یا جدول به صورت زیر قرار دهید :

کد HTML:

<div id="page">

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

</div>

در ادامه شما باید صفحات دیگر سایت را طراحی کنید برای مثال یک صفحه با نام news.asp ایجاد و سورس های مربوط به اخبار سایت خود را درون آن قرار دهید .

حالا یک لینک بصورت زیر ایجاد کنید :

کد HTML:

<a href="#" onclick="page('news.asp');">اخبار</a>

کلیک روی این لینک باعث خواهد شد تا محتویات فایل news.asp به جای هر آنچه در <div id="page"> وجود دارد قرار گیرد.

شما می توانید برای سایر صفحات نیز از این روش استفاده کنید .

البته همان طور که گفتم این ابتدایی ترین روش برای استفاده از ای جکس است و عملا بهترین استفاده از ای جکس زمانی است که از آن برای تبادل اطلاعات از بانک داده استفاده شود .




دوست عزیزم با تشکر از راهنمایی شما من تونستم سایت خودم رو با این روش به آژاکس پایه تبدیل کنم ...


اما در مورد وبلاگم در بلاگفا وقتی کد ها رو در جاهای خودش قرار می دم به جای جای گذاری مطالب کله صفحه در بخش مطالب نمایش داده می شود لطفا راهنمایی کنین در وبلاگ به چه صورت باید قرار بدم ...


ممنون

 

[BANDIT]

بيشتر توضيح بدهيد

 

[iran480]

لطفاً کدها رو داخل تگ

 بزارید تا درست نمایش داده بشن.
با تشکر

 

[teamnet]

دوباره سلام

با توجه به این تاپیک http://forum.majidonline.com/showthread.php?t=73442&page=9

و پست شماره 85 لطفا راهنمایی کنین که چطور میتونم قالب وبلاگم رو در بلاگفا به آژاکس تبدیل کنم .. ؟

البته من کدها رو توی قالب بلاگ جا گذاری کردم اما بجاری لود مطالب کله صفحه لود میشه ... !!

 

[I.NoBody]

سلام.
لطفاً یه اسکریپت خلاصه از نحوه ارسال اطلاعات فرم با متد Post توسط Ajax و دریافتش در فایل مقصد و اعلام نتیجه پردازش بنویسید.
با متد Get رو می تونم بفرستم.
تشکر پیشاپیش

 

[farik]

با سلام ميتونين از اين اسكريپت استفاده كنيد:
سمت كلاينت:

<script>
function ajax(page,val)
{
re=createXHR();
re.open("POST",page,true);
re.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
re.send(val);
re.onreadystatechange=function(){
if(re.readyState==4){alert(re.responseText);}
}
}
ajax("my.php","name=far");
</script>

my.php:

<?php
$name=$_POST['name'];
print($name);
?>

به اميد موفقيت:TabOTab Design

 

[I.NoBody]

متشکر ولی اگه میشه، کد کامل ( یعنی فانکشن createXHR ) رو بذارید.

 

[farik]

شرمنده ...ببخشيد اون رو فراموش كردم اينم از فانكشن:

function createXHR() {
var request = false;
try {
request = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (err2) {
try {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (err3) {
try {
request = new XMLHttpRequest();
}
catch (err1) {
request = false;
}
}
}
return request;
}

 

[I.NoBody]

مشکلم حل نشده.
من کدمو میذارم. زیاد نیست. لطفاً یه نگاهی بندازید.
Form Page :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div style="width: 100%; float: right;">
<!--<form name=sections_form action="?act=new_do" method="POST" onsubmit="javascript:return sections_check_new_form(this);">-->
<input type="hidden" name="sent" value="yes">
<table align="right" class="gl_comtbl" dir="rtl" cellspacing="0">
<tr>
<td width="75" valign="top">عنوان بخش :</td>
<td width="200" valign="top"><input name="title" id="title" dir="rtl" size="30" maxlength="100"></td>
<td width="60" valign="top">توضیحات :</td>
<td><textarea name="description" id="description" cols="80" rows="5"></textarea></td>
<td><input type="button" class="golshan_comfrm" value=": افزودن بخش :" onclick="sections_new_do('components/sections/');"></td></tr>
</tr>
</table>
<!--</form>-->
</div><hr>
</body></html>

<script language=javascript>
var global_pageUrl;
var http=global_getHttp();

//===========================================================
function global_getHttp(){
	var xmlHttp;
	try{
		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch(e){
		try{
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(e){
			try {
				xmlHttp = new XMLHttpRequest();
			}
			catch (e) {
				xmlHttp = false;
			}

		}
	}
	return xmlHttp;
}

//===========================================================

//==============================================================
function sections_new_do(){
	var sections_new_values=new Array();
	ttl=document.getElementById('title');
	sections_new_values[0]=ttl.value;
	if(!sections_new_values[0]){
		alert("عنوانی برای افزودن تایپ نشده است");
		ttl.focus();
		return false;
	}
	desc=document.getElementById('description');
	sections_new_values[1]=desc.value;
	//alert(http);
	http.open("POST","insert.php",true);
	http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");          	http.send(sections_new_values);
	http.onreadystatechange=sections_getAnswer;
}
//==============================================================
function sections_getAnswer(){
	if(http.readystate==4){
		r=http.responseText;
		alert(r);
	}
}


</script>

Insert Page :

<?php
echo "<pre>";
print_r($_POST);
echo "</pre>";

?>

Tnx

 

[I.NoBody]

مشکلم حل شد.
از همگی متشکرم

 

[amir-haghighi]

به یاد او::

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

من که چند باری سرچیدم اما چیزی ندیدم.

میخواستم بدونم این چطور میشه کاری کرد که کادرهای متنی در صفحاعت دراگ بشن؟

حتما منظور من رو متوجه شدید.خوب حتما در صفحات کاملا ایجکس دیدید که میشه عناصر صفحات رو دراگ کرد و به محل مورد نظر برد.

من چند تا از این صفحات رو ریسورس کردم و حتی چند تا نمونه سورس کد گیر آوردم اما حد اقل 200 خط فقط جاوا اسکریپت داشت.

مثلما برای یاد گرفتن یک همچین طراحی فهم 200 خط کد یه کم سخت و غیر معقولانست!

لطفا اگه میشه دوستان من رو در این زمینه راهنمایی کنند.

با تشکر.

 

[parsinet]

شرمنده ...ببخشيد اون رو فراموش كردم اينم از فانكشن:

سلام این تابع چه کاری انجام میده ؟
مگه اسکریپت اولی به تنهایی کافی نیست ؟

function createXHR() {
var request = false;
try {
request = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (err2) {
try {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (err3) {
try {
request = new XMLHttpRequest();
}
catch (err1) {
request = false;
}
}
}
return request;
}

 

[amir-haghighi]

به یاد او::

کسی نیست جواب ما رو بده؟!!!!!

 

[farik]

با سلام ...
در جواب آقاي پارسي نت بايد بگم نه چون ابتدا بايد يك شي xmlhttprequest بسازيم كه تو مرورگر هاي مختلف متفاوته براي همين هم از اين فانكشن براي ساخت اون استفاده ميكنيم....
در جواب آقاي امير حقيقي هم بايد بگم براي اينكار من يك كد دارم كه همونطور كه گرفتيد حدود 200-300 و بلكن بيشتره كه اگه خوايتين از اينجا ببينيدش...
يك كد هم خودم نوشتم كه كمتره .اينم از اون:

<html dir="rtl">

<body id=body >
<script>
var n=(document.all)?0:1;
tr=new Array();
if(n){ document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP)}
document.onmousemove=move;
function getElementByclass(class_name)
{ rt=new Array();
var j,a;
j=0;
a=document.getElementsByTagName('*');
for(i=0;i<a.length;i++)
{
if(a.className==class_name){rt[j]=document.getElementsByTagName('*');j++}
}

return rt;
}

function move(e)
{
if(n){x=e.pageX}else{x=event.x}
if(n){y=e.pageY}else{y=event.y}
movers=getElementByclass('move');

for(i=0;i<movers.length;i++)
{
if(tr[movers.id]){
m=movers;
he=m.offsetHeight;
wi=m.offsetWidth;
m.style.left=x-(wi/2);
m.style.top=y-(he/2);
}
}

}
function add()
{
color=prompt("what is your color?",'black');
init=prompt("what is the passage in it?",' ');
id=prompt("what is its id?",'nothing');
if(!color){color="black";}
if(!init){init=" ";}
if(!id){id="Imam";}
a='<div onmousedown="tr[this.id]=true;" onmouseup="tr[this.id]=false;" class=move id='+id+' style="height:88px;width:204px;background:'+color+';position:absolute;cursor:move;">'+init+'</div>';
document.getElementById('body').innerHTML+=a;
tr[id]=false;
}
function start_move()
{
movers=getElementByclass('move');
for(i=0;i<movers.length;i++)
{
tr[movers.id]=false;
movers.style.position='absolute'
movers.style.cursor='move';
}
}
setTimeout('start_move();',10);
</script>
<div onmousedown='tr[this.id]=true' onmouseup=tr[this.id]=false; id=farshad class=move style="height:88px;width:204px;background:black;">
eraseraser</div>
<div onmousedown='tr[this.id]=true' onmouseup=tr[this.id]=false; id=farzan class=move style="background:red;">
wsadasdfaefwaef</div>
</div>
<div onclick="add();">asdasd
</div>

</body>

</html>