Варианты загрузки информации на сайте

07.01.2012 Михаил JavaScript, 0

В этой статье предлагаю рассмотреть варианты загрузки информации на сайт:

• Стандартный стособ
• Ajax в формате текста
• Ajax в формате json
• Погрузка через JavaScript

Стандартный способ

Под стандартный способом я подразумеваю простое обращение клиента к серверу и получение ответной информации. Такой способ вы используете постоянно когда забиваете ссылку в браузер или нажимаете кнопку в какой-то форме.
Рассмотрим это на следующем примере:
Здесь методом POST на сервер отправляются данные, но в строке браузера высветится только /?hello, а на странице появится текст:Были отправленны следующие данные:
Клиент

<form action="/?hello" method="post">
<input type="text" name="a">
<input type="submit" value="Сохранить">
</form>

Сервер

<?php
     if (isset($_GET['hello']))// проверяем переменную отправленную методом GET
     {
          echo "Были отправленны следующие данные:".$_POST['a'];
     }
?>

Ajax в формате текста

C помощью этого способа вы можете динамически подгружать данные на вашу страницу не производя перезагрузку самой страницы.
Для использования этого метода необходимо использовать в JavaScript объект XMLHttpRequest.
Ниже приведен класс инициализации XMLHttpRequest с использованием методов GET и POST:

var sAjax = function(_type){

	if (typeof(_type) == "undefined")
	{this.type=false;}else{this.type=_type;}
//где _type - способ отправки данных -
//синхронное(браузер подвисает во время передачи данных)
//или асинхронное(браузер не подвисает и вы можете
//дальше продолжать работу со страницей), по умолчанию синхронный

	this.XmlHttp = function()
	{
		var o;
		if (window.XMLHttpRequest) {
			o = new XMLHttpRequest();
			if (o.readyState == null) {
				o.readyState = 1;
				o.addEventListener("load",
					function ()
					{
					o.readyState = 4;
					if (typeof o.onreadystatechange == "function")
					     o.onreadystatechange();
					}, false);
			}
			return o;
		}
		else if (window.ActiveXObject) {
			o = ["MSXML2", "Microsoft", "MSXML", "MSXML3"];
			for (var i = 0; o[i]; i++)
				try { return new ActiveXObject(o[i] + ".XmlHttp"); }
				catch (ex) {};
		}
		return false;
	};

	this.Get = function(_url){ //отправка данных методом GET
		var xmlhttp = this.XmlHttp();
		xmlhttp.open('GET', _url , this.type);
		xmlhttp.send(null);
		if (xmlhttp.readyState == 4) {
			return {status:xmlhttp.status, text:xmlhttp.responseText};
		}
	};

	this.Post = function(_url, _param){ //отправка данных методом POST
		var xmlhttp = this.XmlHttp();
		xmlhttp.open('POST', _url , this.type);
		xmlhttp.send(_param);
		if (xmlhttp.readyState == 4) {
			return {status:xmlhttp.status, text:xmlhttp.responseText};
		}
	};
}

Рассмотрим как это работает, на следующем примере:
Здесь по клику на кнопку Получить данные, методом GET на сервер отправляются переменные: hello и a=1, а в поле с id=»A» появится текст:Были отправленны следующие данные:1
Клиент

<script>
	var obj= new sAjax();
	var B = document.getElementById('A');
</script>
<input id="A" value="">
<button onclick="B.value=obj.Get('/?hello&a=1').text">Получить данные</button>

Сервер

<?php
     if (isset($_GET['hello']))// проверяем переменную отправленную методом GET
     {
          echo "Были отправленны следующие данные:".$_GET['a'];
     }
?>

Ajax в формате json

Этот способ подразумевает под собой получение от сервера, в ответ на запрос, данных в виде массива.
Давайте посмотрим как этот способ возможно применить на практике:
По клику на кнопку Получить данные, методом GET на сервер отправляются переменные: hello и a=1, сервер отвечает данными в формате json, который впоследствии преобразуется в массив данных и применяется к полю с id=»A» в котором появится текст:Были отправленны следующие данные:1
Клиент

<script>
	var obj= new sAjax();
	var B = document.getElementById('A');
	function app(url)
	{
		// запрашиваем данные
		var A=obj.Get(url);
		//преобразуем текст ответа сервера в массив
		var MAS = eval("(" + A.text + ")");
		// применяем значение
		B.value=MAS['msg'];
	}
</script>
<input id="A" value="">
<button onclick="app('/?hello&a=1')">Получить данные</button>

Сервер

<?php
     if (isset($_GET['hello']))// проверяем переменную отправленную методом GET
     {
          // создаем массив
          $MAS['msg']="Были отправленны следующие данные:".$_GET['a'];
          // кодируем массив в формат json
          echo json_encode($MAS);
     }
?>

Два этих способа имеют ограничение:

• нельзя получить javascript и потом запустить его
• запрос через XMLHttpRequest возможно производить только на тот же домен, откуда загрузилась страница, на которой производится инициализация XMLHttpRequest

Погрузка через JavaScript

Этот способ подразумевает вставку в заголовок страницы новой ссылки, которую браузер автоматически подгрузит.
В этом способе есть также свои недостатки и достоинства:

• Во первых, запрос осуществляется только методом GET, что является существенным ограничением
• Во вторых, загружать возможно только javascript, с последующем применением скриптов к странице
• В третьих, загрузка информации возможна с любого сервера, что является большим преимуществом!

<script>
var scriptTag = document.createElement("script");
scriptTag.setAttribute("type", "text/javascript");
scriptTag.setAttribute("src", url); // где url -  ваша ссылка на загружаемые данные
document.getElementsByTagName("head")[0].appendChild(scriptTag);
</script>

Joomla 1.7.x — Не отображается переключение языков