В этой статье предлагаю рассмотреть варианты загрузки информации на сайт:
Стандартный способ
Под стандартный способом я подразумеваю простое обращение клиента к серверу и получение ответной информации. Такой способ вы используете постоянно когда забиваете ссылку в браузер или нажимаете кнопку в какой-то форме.
Рассмотрим это на следующем примере:
Здесь методом 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>
