Форум

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

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

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

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

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

  • Група: Потребители
  • Мнения: 2951
  • Регистриран: 28-July 06
  • Репутация: 16
  • Град:В сърцето на всяка филия
Здравейте отново
:)
Тук мисля, че успях да инициализирам нещо.

<script>

function GetXmlHttpObject(handler)

{

var objXMLHttp=null

if (window.XMLHttpRequest)

{

objXMLHttp=new XMLHttpRequest()

}

else if (window.ActiveXObject)

{

objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

}

return objXMLHttp

} 

var xmlHttp



function showCustomer()

{

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)

{

alert ("Browser does not support HTTP Request")

return

}

else{

	alert('Object created!');

}

}

</script>


Въпроса ми е - това ли е начина за създаване на xmlhtttp, ако да - има ли по кратък. И ако това е финалния вариант на създаване на въпросния обект - как мога да го използвам?

---> на onload викам showCustomer();

:)
http://filoproject.eu/ - top level protection for your Blackberry device!
0

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

  • Група: Потребители
  • Мнения: 3573
  • Регистриран: 07-February 06
  • Репутация: 5
За получаване на инстанция на обекта аз ползвам нещо от сорта:

	function getXmlHttpObject()

	{

		return (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

	}

	

	alert(getXmlHttpObject());

Иначе натам си боравиш с методите и хендлърите на обекта.
Хвърли един поглед на някой урок има ги описани.
0

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

  • Група: Потребители
  • Мнения: 2951
  • Регистриран: 28-July 06
  • Репутация: 16
  • Град:В сърцето на всяка филия
Благодаря abozhilov, потръгнаха нещата с твоята функция
:) . Написах прост скрипт, който взема value на поле с дадено ID и го пуска през GET с ajax към PHP файл, който файл записва текста в xml файл :) . Мисля, че стана добре и понеже по-горе имаше мнение, че темата не върви, защото няма дискусия - мисля да започнем една дискусия:).
Ето и другите ми 2 въпроса:
1. Как става изпращането на POST.
2. Как става обработката и получаването на данни от даден скрипт - т.е. ако дадено PHP чете от база данни и получи чрез POST параметър, който се ползва в заявката в клаузата WHERE и връща резултата от заявката в асоциативен масив, то как ajax-а приема и обработва резултата (масива) от заявката.

Благодаря на всички :) :)

ЕДИТ: Ето кодчето:

<script>
function getXmlHttpObject()
{
return (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
}
function debelin(param){
xmlHttp=getXmlHttpObject()
var url="debel.php"
url=url+"?string="+param
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
</script>

И в php отварям файл в w режим и пиша вътре;))
http://filoproject.eu/ - top level protection for your Blackberry device!
0

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

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

xmlHttpObject.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

След което енкодваш стойностите които ще предаваш с encodeURI()
Накрая ти остава да сложиш в един низ данните, правиш нещо от сорта:

var postArg = 'name1=' +encodeURI('value')+ '&name2=' +encodeURI('value2');

И последно предваш този низ като аргумент на send(postArg) метода на XMLHttpRequest() обекта и си готов :)
След това си ги търсиш от страна на сървъра в пост масива.

За резултатите си ги обработи от страна на сървъра и след това връщай директно с echo и ще си намериш върнатия текст в responseText пропъртито, след което ти оставя да го сложиш някъде по страницата този текст.
0

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

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



xmlHttp=getXmlHttpObject()

xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

var postArg = 'name1=' +encodeURI('value')+ '&name2=' +encodeURI('value2');

xmlHttp.open("POST","debel.php",false)


xmlHttp.send(postArg)


Това за съжаление не работи. Каде ли е грешката :) [/code]
http://filoproject.eu/ - top level protection for your Blackberry device!
0

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

  • Група: Потребители
  • Мнения: 2951
  • Регистриран: 28-July 06
  • Репутация: 16
  • Град:В сърцето на всяка филия
Защо никой не иска да ми помогне?! :)
http://filoproject.eu/ - top level protection for your Blackberry device!
0

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

  • Група: Потребители
  • Мнения: 3573
  • Регистриран: 07-February 06
  • Репутация: 5
Не е така, просто аз ти дадох основната и аз лично не съм имал проблеми с този метод.Задай си на асинхронния флаг true.Пробвай от страна на сървъра да върнеш echo $_POST['name1']; и виж в responseText какво има.
Нямам тук къде да тествам но така съм го правил преди.
0

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

  • Група: Потребители
  • Мнения: 2951
  • Регистриран: 28-July 06
  • Репутация: 16
  • Град:В сърцето на всяка филия
Error: uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIXMLHttpRequest.setRequestHeader]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://...edikoesiURL :: debelin :: line 10" data: no]


Това е "резултата". А кода който ползвам е следния:

function debelin(){

xmlHttp=getXmlHttpObject()

xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

var postArg = 'name1=' +encodeURI('value')+ '&name2=' +encodeURI('value2');

xmlHttp.open("POST","debel.php",true)


xmlHttp.send(postArg)

alert(xmlHttp.responseText)

}

:) :)


Едит: в php файла имам :
<?

echo $_POST['name1'];

?>

http://filoproject.eu/ - top level protection for your Blackberry device!
0

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

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

xmlHttp.onreadystatechange = function()

{

	  if (xmlHttp.readyState == 4 && xmlHttp.status == 200)

	  {

			alert(xmlHttp.responseText);

	  }

}

0

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

  • Група: Потребители
  • Мнения: 2951
  • Регистриран: 28-July 06
  • Репутация: 16
  • Град:В сърцето на всяка филия
Тук http://www.w3schools...om/dom_http.asp проверката за onreadystatechange се прави преди да се пусне заявка към някакво url с GET. Как мога да разбера статус на заявка преди да съм я пуснал :) . Мисля, че проблема е в xmlHttp.setRequestHeader там нещо не сме направили като хората. Според кода, който ми даде тия дни
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
май трябва да имаме форма и JS, който я обработва, т.е. това
frm=document.forms[0]

  url="add.1?a="+frm.elements['a'].value+"&
b="+frm.elements['b'].value

извадих от тук http://www.jibbering...ttprequest.html.
Оплетох се нещо :) .
http://filoproject.eu/ - top level protection for your Blackberry device!
0

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

  • Група: Потребители
  • Мнения: 3573
  • Регистриран: 07-February 06
  • Репутация: 5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
dtd">

<html>

	<head>

		<title>New Document</title>

		<script type="text/javascript">

			function getRequest(sender)

			{

				var xmlHttp = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

				xmlHttp.open('POST', 'test.php', true);

				xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

				

				xmlHttp.onreadystatechange = function()

				{

					if (xmlHttp.readyState == 4 && xmlHttp.status == 200)

					{

						alert(xmlHttp.responseText);

					}

				}

				

				xmlHttp.send(sender);

			}

			

			function getValue()

			{

				var postArg = 'name1=' + encodeURI('value1') + '&name2=' + encodeURI('value2');

				return postArg;

			}

		</script>

	</head>



	<body>

		<button onclick="getRequest(getValue())">
goo</button>

	</body>

</html>


test.php

<?php 

	print_r($_POST);

?>

Няма значение дали ще е формуляр дали сам ще си образуваш аргументите, ти в случая указваш с този хедър че ще предаваш данни.Браузъра не го боли много дали ще са данни от формуляр.
Също чрез onreadystatechange и readyState се определя кога вече е приключил рикуеста и е върнат текста респективно XML-а.

Изтегли си FireBug и си следи рикуестите, в последните версии е чекнато по дефаулт, но за всеки случай провери и ако не е го чекни.
Там може да добиеш поглед върху това какво се изпраща и какво се връща не само като съдържание но и като хедъри.
0

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

  • Група: Потребители
  • Мнения: 2951
  • Регистриран: 28-July 06
  • Репутация: 16
  • Град:В сърцето на всяка филия
Браузъра не може да го бОли щото го нема :) .
Грешката е била в последователността на процеса.
Явно трябва да е:
1. Иницииране на xmlhttp;
2. Достъпване на сървърен файл;
3. Проверка за статус;
4. Изпращане на данните;


Интересно ми е защо проверката на статуса става преди изпращане на данни?!. Явно тази проверка се отнася до това дали сървърния файл е достъпен или не е, а не за това дали данните са изпратени. Май май натам са нещата :)

Ако имаме таг с id='someid' и при проверката на onreadystatechange пуснем document.getElementById('txtHere').innerHTML = xmlHttp.responseText ще работи, но само това ли е начина за визуализиране на данни? Или това и document.write?


И последен въпрос - как се достъпва XML файл? Прочетох някой нещица тук http://www.w3schools...dom/default.asp, но мисля, че ми е нужно повече обеснение.....или по систематизирано представяне, за да се ориентирам и да си развия кода занапред.

Също така ajax може ли да достъпва файлове през http?

abozhilov, шапка ти свалям за вниманието :)



Обърнахме го на чат :) :) . Ползвам бръмбъра отдавна. ;)
http://filoproject.eu/ - top level protection for your Blackberry device!
0

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

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

EDIT: Разрових тук там и съм наясно какво представлява въпросния обект. Само не мога да схвана как се обработва той и респективно как се обработва върнат XML. Ако може малко помощ.... :)
http://filoproject.eu/ - top level protection for your Blackberry device!
0

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

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

XML се чете като от отговора на заявката се извика responseXML (във всички примери в тази статия е обсъден мисля, че само responseText метода). Та този responseXML се присвоява на идентификатор и след това се обработва по XML DOM. Т.е. той сега представлява документа и може да се обръщаш към него за да извлечеш информация.

Това е хубаво - има списък с методите, които могат да се ползват. Потърси из google - има повечко писано. Общо взето xml документа се парсва по същия начин като html документ.
0

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

  • Група: Потребители
  • Мнения: 3573
  • Регистриран: 07-February 06
  • Репутация: 5
Един простичък клас за AJAX рикуести:

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

"http://www.w3.org/TR/html4/loose.dtd">

<html>

	<head>

		<title>New Document</title>

	</head>

	<body>

		<script type="text/javascript">			

			function Ajax()

			{

				this.params = new String();

				this.headers = null;

				this.callback = null;

				this.xmlHttp = this.getInstance();

			}

			

			Ajax.prototype.getInstance = function()

			{

				return (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

			}

			

			Ajax.prototype.setRequestHeader = function(senderHeader)

			{

				this.headers = senderHeader;

			}

			

			Ajax.prototype.addHeaders = function()

			{

				for (i in this.headers)

				{

					this.xmlHttp.setRequestHeader(i, this.headers[i]);

				}

			}

			

			Ajax.prototype.addParam = function(name, value)

			{

				this.params += name + '=' + encodeURI(value) + '&';

			}

			

			Ajax.prototype.addCallback = function(callback)

			{

				this.callback = callback;

			}

			

			Ajax.prototype.parseUrlParams = function(method, url)

			{

				if (method.toUpperCase() != 'POST')

				{

					url += '?' + this.params;

					this.params = null;

				}

				

				return url;

			}

			

			Ajax.prototype.parseResponseProperty = function()

			{

				if (this.xmlHttp.getResponseHeader('Content-Type') == 'text/xml')

				{

					return 'XML';

				}

				

				return 'Text';

			}

			

			Ajax.prototype.getRequest = function(method, url, asinFlag)

			{

				this.xmlHttp.open(method, this.parseUrlParams(method, url), asinFlag);

				this.addHeaders();

				

				var self = this;

				this.xmlHttp.onreadystatechange = function(){self.getData.call(self)}
;

				this.xmlHttp.send(this.params);

			}

			

			Ajax.prototype.getData = function()

			{

				if (this.xmlHttp.readyState == 4 && this.xmlHttp.status == 200)

				{

					if (this.callback)

					{

						this.callback.call(this, this.xmlHttp['response' + this.parseResponseProperty()]);

					}

				}

			}

			

			function getAjaxData(response)

			{

				alert(response);

			}

			

			

			var AjaxPost = new Ajax();

			AjaxPost.setRequestHeader({

				'Content-type' : 'application/x-www-form-urlencoded'

			});

			AjaxPost.addParam('test0', 'test0 value');

			AjaxPost.addParam('test1', 'test1 value');

			AjaxPost.addCallback(getAjaxData);

			AjaxPost.getRequest('POST', 'test.php', true);

			

			var AjaxGet = new Ajax();

			AjaxGet.addParam('test_get_0', 'test0 value');

			AjaxGet.addParam('test_get_1', 'test1 value');

			AjaxGet.addCallback(getAjaxData);

			AjaxGet.getRequest('GET', 'test1.php', true);

		</script>

	</body>

</html>

setRequestHeader()
Посредством този метод се сетват HTTP хедърите за рикуеста.
Приема JSON обект като аргумент, в обекта хедърите се сетват:

'Content-type' : 'application/x-www-form-urlencoded',

'Pragma' : 'no-cache'


addParam(name, value)
С този метод се изпращат GET/Pоst аргументи, метода приема два аргумента:
име на параметъра, стойност

addParam('someName', 'someValue');


addCallback(functionName)
Този метод се използва за указване на функция която, да обработва върнатия резултат, функцията която обработва резултата първия и аргумент е именно върнатия резултат.

addCallback(someFunction);



function someFunction(response)

{

alert(response);

}


getRequest(method, url, asinFlag)
Най-важния метод е за осъществяване на самия рикуест, и приема три аргумента: HTTP метод, адрес на файла към който ще се прави рикуеста и асинхронния булев флаг.

За сега не съм добавял обработки на грешки, но като цяло това ще е интерфейса на клас и ако имате предложения може да ги споделите.
0

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

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

 if (empty($_GET['q'])) {

print 'Empty!';

}

$duma = addslashes(trim($_GET['q']));

$querys = " SELECT * FROM news WHERE subject LIKE '%$duma%' OR message LIKE '%$duma%' ORDER BY id DESC";

$res = mysql_query($querys)

or die("Greshka v zaqvkata:".mysql_error());





   print '<table>';

while($row = mysql_fetch_array($res)) {



	  print "<tr><td><b>".$row['subject'
]."</b></td>";

	  print "<td>".$row['message']."</td>
</tr>";

   }

   print '</table>';

?>
Но ми връща информация, чак след като натисна таб или ентър... Да не е нещо в Status-а ? А да, и как мога да сменя енкодинг на заявката?
0

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

  • Група: Потребители
  • Мнения: 8748
  • Регистриран: 11-August 04
  • Репутация: 120
  • Пол:Мъж
  • Град:София
Не разбрах много. Auto fill поле ли искаш да направиш? Ползвай някое събитие като onkeyup/onkeypress, но честно казано не е добра идея да подаваш заявка при всяко натискане на клавиш...

Кодировката на кое искаш да зададеш? Ползвай header(); в php
0

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

  • Група: Потребители
  • Мнения: 2951
  • Регистриран: 28-July 06
  • Репутация: 16
  • Град:В сърцето на всяка филия
И аз малко не разбрах какъв резултат се цели. С onkeyup/onkeypress ще стане много тежичко определено:). За енкодинга можеш да ползва iconv.
http://filoproject.eu/ - top level protection for your Blackberry device!
0

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

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

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

  • Група: Потребители
  • Мнения: 2951
  • Регистриран: 28-July 06
  • Репутация: 16
  • Град:В сърцето на всяка филия
Това което си мисля, че искаш да постигнеш съм го правил, но с предварително зареден масив от ДБ. Ако все още имаш интерес - нямам нищо против да споделя кода, ефекта си е "autocomplete", но не по начина който си предвидил ти. Anyway ако имаш интерес - драсни в темата:).
http://filoproject.eu/ - top level protection for your Blackberry device!
0

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


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

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


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

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

Close  Member Login