LCS Ajax

A secure and efficient JavaScript library for handling AJAX requests with nonce-based CSRF protection.

• Introduction
• Features
• Installation
• Quick Start
  • Basic Usage
  • Handling FormData (File Uploads)
  • Adding Custom Headers
  • GET Requests
• Security & CSRF Protection
• Advanced Usage
  • Fetching a Nonce Manually
  • Customizing the Nonce Name
  • Handling API Responses
• Error Handling
• API Reference
• Development & Contribution
• License
• Support

lcs_ajax is a lightweight JavaScript library designed for making secure AJAX requests with nonce-based CSRF protection. It simplifies communication between the frontend and backend while ensuring security and flexibility.

Built using the Fetch API, lcs_ajax supports:

• JSON & FormData (file uploads)
• Custom headers
• Automatic nonce retrieval for security
• One request at a time to prevent conflicts
• Easy API integration

✅ Secure AJAX Requests – Includes nonce-based CSRF protection to prevent cross-site request forgery.
✅ Easy Integration – Works seamlessly with APIs and web applications.
✅ Automatic Nonce Handling – Fetches and attaches a nonce for extra security.
✅ Supports JSON & FormData – Works with structured JSON data and file uploads.
✅ Asynchronous & Efficient – Uses modern async/await with Fetch API for speed and reliability.
✅ Prevents Concurrent Requests – Ensures that only one AJAX request runs at a time to avoid conflicts.
✅ Lightweight – Minimal dependencies, just pure JavaScript.

You can use lcs_ajax in your project in multiple ways.

npm install lcs_ajax

Then, import it in your JavaScript file:

import { lcsSendAjaxRequest } from 'lcs_ajax';

Add the following script to your HTML file:

<script src="https://cdn.jsdelivr.net/npm/lcs_ajax/dist/la.min.js"></script>

Download la.min.js and include it in your project:

<script src="path/to/la.min.js"></script>

Sending a simple AJAX request:

const requestData = { name: 'John Doe', email: 'john@example.com' };

lcsSendAjaxRequest(requestData, 'https://example.com/api', 'POST')
    .then(response => console.log('Success:', response))
    .catch(error => console.error('Error:', error));

To send file uploads, use FormData:

const formData = new FormData();
formData.append('file', document.querySelector('#fileInput').files[0]);

lcsSendAjaxRequest(formData, 'https://example.com/upload', 'POST')
    .then(response => console.log('File uploaded:', response))
    .catch(error => console.error('Upload failed:', error));

const headers = { Authorization: 'Bearer my-token' };

lcsSendAjaxRequest({ data: 'test' }, 'https://example.com/secure', 'POST', headers)
    .then(response => console.log('Success:', response))
    .catch(error => console.error('Error:', error));

lcsSendAjaxRequest({}, 'https://example.com/api/data', 'GET')
    .then(response => console.log('Fetched Data:', response))
    .catch(error => console.error('Fetch error:', error));

lcs_ajax automatically retrieves a nonce before sending a request. This prevents CSRF attacks by ensuring only authorized requests are executed.

How it works:

1. The library fetches a nonce from the server.
2. The nonce is attached to every AJAX request.
3. The server validates the nonce before processing the request.

By default, lcs_ajax looks for a meta tag containing the AJAX object:

<meta name="lcs_ajax_object" content='{"ajaxurl": "https://example.com/api", "nonce": "secure-token"}'>

You can manually fetch a nonce before making a request:

lcsGetNonce({ nonce_name: 'lcs_ajax_nonce' }, 'https://example.com/api')
    .then(nonce => console.log('Fetched Nonce:', nonce))
    .catch(error => console.error('Nonce error:', error));

You can specify a custom nonce name:

lcsSendAjaxRequest({ data: 'test', nonce_name: 'custom_nonce' }, 'https://example.com/api', 'POST')
    .then(response => console.log('Success:', response))
    .catch(error => console.error('Error:', error));

The function returns a Promise, allowing structured error handling:

lcsSendAjaxRequest({ username: 'testuser' }, 'https://example.com/login', 'POST')
    .then(response => {
        if (response.success) {
            console.log('Login successful!');
        } else {
            console.error('Login failed:', response.message);
        }
    })
    .catch(error => console.error('AJAX error:', error));

To handle errors properly:

lcsSendAjaxRequest({ email: 'invalid' }, 'https://example.com/register', 'POST')
    .catch(error => console.error('Error:', error.message));

Sends an AJAX request.

Want to improve lcs_ajax? Contributions are welcome!

🔹 Fork the repository
🔹 Create a feature branch (git checkout -b feature-name)
🔹 Commit changes (git commit -m "Add feature")
🔹 Push and create a Pull Request

See CONTRIBUTING.md for details.

This project is licensed under the MIT License. See the LICENSE file for details.

💬 Found a bug or need help? Open an issue at:
📌 GitHub Issues

📧 Contact: jcfuniverse@gmail.com, loadedchannelsolutions@gmail.com