class DarkRaha extends com { // разработка приложений
            String a="Главная" b="Контакты" c="О сайте"
};

введение
XMLHttpRequest
метод get
метод post
кодировка
xml
JQuery
ajax и innerHTML

Справочник по ajax

Ajax приложение с jquery

Библиотека JQuery поддерживает несколько методов для работы с ajax: get, post и ajax. Последний метод позволяет указать явно различные настройки для загрузки страницы.

Ниже приведены предыдущие примеры переписанные с использованием JQuery.


Demo get metod
Input text: ajax result:
<form name="myform">
Demo get metod<br>
Input text: <input type="text" onkeyup="ajaxFunction();" 
                name="in" id="in" />
ajax result: <input type="text" name="out" id="out" />
</form>

<script language="javascript" type="text/javascript">
<!-- 
function ajaxFunction(){
  $.get("test.php", { "in" : $("#in").val()},
  function(data){
     $("#out").val(data);
  
  }, "text");
}
-->
</script>

Demo post metod
Input text: ajax result:
<form>
Demo post metod<br>
Input text: <input type="text" onkeyup="ajaxFunction1();" 
                name="in1" id="in1" />
ajax result: <input type="text" name="out1" id="out1" />
</form>

<script language="javascript" type="text/javascript">
<!-- 
function ajaxFunction1(){
  $.post("testpost.php", { "in" : $("#in1").val()},
  function(data){
     $("#out1").val(data); 
  }, "text");
}
-->
</script>

Demo ajax metod
Input text:
ajax result:
<form name="form2">
Demo ajax method <br>
Input text: <input type="text" onkeyup="ajaxFunction2();" 
             name="in2" id="in2" />
<br>
ajax result: <textarea rows=5 cols=40 name="out2" 
              id="out2" value=""></textarea> 
</form>

<script language="javascript" type="text/javascript">
<!-- 
// создание XML объекта по строке
function doXML(data){
var xml;
if(window.ActiveXObject){ // IE
  xml = new ActiveXObject("Microsoft.XMLDOM");
  xml.async = false;
  xml.loadXML(data);
  }
else { 
   if (document.implementation.createDocument){ // FF и Opera
      var parser=new DOMParser();    
      xml = parser.parseFromString(data, "text/xml");
      } 
  }   
return xml;
}

function ajaxFunction2(){
$.ajax({
  url: "testxml.php",
  cache: false,
  type: "POST",
  data: "in="+$("#in2").val(),
  dataType: "text", // тип xml не сработал 
  success: function(data){
  var xml=doXML(data);  
  $("#out2").val( $(xml).find('myitem').text());    
  }
});  
}
-->
</script>

1. Во многих примерах к методам get и post объект указывается без кавычек

{in : $("#in").val()}

Это работает только в FF. Если имя объекта закавычить, то работает и в FF и в IE

{"in" : $("#in").val()}

2. На всякий случай, вдруг кто запутается. Для всех трех примеров я использовал серверные файлы от предыдущих примеров, которые работают только с одной переменной in. Отсюда некоторое не соответствие имен в

"in" : $("#in1").val()

Рейтинг@Mail.ru