Реализация AJAX через POST-запрос

-1

Я читаю книгу, в которой описывается процедура реализации Ajax через запрос POST. Это код:Реализация AJAX через POST-запрос

Имя файла: ajaxtest.html

<html> 
<head> 
<title>AJAX Example</title> 

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

</head> 

<body> 
<h1>LOADING A WEBPAGE INTO A DIV</h1> 

<div id="info">This is going to be replaced </div> 

<script type="text/javascript"> 

url = "ajaxtest.php" 

params = "url=oreilly.com" 

request = new ajaxRequest() 

request.open("POST",url,true) 

request.setRequestHeader("Content-type", "application/x-wwww-form-urlencode") 

request.onreadystatechange = function() 
{ 
    if(this.readyState == 4) 
    { 
     if(this.status == 200) 
     { 
      if(this.responseText != null) 
      { 
       document.getElementById('info').innerHTML = this.responseText 
      } 
      else 
      { 
       alert("Ajax error: No data received ") 
      } 
     } 
     else 
     { 
      alert("Ajax Error " + this.statusText) 
     } 
    } 
} 

request.send(params) 


</script> 

</body> 
</html>

пример того, что книга также имеет 2 линии я удалить после прочтения некоторых других статей:

request.setRequestHeader("Content-length", params.length) 
request.setRequestHeader("Connection", "close")

Функция ajaxRequest сохраняется в отдельном файле .js с именем xhr.js:

function ajaxRequest() 
{ 
try 
{ 
    // fon NON-IE browsers 
    var request = new XMLHttpRequest() 
} 
catch(e1) 
{ 
    try 
    { 
     //for IE6+ browser 
     var request = new ActiveXObject("Msxml2.XMLHTTP") 
    } 
    catch(e2) 
    { 
     try 
     { 
      //for IE5 
      var request = new ActiveXObject("Microsoft.XMLHTTP") 
     } 
     catch(e3) 
     { 
      //No AJAX support 
      var request = false 
     } 
    } 
} 
return request 
}

И ajaxtest.php файл:

<?php 

if(isset($_POST['url'])) 
{ 
echo file_get_contents("http://".$_POST['url']); 

echo "test1"; 
} 

echo "test2"; 

echo $_POST['url']; 
?>

Дело в том, что, как только я выполняю ajaxtest.html, часть «Это собирается быть заменен », он исчезает (это правильно), но после этого я получаю часть ajaxtest.php, которая находится за пределами if (isset()). И когда он достигает эхо $ _POST [ 'URL'] вне если (Исеть()) я получаю следующее сообщение об ошибке:

Примечание: Undefined индекс: URL в C: \ WAMP \ WWW \ ajaxtest.php on line 11

Ofcourse test2 напечатан на странице.

Почему это происходит? Не должно быть $ _POST ['url'] может быть доступно в скрипте ajaxtest.php?

источник

2014-05-03 christostsang

HTML файл

<html> 
<head> 
<title>AJAX Example</title> 
<script type="text/javascript" src ="xhr.js"></script> 
</head> 
<body> 
<h1>LOADING A WEBPAGE INTO A DIV</h1> 

<div id="info">This is going to be replaced </div> 

<script type="text/javascript"> 
url = "ajaxtest.php"; 
params = "url="+encodeURIComponent("oreilly.com"); 

request = new ajaxRequest(); 
request.open("POST",url,true); 
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 

request.onreadystatechange = function() { 
    if(this.readyState == 4) { 
     if(this.status == 200) { 
      if(this.responseText != null) { 
       document.getElementById('info').innerHTML = this.responseText; 
      } else { 
       alert("Ajax error: No data received ") 
      } 
     } else { 
      alert("Ajax Error " + this.statusText) 
     } 
    } 
} 

request.send(params); 
</script> 
</body> 
</html>

ajaxtest.php

<?php 
if(isset($_POST['url'])) { 
    $_POST = array_map("urldecode",$_POST); 
    echo file_get_contents("http://".$_POST['url']); 
} else { 
    echo "test2"; 
} 
?>

Во-первых, вам нужно кодировать параметры перед отправкой их через AJAX.

Во-вторых, при получении параметров в php вам необходимо их декодировать.

В-третьих, у вас есть опечатанный тип содержимого.

источник

2014-05-03 08:41:31 Tanatos

Tanatos, теперь он работает. Есть ли учебник, объясняющий процедуру кодирования/декодирования, упомянутую выше? Причина в книге, которую я читаю, не вижу ничего похожего. – christostsang

Хорошо, помните, если вы отправляете строки, которые могут включать пустые пространства, тире, запятые или любые не буквенно-цифровые символы, через запрос URL-адреса нужно закодировать (по запросу url я имею в виду get или javascript ajax). Что касается кодирования/декодирования, на основе функций, которые вы можете найти в коде выше, вы также сможете найти противоположные функции. Удачи вам в обучении! :) – Tanatos

@ Тантос: проще запомнить: если вы пишете URL-адрес, он должен быть URL-адресом, поэтому URL-адрес закодирован. Если вы пишете HTML, он должен быть HTML, поэтому HTML закодирован. Если вы пишете JS, он должен быть JS, поэтому JS закодирован. И так далее. Это всегда, когда-то, это то, что закодировано. Everthing еще кодирует, как стрельба из дробовика. Неточность, высокий уровень воздействия и многие последующие вопросы отладки на SO после этого. – hakre

-1

Использование методов JQuery AJAX делает использование связи ajax намного проще.

Это просто можно сделать, используя следующую строку кода: (для интернет подключен сайт, если он предназначен для локального использования вам нужно будет загрузить файл локально)

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>

вы бы затем использовать следующий код для установки вашего запроса AJAX:

$.ajax({ 
    url: "path", 
    type: "POST", //http verb, can be any of the standard verbs, eg, GET, PUT, POST, DELETE... 
    data:{data1:data1_value, data2:data2_value}, //any post data to send with request 
    async: true, 
    dataType:'json', //data format expected from server 
    success: function (data) { 
     //code to execute on success (the data variable contains any data returned by the server 
    }, 
    error: function (xhr, ajaxOptions, thrownError) { 
     //code to handle errors goes here 
    }, 
});

источник

2014-05-03 08:38:33

Я знаю, что с помощью JQuery упрощает все, но прямо сейчас я нахожусь в процедуре, чтобы изучить основы Javascript (и AJAX), поэтому позже я мог бы лучше понять JQuery. – christostsang

Ваш тип контента является неправильным:

request.setRequestHeader("Content-type", "application/x-wwww-form-urlencode") 
//                  ^

Оно должно быть:

request.setRequestHeader("Content-type", "application/x-wwww-form-urlencoded")

С неправильным типом контента вы можете сказать PHP, чтобы разобрать его в любом случае:

parse_str(file_get_contents('php://input'), $data); 
echo $data['url'];

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

источник

2014-05-03 08:41:52

Вставлять с тем же яваскриптом форматом из книги, которую вы читаете, вы можете определить свой «Params», как, например:

params = JSON.stringify({url:'oreilly.com'});//SEND AS JSON OBJECT

и в PHP файл:

 <?php 
     $request_body = file_get_contents('php://input'); 
     $data = json_decode($request_body);//DECODE JSON OBJECT 
     $url = $data->url;//EXTRACT THE "URL" VALUE FROM DECODED JSON OBJECT 
     if(isset($url)) 
     { 
     echo file_get_contents("http://".$url); 
     echo "test1"; 
     } 
     ?>

источник

2014-05-03 10:23:50 grateful

Реализация AJAX через POST-запрос

ответ

Смежные вопросы