WordPress basic AJAX example. https://help.codesnippets.pro/article/48-ajax-within-snippets

ajax.php

<?php

const ACTION_NAME = 'shea_ajax_example';

$handler = function () {
	check_ajax_referer( ACTION_NAME );

	wp_send_json_success( 'it works!' );
};

add_action( 'wp_ajax_' . ACTION_NAME, $handler );
add_action( 'wp_ajax_nopriv_' . ACTION_NAME, $handler );

add_shortcode( 'shea_ajax_button', function () {
	return '<button id="shea-ajax-button">Click me for AJAX</button>';
} );

add_action( 'wp_footer', function () {
	$data = [
		'ajaxurl' => admin_url( 'admin-ajax.php' ),
		'action'  => ACTION_NAME,
		'nonce'   => wp_create_nonce( ACTION_NAME ),
	];

	?>
	<script>
		const data = <?php echo wp_json_encode( $data ); ?>;
		const ajaxButton = document.getElementById('shea-ajax-button');

		ajaxButton.addEventListener('click', () => {
			const request = new XMLHttpRequest();
			request.open('POST', data.ajaxurl, true);
			request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

			request.onload = () => {				
				if (200 > request.status || 400 <= request.status) {
					alert('AJAX failure :( We received error code ' + request.status);
					return;
				}
				
				const response = JSON.parse(request.responseText)

				alert('AJAX success! Message: ' + response.data);
			};

			request.send(`action=${data.action}&_ajax_nonce=${data.nonce}`);
		});

	</script>

<?php } );

Forgive me for being new to using ajax. I see these two example files but no idea on how to get them into wordpress site

@eswartwout You can use this WordPress plugin: https://wordpress.org/plugins/code-snippets/

I have that plugin and have dozens of working snippets. I copied all your code into a new snippet but it does nothing

@eswartwout did you add the [shea_ajax_button] shortcode? The code is intended to be more of a starting point for a proper example – it doesn't really do a huge amount by itself.

is there a missing php ending tag? that does make it work but stops the crash

I copied all the code above as listed. all code in one snippet.

Your filenames listed above code are confusing. I thought the code goes in a snippet not in a php file

The shortcode button is included in the code above. I still cannot get it to do anything

@eswartwout I was just checking out this example and saw your comments and seeing as no one as commented in a while I thought I would interject my own.. not sure if you still cannot get it to work.

If you look at the link at the very top above the code example that page explains a lot.. but to answer some of your questions, yes all the code goes in a snippet, and within a snippet you don't need to start <?php nor end ?> with php tags so ignore line #1.

The shortcode button is included in the code but you have to add the actual shortcode tag [shea_ajax_button] to your wordpress page to display the button.

As for them calling this example as a ajex.php file, that's because they needed to add a file on GItHub in order to create this repo to show this example. So you can ignore the fact thats its a file.. its just for this example.. and as I started above, all the code goes in one snippet.

Thank you for your explanation and the provided code. I would have hoped to find it earlier, as combining AJAX with a snippet is not that difficult after all.