Trying to enable basic AJAX

Question

I am trying to display a php file located on a remote server, inside my HTML5 file.

The source code of the PHP file is

<?php

    header('Access-Control-Allow-Origin: *');

    ini_set('display_errors','On'); error_reporting(E_ALL);  

    echo " <br><br><br> Testing AJAX ";

?>

And the jQuery and the HTML5 is

<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>

<body>

before DIV

<div id=ajaxinsert> </div>

After DIV

<script>

$document = $(document);

$document.ready(                    
                    function( ) 
                    {

$ajaxinsert = $("#ajaxinsert");         

$ajaxinsert.load("http://englishdigital.net/AJAXTest.php");     

                    }

                );
</script>
</body></html>

I am testing this on Google Chrome 38 Desktop. Is the only way to enable it, using a third party plugin? Is it impossible without any plugin? Thanks a lot for your help

Error Message Displayed on the browser console

XMLHttpRequest cannot load http://englishdigital.net/AJAXTest.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Error Message Displayed on the PHP page

Warning: Cannot modify header information - headers already sent by (output started at /home/engli237/public_html/AJAXTest.php:1) in /home/engli237/public_html/AJAXTest.php on line 3

Then what is the solution for this matter? Thanks!

@Barmar Yes the browser's JavaScript console did include an error message. What is the solution for this matter? Thanks! By the way, is it possible anyways, to enable ajax load without any plugin? "ajax sending" was done without any additional plugin. — KSJ Power, Nov 08 '14 at 23:24
I don't know the solution. You can use AJAX with native Javascript `XMLHttpRequest` objects. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest — Barmar, Nov 08 '14 at 23:27

vmontanheiro · Answer 1 · 2014-11-08T22:43:36.517

0

Try to fix it

   <div id=ajaxinsert> </div>   to   <div id="ajaxinsert"> </div>

edited Nov 08 '14 at 22:43

answered Nov 08 '14 at 22:37

vmontanheiro

1,009
9
12

If `.load()` doesn't work, why would `.get()` work any better? They're equivalent to each other. – Barmar Nov 08 '14 at 22:41
You're just grasping at straws. Quotes are optional around attributes if there are no spaces. Why do you think this would solve a cross-domain AJAX problem? – Barmar Nov 08 '14 at 23:32

Trying to enable basic AJAX

1 Answers1