AJAX для ЧАЙНИКОВ (вопросы)

sc@r@bey · June 30, 2009

После дебатов в одном из своих постов начал изучать AJAX, в целом все предельно просто и понятно, но по ходу появляются вопросы, онтветы на которые буду задавать здесь в надежде получить на них ответы, заранее спасибо!

1. вопрос - в материалах звучат такие понятия как объекты, экземпляры, методы и свойства. я так понял это их ООП, кто смог бы на пальцах объяснить что эти поняти означают или дать ссылку на статью, где на пальцах объясняют, что это такое ))

2. вопрос - есть ли универсальный способ вызова объекта XMLHttpRequest, который работает во всех браузерах, пока нашел вото этот:

<script language="javascript" type="text/javascript">
var request = false;
try {
	request = new XMLHttpRequest();
	} catch (trymicrosoft) {
	  try {
		request = new ActiveXObject("Msxml2.XMLHTTP");
		  } catch (othermicrosoft) {
		try {
			request = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (failed) {
			  request = false;
			}
		}
	}
if (!request)
	alert("Error initializing XMLHttpRequest!");
</script>

пока все вызревает ряд вопросов, ограничусь пока этим.

Great Rash · June 30, 2009

Так как сам недавно начал изучать ООП, поделюсь тем что я уяснил.

Объект - это все что мы видим. Кошка, собака, человек, машина и т.п. и т.д.

В яваскрипте объектом может быть любая функция, которая была вызвана при помощи инструкции new.

Такие функции принято называть с большой буквы.

Пример:

function Car() {
	// somecode
}

new Car();

Экземпляр объекта - ну это собственно экземпляр объекта, его копия.

Ниже car1 и car2 это два экземпляра объекта Car.

Пример:

function Car() {
	// somecode
}

var car1 = new Car();
var car2 = new Car();

Свойства объекта - машина бывает желтая, красная и т.п., кошка бывает большая и маленькая - это все свойства объекта.

Пример:

function Car() {
	this.color = '#f00'; // это свойство (машина красная)
	this.mark = 'mercedes'; // это свойство (марка машины - mercedes)
}

var car1 = new Car();
alert(car1.color);
alert(car1.mark);

Методы объекта - машина ездит, кошка ходит - это и есть методы объекта.

Методы записываются либо внутри функции, либо через прототипирование.

Пример:

function Car() {
	this.color = '#f00'; // это свойство (машина красная)
	this.mark = 'mercedes'; // это свойство (марка машины - mercedes)

	this.tellMaxSpeed = function() { // метод внутри функции
		alert('my max speed = 220 km/h');
	}
}

Car.prototype.tellCarMark = function() { // прототип объекта Car
	alert('my mark is' + this.mark); // при прототипировании все свойства объекта Car доступны через this
}

var car1 = new Car();
car1.tellMaxSpeed();
car1.tellCarMark();

Если где ошибся, профи меня поправят. Правда не понятно при чем тут аякс...

Edited June 30, 2009 by Great Rash

Veseloff · June 30, 2009

А зачем лезть в такие дебри? Предположу, что для большинства (если не для всех) аяксовых вещей хватило бы jQuery и его load. Или всё настолько серьёзно?

sc@r@bey · July 1, 2009

не ожидал, спасибо

а затем что никто не может толком ничего объяснить почитай мой пост а возможно ли такое в этом разделе

Riim · July 2, 2009

1. http://javascript.ru/tutorial/object

2. http://javascript.ru/forum/project/4203-kr...ttprequest.html

sc@r@bey · July 2, 2009

ценно!

vvsh · July 2, 2009

я вот в блоге избавлялся от jquery недавно, так вот пришлось использовать вот такую кроссбраузерную функцию:

function getXmlHttp(){
	if (window.XMLHttpRequest) {
		try { xmlhttp = new XMLHttpRequest(); } catch (e){}
	} else if (window.ActiveXObject) {
		try { xmlhttp = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e){ try { xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e){}}
	}
	return xmlhttp;
}

Edited July 2, 2009 by vvsh

Riim · July 3, 2009

я вот в блоге избавлялся от jquery недавно, так вот пришлось использовать вот такую кроссбраузерную функцию:
function getXmlHttp(){
	if (window.XMLHttpRequest) {
		try { xmlhttp = new XMLHttpRequest(); } catch (e){}
	} else if (window.ActiveXObject) {
		try { xmlhttp = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e){ try { xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e){}}
	}
	return xmlhttp;
}

О ужас! Что за привычка гадить в window?

dyadya · July 3, 2009

http://www.softtime.ru/forum/read.php?id_f...6222&page=1

google.xhr = function () {
var a = null;
if (window.XMLHttpRequest) try {a = new XMLHttpRequest} catch (c) {}
else if (window.ActiveXObject)
for (var d = 0, b; b = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"] [d++];)
try {a = new ActiveXObject (b); break} catch (c) {}
return a};

sc@r@bey · July 3, 2009

вот нашел

var request  = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();

sc@r@bey · July 3, 2009

в общем начал изучать материал, в целом понятно, что не может не радовать, много надо будет изучить, взял почти готовый код, разобрал что по чем, но возникло ряд вопросов и ошибок, сам код потом вопросы ))

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional-dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Изучаем AJAX</title>

<script language="javascript" type="text/javascript">
	var request = false;
	try {
		request = new XMLHttpRequest();
			} catch (trymicrosoft) {
			try {
			request = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (othermicrosoft) {
			try {
				request = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (failed) {
				request = false;
				}
		}
	}
	if (!request)
	   alert("Error initializing XMLHttpRequest!");

	function getCustomerInfo() {
		var phone = document.getElementById("phone").value;
		var url = "/include/xtr.php?phone=" + escape(phone);
		request.open("GET", url, true);
		request.onreadystatechange = updatePage;
		request.send(null);
	}

	function updatePage() {
		if (request.readyState == 4) {
			if (request.status == 200) {
				var response = request.responseText.split("|");
				document.getElementById("order").value = response[0];
				document.getElementById("address").innerHTML = response[1].replace(/\n/g, " ");
			} else
				alert("status is " + request.status);
		}
	}
</script>
</head>
<body>
	<form action="POST">
		<p>Enter your phone number:
		<input type="text" size="14" name="phone" id="phone"
		onChange="getCustomerInfo();" />
		</p>
		<p>Your order will be delivered to:</p>
		<div id="address"></div>
		<p>Type your order in here:</p>
		<p><textarea name="order" rows="6" cols="50" id="order"></textarea></p>
		<p><input type="submit" value="Order Pizza" id="submit" /></p>
	</form>
</body>
</html>

Вопрос 1. не подгружает введенные данные, т.е. не работает, а переходит по ссылке http://xhr/POST?phone=999999999999&order=blablabla

в чем может быть ошибка?

Вопрос 2. как можно оптимизировать сей код после исправления ошибки?

Вопрос 3. где можно глубже изучить метод getElementById() ?

Вопрос 4. как происходит в данном случае обмен данными между javascript и php

Вопрос 5. как подставляется url в форму?

Думаю достаточно, спасибо!

Riim · July 3, 2009

http://citforum.ru/howto/smart-questions-ru.shtml

....
Тщательно продумайте, где именно задавать вопрос. Вас с большой вероятностью проигнорируют или спишут как неудачника, если вы:
....
3. пошлете вопрос одновременно (cross-post) во множество различных дискуссионных групп
....

Хотя я и сам так один раз делал.

sc@r@bey · July 3, 2009

Тщательно продумайте, где именно задавать вопрос. Вас с большой вероятностью проигнорируют или спишут как неудачника, если вы:
....
3. пошлете вопрос одновременно (cross-post) во множество различных дискуссионных групп

бред какой то

Riim · July 3, 2009

бред какой то

как знаешь.

sc@r@bey · July 3, 2009

как знаешь.

во-первых мы на брудершафт не пили, поэтому на Вы.

да что за теский сад гадить в постах, ответят хорошо, не ответят сам найду ответ...

а с точки зрения вышеприведенной ссылке бегать по разным форумам, выискивать одинаковые темы и потом стучать это наверное правильно!!! так держать!!! стучи дальше!!!

Riim · July 3, 2009

бегать по разным форумам, выискивать одинаковые темы и потом стучать это наверное правильно!!!

Вот мне делать больше нечего как бегать и высматривать где ты там пишешь.

во-первых мы на брудершафт не пили, поэтому на Вы.

Ни чесе, зазнался как. Ладно, на "вы" так на "вы", мне все равно.

sc@r@bey · July 3, 2009

Вот мне делать больше нечего как бегать и высматривать где ты там пишешь.
Ни чесе, зазнался как. Ладно, на "вы" так на "вы", мне все равно.

не обижайся, дружище, уже второй день несут всякую чушь, просто можно не писать и все, достали!

пока не еб..ешь меж глаз не успокоятся....

офтопп вспомнил недавно произошло в реале со мной, иду на вокзале к кассе покупать билет, проход к кассе узкий перегорадили таксиситы, демонстративно разговаривают, и краем глаза поглядывают, как их обходят люди.... (ничего не напоминает?) я как прямо шел так и подхожу к этой толпе, беру самого молодого за талию, отодвигаю и иду к кассе... они потеряли дар речи, стою спиной к ним, и чувствую затылком ко мне что-то приближается, похлопывает мнек по плечу, я оборачиваюсь, на моем лице как обычно улыбка.. ну он начинает высказывать свое недовольство, что мол я его толкнул, я ему вежливо объяснил что я его отодвинул, т.к. они загородили проход, он несет всякую чушь, да вот типа он крутой перец и все такое. Я начинаю еще сильнее улыбаться, переходя в смех (паралельно в голове я понимаю как он жалок, почему объясню позже), я ему говорю, что меня толкать не совету (я то понимаю, что я серебрянный призер по ушу в весе до 90 кг, и знаю, что сбиваю с нох 3-х взрослых мужиков около 300 кг, и понимаю, что за 2 менуты он не отличит свою жопу от морды), в общем стою просто ржу, в общем он ушел ни с чем, а я вдоволь повеселился, как говориться Великий полководец побеждает без боя, вот такая история произошла )))

Edited July 3, 2009 by sc@r@bey

Riim · July 3, 2009

не подгружает введенные данные, т.е. не работает, а переходит по ссылке http://xhr/POST?phone=999999999999&order=blablabla
в чем может быть ошибка?

Возможно, страница запускается локально. При запуске с сервера все сразу заработало.

как можно оптимизировать сей код после исправления ошибки?

До оптимизации нужно научить его работать с несколькими параллельными запросами.

Ответы на остальные вопросы находятся в Яндексе менее чем за 5 минут.

sc@r@bey · July 3, 2009

другое дело ))

Возможно, страница запускается локально. При запуске с сервера все сразу заработало.

не совсем понятно, я на Denwer-е работаю

единственное xtr.php пустой

Edited July 3, 2009 by sc@r@bey

Riim · July 3, 2009

не обижайся, дружище, уже второй день несут всякую чушь, просто можно не писать и все, достали!
пока не еб..ешь меж глаз не успокоятся....

Проблема в основном в том, что ответы на вопросы что ты (как я понял, судя по "дружище", далее все же на "ты") задаешь можно очень легко найти в интернете.

sc@r@bey · July 3, 2009

Проблема в основном в том, что ответы на вопросы что ты (как я понял, судя по "дружище", далее все же на "ты") задаешь можно очень легко найти в интернете.

я предпочитаю живую беседу (я стал Мастером заниммаясь с Мастерами, а не в Интернете)

и даже если искать в Интернете, то что именно искать?

вот модифицировал, не выводятся введенные данные, а так работает

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional-dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Изучаем AJAX</title>

<script language="javascript" type="text/javascript">
	var request = false;
	try {
		request = new XMLHttpRequest();
			} catch (trymicrosoft) {
			try {
			request = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (othermicrosoft) {
			try {
				request = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (failed) {
				request = false;
				}
		}
	}
	if (!request)
	   alert("Error initializing XMLHttpRequest!");

	function getCustomerInfo() {
		var phone = document.getElementById("phone").value;
		var url = "/include/xtr.php?phone=" + escape(phone);
		request.open("GET", url, true);
		request.onreadystatechange = updatePage;
		request.send(null);
	}

	function updatePage() {
		if (request.readyState == 4) {
			if (request.status == 200) {
				var response = request.responseText.split("|");
				document.getElementById("order").value = response[0];
				document.getElementById("address").innerHTML = response[1].replace(/\n/g, " ");
			} else
				alert("status is " + request.status);
		}
	}
</script>
</head>
<body>
	<form>
		<p>Enter your phone number:
		<input type="text" size="14" name="phone" id="phone"
		onChange="getCustomerInfo();" />
		</p>
		<p>Your order will be delivered to:</p>
		<div id="address"></div>
		<p>Type your order in here:</p>
		<p><textarea name="order" rows="6" cols="50" id="order"></textarea></p>
		<p><input type="submit" value="Order Pizza" id="submit" /></p>
	</form>
</body>
</html>

Edited July 3, 2009 by sc@r@bey

Riim · July 3, 2009

единственное xtr.php пустой

Что мешает наполнить?

не совсем понятно, я на Denwer-е работаю

С Denwer-ом к сожалению никогда не работал. Твой пример перенес к себе почти без изменений, заменил только "/include/xtr.php" на "Handler.ashx".

sc@r@bey · July 3, 2009

и где ошибка?

sc@r@bey · July 3, 2009

document.getElementById("address").innerHTML = response[1].replace(/\n/g, " "); response[1] is underfined

вот ошибка, как исправить?

Sign In

AJAX для ЧАЙНИКОВ (вопросы)

Question

Link to comment

Share on other sites

23 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information