Форум

Data.BG Форуми: AJAX. Принцип на работа и примери. Превод от w3schools.com - Data.BG Форуми

Прехвърляне към съдържание

  • (6 Страници) +
  • 1
  • 2
  • 3
  • 4
  • Последна »
  • Вие не можете да започнете нова тема
  • Вие не може да отговаряте на тази тема

AJAX. Принцип на работа и примери. Превод от w3schools.com

#21
Потребителят е неактивен   jordanjambazov 

  • Група: Потребители
  • Мнения: 828
  • Регистриран: 05-February 06
  • Репутация: 1
  • Пол:Мъж
  • Град:София
http://www.ajaximpac...m/tutorials.php
Тук има интересни примери с AJAX.
Няма да крия, че съм малко разочарован, че няма интерес.
0

#22
Потребителят е неактивен   abozhilov 

  • Група: Потребители
  • Мнения: 3573
  • Регистриран: 07-February 06
  • Репутация: 5
Интерес поне според мен няма, защото няма хубави въпроси в темата и няма какво да дискутираме.Повечето материали сме ги виждали.Та ако има хубави въпроси и кодове ще има дискусия.
Пък и като гледам хората когато имат проблеми с AJAX си пускат нова тема и така се пръскат въпросите, съответно и решението на проблемите.
0

#23
Потребителят е неактивен   jordanjambazov 

  • Група: Потребители
  • Мнения: 828
  • Регистриран: 05-February 06
  • Репутация: 1
  • Пол:Мъж
  • Град:София
RSS Reader
Съдържа 3 файла:
1. Проста HTML форма
2. JavaScript
3.PHP

HTML форма
Това е HTML файла, съдържа проста HTML форма и връзка към JavaScript-a.

<html>

<head>

<script type="text/javascript" src="getrss.js"></script>

</head>

<body>



<form> 

Select an RSS-Feed:

<select onchange="showRSS(this.value)">

<option value="Google">Google News</option>

<option value="MSNBC">MSNBC News</option>

</select>

</form>



<p><div id="rssOutput">

<b>RSS Feed will be listed here.</b></div></p>

</body>

</html>


JavaScript кода (getrss.js)


var xmlHttp



function showRSS(str)

 { 

 xmlHttp=GetXmlHttpObject()

 if (xmlHttp==null)

  {

  alert ("Browser does not support HTTP Request")

  return

  }

 var url="getrss.php"

 url=url+"?q="+str

 url=url+"&sid="+Math.random()

 xmlHttp.onreadystatechange=stateChanged 

 xmlHttp.open("GET",url,true)

 xmlHttp.send(null)

 }



function stateChanged() 

 { 

 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

  { 

  document.getElementById("rssOutput")

  .innerHTML=xmlHttp.responseText 

  } 

 }



function GetXmlHttpObject()

{

var xmlHttp=null;

try

 {

 // Firefox, Opera 8.0+, Safari

 xmlHttp=new XMLHttpRequest();

 }

catch (e)

 {

 // Internet Explorer

 try

  {

  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

  }

 catch (e)

  {

  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

 }

return xmlHttp;

}


PHP файлът (getrss.php)


<?php

//get the q parameter from URL

$q=$_GET["q"];



//find out which feed was selected

if($q=="Google")

 {

 $xml=("http://news.google.com/news?ned=us&topic=h&
output=rss");

 }

elseif($q=="MSNBC")

 {

 $xml=("http://rss.msnbc.msn.com/id/3032091/device/
rss/rss.xml");

 }



$xmlDoc = new DOMDocument();

$xmlDoc->load($xml);



//get elements from "<channel>"

$channel=$xmlDoc->getElementsByTagName('channel')
->item(0);

$channel_title = $channel->getElementsByTagName('title')

->item(0)->childNodes->item(0)->
nodeValue;

$channel_link = $channel->getElementsByTagName('link')

->item(0)->childNodes->item(0)->
nodeValue;

$channel_desc = $channel->getElementsByTagName('description')

->item(0)->childNodes->item(0)->
nodeValue;



//output elements from "<channel>"

echo("<p><a href='" . $channel_link

 . "'>" . $channel_title . "</a>");

echo("<br />");

echo($channel_desc . "</p>");



//get and output "<item>" elements

$x=$xmlDoc->getElementsByTagName('item');

for ($i=0; $i<=2; $i++)

 {

 $item_title=$x->item($i)->getElementsByTagName(
'title')

 ->item(0)->childNodes->item(0)->
nodeValue;

 $item_link=$x->item($i)->getElementsByTagName(
'link')

 ->item(0)->childNodes->item(0)->
nodeValue;

 $item_desc=$x->item($i)->getElementsByTagName(
'description')

 ->item(0)->childNodes->item(0)->
nodeValue;



 echo ("<p><a href='" . $item_link

 . "'>" . $item_title . "</a>");

 echo ("<br />");

 echo ($item_desc . "</p>");

 }

?>


DEMO

Източник: Webmake.ORG (MGDev=lebronfanjames)
0

#24
Потребителят е неактивен   jordanjambazov 

  • Група: Потребители
  • Мнения: 828
  • Регистриран: 05-February 06
  • Репутация: 1
  • Пол:Мъж
  • Град:София
PHP & AJAX: Скрипт за анкета
Съдържа 4 файла.
1.Лесна HTML форма
2.JavaScript
3.PHP файл
4.Текстов файл за съхранение на резултатите

HTML формата
Съдържа само проста HTML форма и връзка към JavaScript-a.

<html>

<head>

<script src="poll.js"></script> 

</head>

<body>



<div id="poll">

<h2>Do you like PHP and AJAX so far?</h2>



<form>

Yes: 

<input type="radio" name="vote" 

value="0" onclick="getVote(this.value)">

<br>No: 

<input type="radio" name="vote" 

value="1" onclick="getVote(this.value)">

</form>

</div>



</body>

</html>


Текстовият файл (poll_result.txt)
Първото число е за Yes, а второто за NO.

0||0


JavaScript (poll.js)

var xmlHttp



function getVote(int)

{

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)

 {

 alert ("Browser does not support HTTP Request")

 return

 } 

var url="poll_vote.php"

url=url+"?vote="+int

url=url+"&sid="+Math.random()

xmlHttp.onreadystatechange=stateChanged 

xmlHttp.open("GET",url,true)

xmlHttp.send(null)

} 



function stateChanged() 

{ 

 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

 { 

 document.getElementById("poll").

 innerHTML=xmlHttp.responseText;

 } 

} 



function GetXmlHttpObject()

{ 

var objXMLHttp=null

if (window.XMLHttpRequest)

 {

 objXMLHttp=new XMLHttpRequest()

 }

else if (window.ActiveXObject)

 {

 objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

 }

return objXMLHttp

}


PHP файл (poll_vote.php)


<?php

$vote = $_REQUEST['vote'];



//get content of textfile

$filename = "poll_result.txt";

$content = file($filename);



//put content in array

$array = explode("||", $content[0]);

$yes = $array[0];

$no = $array[1];



if ($vote == 0)

 {

 $yes = $yes + 1;

 }

if ($vote == 1)

 {

 $no = $no + 1;

 }



//insert votes to txt file

$insertvote = $yes."||".$no;

$fp = fopen($filename,"w");

fputs($fp,$insertvote);

fclose($fp);

?>



<h2>Result:</h2>

<table>

<tr>

<td>Yes:</td>

<td>

<img src="poll.gif"

width='<?php echo(100*round($yes/($no+$yes),2)); ?>'

height='20'>

<?php echo(100*round($yes/($no+$yes),2)); ?>%

</td>

</tr>

<tr>

<td>No:</td>

<td>

<img src="poll.gif" 

width='<?php echo(100*round($no/($no+$yes),2)); ?>'

height='20'>

<?php echo(100*round($no/($no+$yes),2)); ?>%

</td>

</tr>

</table>


DEMO

Източник: Webmake.ORG (MGDev)
0

#25
Потребителят е неактивен   pikap 

  • Група: Потребители
  • Мнения: 1931
  • Регистриран: 20-December 04
  • Репутация: -3
  • Град:Tilburg, Holland
за анкетата какво да променя, за да ползвам повече отговори?
0

#26
Потребителят е неактивен   akolevutd 

  • Група: Потребители
  • Мнения: 1294
  • Регистриран: 28-May 06
  • Репутация: 0
  • Град:Ебнево

pikap каза:

за анкетата какво да променя, за да ползвам повече отговори?

и няма да е лошо и да може да се гласува само веднъж от едно ИП в нея
0

#27
Потребителят е неактивен   lebronfanjames 

  • Група: Потребители
  • Мнения: 964
  • Регистриран: 19-February 06
  • Репутация: 0
  • Пол:Мъж
  • Град:София

pikap каза:

за анкетата какво да променя, за да ползвам повече отговори?


1.HTML-формата, мисля че ще можеш да се справиш!
2.Текстовия файл трябва да да стане така

0||0||0||0

Това е за 4 отговора. Колкото отговора има анкетата толкова нули трябва да сложиш, като ги отделиш с || .
3.Променяш PHP файла.
3.1.Първо създаваш променливи за отговорите
$yes = $array[0];
$no = $array[1];
$otgovor3 = array[2];
$otgovor4 = array[3];
(Не забравяй, че в HTML формата трябва да сложиш за всеки отговор value="nomeravkvadratniteskobi" )
3.2.Следащата стъпка е да направиш това за всеки отговор:
if ($vote == 0)

 {

 $yes = $yes + 1;

 }

Трябва само да промениш променливата на двете места, в случая е $yes , с тази която си създал от точка 3.1.
3.3.Следващото нещо, което трябва да направиш е промяната на този ред
$insertvote = $yes."||".$no;
като само трябва да добавиш останалите променливи, които си създал, отделени с ."||".
3.4.Трябва да добавиш това
<tr>

<td>Yes:</td>

<td>

<img src="poll.gif"

width='<?php echo(100*round($yes/($no+$yes+$otgovor3+$otgovor4)
,2)); ?>'

height='20'>

<?php echo(100*round($yes/($no+$yes+$otgovor3+$otgovor4)
,2)); ?>%

</td>

</tr>

за всеки отговор, като промениш променливата преди наклонената черта и на двете места, както и това $no+$yes+$otgovor3+$otgovor4 като замениш променливите с тези които си създал (на двете места в скобите).
JavaSript-a няма нужда от промяна.Това е. :)
0

#28
Потребителят е неактивен   pikap 

  • Група: Потребители
  • Мнения: 1931
  • Регистриран: 20-December 04
  • Репутация: -3
  • Град:Tilburg, Holland
lebronfanjames мерси, и аз се сетих за това, но по-късно. А това за забрана за гласуване от 1 ип.. може би в пхп-то трябва да се добави ? Но тогава ще изисква евентуално и ДБ
0

#29
Потребителят е неактивен   jordanjambazov 

  • Група: Потребители
  • Мнения: 828
  • Регистриран: 05-February 06
  • Репутация: 1
  • Пол:Мъж
  • Град:София
Скрипт за показване на IP адрес. Подходящ е за статични уеб сайтове, сървърите на които не поддържат server-side език.

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>

		<title></title>

		<style type="text/css">

			body, html {

				margin: 0;

				padding: 0;

				font-family: verdana, sans-serif;

				font-size: 11px;

			}

		</style>

		<script type="text/javascript">

			var xmlHttp



			function showIP()

			{

			xmlHttp=GetXmlHttpObject()

				if (xmlHttp==null)

				{

				alert ("Browser does not support HTTP Request")

				return

				}

			var url="get_ip.php"

			xmlHttp.onreadystatechange=stateChanged

			xmlHttp.open("GET",url,true)

			xmlHttp.send(null)

			}



			function stateChanged()

			{

				if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

				{

				document.getElementById("txtHint").innerHTML=xmlHttp.
responseText

				}

			}



			function GetXmlHttpObject()

			{

			var objXMLHttp=null

				if (window.XMLHttpRequest)

				{

				objXMLHttp=new XMLHttpRequest()

				}

				else if (window.ActiveXObject)

				{

				objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

				}

			return objXMLHttp

			}

			

			window.onload = showIP();

		</script>

	</head>

	<body>

		<center>

		<br />

		<div id="txtHint"></div>

		</center>

	</body>

</html>


get_ip.php

<?

	echo $_SERVER[REMOTE_ADDR];

?>


DEMO

Можете да използвате файлът качен на сървъра на Webmake.ORG


Script By: Webmake.ORG

0

#30
Потребителят е неактивен   sandh 

  • Група: Потребители
  • Мнения: 8748
  • Регистриран: 11-August 04
  • Репутация: 120
  • Пол:Мъж
  • Град:София
jordanjambazov - примера с ip адреса не е много добър.

Ако сървъра няма поддръжка на php дали ip-то ще се извежда от външен файл няма значение (всъщност е по-лошия вариант), а ако php-то е на друг сървър, ajax ще може да го отвори само през IE.

Смисъла на скрипта далеч не е този предполагам (да се изведе ip адрес), колкото да се покаже работа с ajax, но мисля, че уточнението е на място (за да няма заблудени)
0

#31
Потребителят е неактивен   abozhilov 

  • Група: Потребители
  • Мнения: 3573
  • Регистриран: 07-February 06
  • Репутация: 5
@sandh съгласен съм и аз, че това не е много добър пример, това е безмислено използване на AJAX, като това се води като един от недостатъците на технологията, но това по-скоро е недостатъка на програистите които използват технологията.
В един друг форум когато някой не знае как да имплементира нещо било то с JavaScript или PHP и първият въпрос в темата му е, "Това няма ли да може да стане с AJAX".
Малко оф топик :)
@jordanjambazov браво че си указвате източниците на кодовете, на мен лично не ми е за мойте глупави скриптове, защото не съм открил топлата вода, но е един от малкото сайтове в които на всеки код е указан източника.
Поздравления :)
0

#32
Потребителят е неактивен   FarmDve 

  • Група: Потребители
  • Мнения: 6504
  • Регистриран: 14-March 06
  • Репутация: 111
  • Пол:Мъж
  • Град:Ямбол
да ве има една AJAX poll system
i5-4670k, ASRock Z87 Pro4, Gigabyte GTX 760 Windforce3x+Sapphire HD5850+ASUS EAH5870, Chieftec 600w, 2x1GB Kingmax 1333MHz+1GB A-data, WD Caviar Blue 640GB, LG Flatron W2261VP-PF, Cooler Master Hyper 212+

Bitcoin miner since April 2011.
0

#33
Потребителят е неактивен   lebronfanjames 

  • Група: Потребители
  • Мнения: 964
  • Регистриран: 19-February 06
  • Репутация: 0
  • Пол:Мъж
  • Град:София
Този скрипт съдържа:
[list]
[*]Проста HTML форма
[*]JavaScript
[*]PHP файл
[*]XML документ
[list]

HTML ФОРМА
Това е HТML файла, който съдържа само проста HTML форма и връзка към JavaScript-a.


<html>

<head>

<script src="livesearch.js"></script> 

<style type="text/css"> 

#livesearch

  { 

  margin:0px;

  width:194px; 

  }

#txt1

  { 

  margin:0px;

  } 

</style>

</head>

<body>



<form>

<input type="text" id="txt1" size="30"

onkeyup="showResult(this.value)">



<div id="livesearch"></div>

</form>



</body>

</html>


JavaScript (livesearch.js)



var xmlHttp



function showResult(str)

{

if (str.length==0)

 { 

 document.getElementById("livesearch").

 innerHTML="";

 document.getElementById("livesearch").

 style.border="0px";

 return

 }



xmlHttp=GetXmlHttpObject()



if (xmlHttp==null)

 {

 alert ("Browser does not support HTTP Request")

 return

 } 



var url="livesearch.php"

url=url+"?q="+str

url=url+"&sid="+Math.random()

xmlHttp.onreadystatechange=stateChanged 

xmlHttp.open("GET",url,true)

xmlHttp.send(null)

} 



function stateChanged() 

{ 

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

 { 

 document.getElementById("livesearch").

 innerHTML=xmlHttp.responseText;

 document.getElementById("livesearch").

 style.border="1px solid #A5ACB2";

 } 

}



function GetXmlHttpObject()

{

var xmlHttp=null;

try

 {

 // Firefox, Opera 8.0+, Safari

 xmlHttp=new XMLHttpRequest();

 }

catch (e)

 {

 // Internet Explorer

 try

  {

  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

  }

 catch (e)

  {

  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

 }

return xmlHttp;

}


PHP файл (livesearch.php)



<?php

$xmlDoc = new DOMDocument();

$xmlDoc->load("links.xml");



$x=$xmlDoc->getElementsByTagName('link');



//get the q parameter from URL

$q=$_GET["q"];



//lookup all links from the xml file if length of q>0

if (strlen($q) > 0)

{

$hint="";

for($i=0; $i<($x->length); $i++)

 {

 $y=$x->item($i)->getElementsByTagName('title'
);

 $z=$x->item($i)->getElementsByTagName('url'
);

 if ($y->item(0)->nodeType==1)

  {

  //find a link matching the search text

  if (stristr($y->item(0)->childNodes->
item(0)->nodeValue,$q))

   {

   if ($hint=="")

	{

	$hint="<a href='" . 

	$z->item(0)->childNodes->item(0)-
>nodeValue . 

	"' target='_blank'>" . 

	$y->item(0)->childNodes->item(0)-
>nodeValue . "</a>";

	}

   else

	{

	$hint=$hint . "<br /><a href='" . 

	$z->item(0)->childNodes->item(0)-
>nodeValue . 

	"' target='_blank'>" . 

	$y->item(0)->childNodes->item(0)-
>nodeValue . "</a>";

	}

   }

  }

 }

}



// Set output to "no suggestion" if no hint were found

// or to the correct values

if ($hint == "")

 {

 $response="no suggestion";

 }

else

 {

 $response=$hint;

 }



//output the response

echo $response;

?>


XML (links.xml)


<pages>



	<link>

<title>mail bg</title>

<url>http://www.mail.bg</url>

</link>



	<link>

<title>abv bg</title>



	<url>

http://abv.bg

</url>

</link>



	<link>

<title>gmail</title>

<url>http://gmail.com</url>

</link>



	<link>

<title>google</title>

<url>http://www.google.com</url>

</link>



	<link>

<title>yahoo</title>

<url>http://yahoo.com</url>

</link>



	<link>

<title>data.bg</title>

<url>http://data.bg</url>

</link>



	<link>

<title>w3schools</title>

<url>http://www.w3schools.com/</url>

</link>



	<link>

<title>webmake</title>

<url>http://www.webmake.org</url>

</link>

</pages>


Както може би сте забелязали в xml документа се дават линкове за търсените резултати, а между таговте <title> се слагат думите, за които ще се търси и общотот намерено.В демото ще видите за какво говоря.

DEMO

Забележка: в момента можете да търсите само в 8 резултата. Можете да търсите само за думите, написани в таговете <title> в последния код.

Източник: w3schools.com
0

#34
Потребителят е неактивен   debelin 

  • Група: Потребители
  • Мнения: 2951
  • Регистриран: 28-July 06
  • Репутация: 16
  • Град:В сърцето на всяка филия
Имам няколко въпросчета:

1. AJAX-а само xml ли може да обработва или и стандартни PHP масиви.
А прав текст дали може?
2. Как се инициализира този xmlhttp обект.
3. С PHP или с ASP се държи по-добре AJAX-а.
4. Какво е това - DOMDocument();
5. Само чрез GET ли могат да се пускат параметри към сървърния файл?
Благодаря
:)
http://filoproject.eu/ - top level protection for your Blackberry device!
0

#35
Потребителят е неактивен   pikap 

  • Група: Потребители
  • Мнения: 1931
  • Регистриран: 20-December 04
  • Репутация: -3
  • Град:Tilburg, Holland
айакс може и с пхп / има дадени примери на 1вата страница/.

може и с Post / май/ ще чакам jordanjambazov и компания да се изкажат :)
0

#36
Потребителят е неактивен   sandh 

  • Група: Потребители
  • Мнения: 8748
  • Регистриран: 11-August 04
  • Репутация: 120
  • Пол:Мъж
  • Град:София

debelin каза:

Имам няколко въпросчета:

1. AJAX-а само xml ли може да обработва или и стандартни PHP масиви.
А прав текст дали може?
2. Как се инициализира този xmlhttp обект.
3. С PHP или с ASP се държи по-добре AJAX-а.
4. Какво е това - DOMDocument();
5. Само чрез GET ли могат да се пускат параметри към сървърния файл?
Благодаря
:)
1,3 - ajax е javascript => е клиентска технология. Няма абсолютно никакво отношение със сървърните езици.
2,5 - пише ги в темата. Може и POST
4 - DOM=Document Object Model - мисля, че превод от английски само може да те обърка
0

#37
Потребителят е неактивен   FarmDve 

  • Група: Потребители
  • Мнения: 6504
  • Регистриран: 14-March 06
  • Репутация: 111
  • Пол:Мъж
  • Град:Ямбол
Ajax е наистина много добър javascript наистина много добър
i5-4670k, ASRock Z87 Pro4, Gigabyte GTX 760 Windforce3x+Sapphire HD5850+ASUS EAH5870, Chieftec 600w, 2x1GB Kingmax 1333MHz+1GB A-data, WD Caviar Blue 640GB, LG Flatron W2261VP-PF, Cooler Master Hyper 212+

Bitcoin miner since April 2011.
0

#38
Потребителят е неактивен   debelin 

  • Група: Потребители
  • Мнения: 2951
  • Регистриран: 28-July 06
  • Репутация: 16
  • Град:В сърцето на всяка филия
Sandh, в примера на lebronfanjames доколкото разбирам скрипта кореспондира и получава информация от файл с разширение php, което силно ме кара да мисля, че все пак ajax има някакво отношение със сървърни езици.

Имайки предвид, че задавам въпроси - очаква се да съм прочел темата и да не съм намерил отговори, които ми трябват, което може би е резултат от моята некомпетентност по въпросите с ajax.


Мерси все пак :)
http://filoproject.eu/ - top level protection for your Blackberry device!
0

#39
Потребителят е неактивен   sandh 

  • Група: Потребители
  • Мнения: 8748
  • Регистриран: 11-August 04
  • Репутация: 120
  • Пол:Мъж
  • Град:София
Ами питай по-конкретни въпроси. Мисля, че в темата е описано доста подробно как се инициализира xmlhtttp обекта. Ако има нещо неясно попитай по-конкретен въпрос.

По отношение на сървърните езици - не, няма никакво значение. Ajax просто прочита файл и може да върне чист текст или да се опита да парсне този текст като xml. Друг въпрос е ако файлът е генериран от някакъв скрипт - просто така се постига динамичност.
0

#40
Потребителят е неактивен   abozhilov 

  • Група: Потребители
  • Мнения: 3573
  • Регистриран: 07-February 06
  • Репутация: 5
Самия AJAX ти дава възможност да направиш рикуест без да ти се налага да чакаш рефреша.Та това те интересува теб.Разбира се файла към който се прави рикуест има значение след това когато се върне информацията дали ще се налага да се парсва XML или директно ще получиш текст или пък JSON обект.
0

Споделете тази тема чрез:


  • (6 Страници) +
  • 1
  • 2
  • 3
  • 4
  • Последна »
  • Вие не можете да започнете нова тема
  • Вие не може да отговаряте на тази тема

1 потребители четат тази тема
0 регистрирани потребители, 1 гости и 0 анонимни потребители


Data.BG e форум за дискусии. Data.BG не носи отговорност за съдържанието и достоверността на публикуваните в дискусиите материали.

Никаква част от съдържанието на тази страница не може да бъде репродуцирана, записвана или предавана под каквато и да е форма или по какъвто и да е повод без писменото съгласие на Data.BG.

Close  Member Login