Обычный Javascript (без JQuery) для загрузки php-файла в div

Привет, я не знаю javascript, но я должен использовать его в одном из моих шаблонов. Я искал гугл и нашел решение, подобное такому:Обычный Javascript (без JQuery) для загрузки php-файла в div

My Index.php file.

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Test</title> 
<script type="text/javascript"> 
window.onload = function(){ 
document.getElementById("aside").innerHTML="<img src='loadingImage.gif'>"; 
if(XMLHttpRequest) var x = new XMLHttpRequest(); 
else var x = new ActiveXObject("Microsoft.XMLHTTP"); 
x.open("GET", "other_content_1.php", true); 
x.send(""); 
x.onreadystatechange = function(){ 
    if(x.readyState == 4){ 
     if(x.status==200) document.getElementById("aside").innerHTML = x.responseText; 
     else document.getElementById("aside").innerHTML = "Error loading document"; 
     } 
    } 
} 
</script> 
</head> 

<body> 

<div id="aside">This is aside</div> 
</body> 
</html>

Мой other_content_1.php файл

<div id='other-content-1'> 
<?php echo 'This text is loading via php command'; ?> 
</div>

Поскольку это единственная функция Javascript на моем сайте я не вижу причин, чтобы загрузить дополнительные JQuery для него. Я уверен, что должен быть способ сделать это с помощью обычного JavaScript/ajax без необходимости загрузки JQuery. Может ли кто-нибудь предложить правильный синтаксис?

Я хочу выполнить асинхронно, пока страница продолжает загружаться.

источник

2013-06-30 Vikram Rao

В любом случае, jQuery, вероятно, кэшируется в вашем браузере, поэтому ... зачем? Just google pure javascript AJAX tutorial –

Действительно, почему вы не хотите использовать jQuery? Ответ (отличный) ниже работает, но сравнивает его с реализацией jquery. – frenchie

Я полностью согласен с обоснованием не использовать jQuery, рок на! Какие браузеры вам нужно поддерживать? Некоторые из этих ответов замечательны, но на практике рассматривают множество случаев с IE5 и IE6, где большинство сайтов поддерживают только IE8 +. –

Попробуйте это:

window.onload = function(){ 
aside = document.getElementById("aside"); 
aside.innerHTML="<img src='loadingImage.gif'>"; 
if(XMLHttpRequest) var x = new XMLHttpRequest(); 
else var x = new ActiveXObject("Microsoft.XMLHTTP"); 
x.open("GET", "other_content_1.php", true); 
x.send(); 
x.onreadystatechange = function(){ 
    if(x.readyState == 4){ 
     if(x.status == 200) aside.innerHTML = x.responseText; 
     else aside.innerHTML = "Error loading document"; 
     } 
    } 
}

И является кросс-браузер совместимый, вам не нужно дополнительное 32KB только, чтобы сделать простой функция поддерживает кросс-браузер.

источник

2013-06-30 14:56:15 heytools

Не знаете, почему он там не работает, возможно, попробуйте x.send (""); вместо x.send(); ? – heytools

Попробуйте заменить 3 "aside.innerHTML =" на "aside.firstChild.data =" – heytools

Итак вернемся к innerHTML ... и попробуйте x.open ("GET", "other_content_1.php", 1); ИЛИ x.open ("GET", "other_content_1.php"); вместо x.open («GET», «other_content_1.php», true); – heytools

из http://www.tutorialspoint.com/ajax/, используя обычный XHR (XmlHttpRequest)

function loadPage() {  
    var ajaxRequest; 

    try{ 
     // Opera 8.0+, Firefox, Safari 
     ajaxRequest = new XMLHttpRequest(); 
    }catch (e){ 
     // Internet Explorer Browsers 
     try{ 
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
     }catch (e) { 
      try{ 
       ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
      }catch (e){ 
       // Something went wrong 
       alert("Your browser broke!"); 
       return false; 
      } 
     } 
    } 

    ajaxRequest.onreadystatechange = function(){ 
     if(ajaxRequest.readyState == 4){ 
      var ajaxDisplay = document.getElementById('ajaxDiv'); 
      ajaxDisplay.innerHTML = ajaxRequest.responseText; 
     } 
    } 


    ajaxRequest.open("GET", "ajax-example.php", true); 
    ajaxRequest.send(null); 
} 

loadPage();

источник

2013-06-30 14:49:07

Синтаксические ошибки означают, что у вас есть символ, который не должен быть. приведенный выше код не имеет каких-либо синтаксических ошибок (я просто вставил в мою консоль javascript и работал без ошибок), поэтому вы должны скопировать его или ввести неверное. Удостоверьтесь, что это выглядит так, без каких-либо дополнительных символов возле возвращаемой ложной строки. –

обязательно измените 'ajax-example.php' на страницу, которую вы пытаетесь получить, и измените' document.getElementById ('ajaxDiv'); 'чтобы иметь идентификатор элемента, который вы пытаетесь поместить в html. –

Этот код предназначен для работы в функции, плохо отредактировал мой ответ, чтобы отразить –

Обычный Javascript (без JQuery) для загрузки php-файла в div

ответ

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