The onprogress event for the XMLHttpRequest object threw an error due to an Uncaught SyntaxError, indicating

Question

The onprogress event for the XMLHttpRequest object threw an error due to an Uncaught SyntaxError, indicating

I have implemented an ajax function successfully

However, I am facing an issue where when using onprogress, I sometimes receive incomplete HTML response and the console displays

Uncaught SyntaxError: Invalid or unexpected token

but the function still continues.

Below is the function in question:

function xhrAJAX ( divID , param2 ) {

    var pcache = (Math.floor(Math.random() * 100000000) + 1);
    var params = "divID="+encodeURIComponent(divID)+"&param2="+encodeURIComponent(param2);
    var xhr = new XMLHttpRequest(); xhr.open("POST", "/file.php?pcache="+pcache, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onprogress = function(e) { $("#"+divID).html(e.currentTarget.responseText) ; }
    xhr.send(params);

}

***** I understand that replacing .onprogress with

xhr.onreadystatechange = function(e) { if (xhr.readyState == 4) { $("#"+divID).html(e.currentTarget.responseText) ; } }

would resolve the console error. However, in some cases, PHP execution may take a long time and I need to show progress.

My installed PHP8 is set up with NGINX without output buffer. Therefore, running

echo 'stuff'; sleep(3); echo '2';

would display 'stuff' first and then '2' after 3 seconds.

PLEASE NOTE: The PHP section mentioned here is not the main concern.

THE MAIN QUESTION: Is there a way to prevent receiving "half returned html" during onprogress (from the JavaScript side)?

javascript ajax xmlhttprequest live

Answer 1

Answer №1

After discovering the new javascript fetch replacement, I delved into it and managed to generate some streamable HTML content.

Notably, this solution also functions seamlessly within webviews on both Android and iOS platforms ;)

In my specific setup, I have PHP 8 and NGINX configured with output buffer turned off. This means that each echo statement is pushed out while the script continues its execution...

function fetchsrteam ( divid , sub , buttonid ) {
    
    var pcache = (Math.floor(Math.random() * 100000000) + 1); 
    var postix = [];
    postix["preventCache"] = pcache;
    postix["divid"] = encodeURIComponent(divid);
    postix["buttonid"] = encodeURIComponent(buttonid);
        
    fetch("/.........php?pcache="+pcache, {
      method: "POST",
      body: JSON.stringify(Object.assign({}, postix)),
      headers: {"Content-type": "application/json; charset=UTF-8"}
    }).then(response => response.body)
      .then(rb => {
        const reader = rb.getReader();
          return new ReadableStream({
            start(controller) {
              function push() {
                reader.read().then( ({done, value}) => {
                  if (done) {
                    console.log('done', done); controller.close(); return;
                  }
                  controller.enqueue(value); $("#"+divid).append(new TextDecoder().decode(value)); push();
                })
              }
            push();
            }
          });
    });

}

Answer 2

After discovering the new javascript fetch replacement, I delved into it and managed to generate some streamable HTML content.

Notably, this solution also functions seamlessly within webviews on both Android and iOS platforms ;)

In my specific setup, I have PHP 8 and NGINX configured with output buffer turned off. This means that each echo statement is pushed out while the script continues its execution...

function fetchsrteam ( divid , sub , buttonid ) {
    
    var pcache = (Math.floor(Math.random() * 100000000) + 1); 
    var postix = [];
    postix["preventCache"] = pcache;
    postix["divid"] = encodeURIComponent(divid);
    postix["buttonid"] = encodeURIComponent(buttonid);
        
    fetch("/.........php?pcache="+pcache, {
      method: "POST",
      body: JSON.stringify(Object.assign({}, postix)),
      headers: {"Content-type": "application/json; charset=UTF-8"}
    }).then(response => response.body)
      .then(rb => {
        const reader = rb.getReader();
          return new ReadableStream({
            start(controller) {
              function push() {
                reader.read().then( ({done, value}) => {
                  if (done) {
                    console.log('done', done); controller.close(); return;
                  }
                  controller.enqueue(value); $("#"+divid).append(new TextDecoder().decode(value)); push();
                })
              }
            push();
            }
          });
    });

}

The onprogress event for the XMLHttpRequest object threw an error due to an Uncaught SyntaxError, indicating

Answer №1

Similar questions

Save the current time and date to a database by executing a mysql_query

How can I achieve auto-refresh functionality in SQLite using PHP and JavaScript without refreshing the entire page

unleashing the magic of AJAX: a guide to extracting

React doesn't have file upload configured to update the state

A guide on enabling or disabling a combobox in vuejs3

retrieve information instantly on AngularJS by utilizing $http or $resource

Using cascading style sheets to switch a page into editing mode

Is it possible to toggle all parent targets in Bootstrap?

The ajax function is malfunctioning when called from an external JavaScript file

Using Angular to open a modal by invoking the href function

Using Typescript in React to render font colors with specific styling

Unable to create a new collection in Firebase Firestore

Using JavaScript or JQuery, move an image from one location to another by removing it and adding

Having issues with UTF8 encoding when utilizing AJAX to send the complete HTML source in JavaScript

Unable to retrieve information from the API server (with a public IP) using ngResource

Utilizing jQuery to create a recursive AJAX poll with setTimeout to regulate the polling frequency

The comments are visible in the database, but they only appear on my index page once I refresh the page

Particles are not appearing when using the Three.js shader material

Issue with $.ajax() functionality persists across all browsers except for Firefox

Every time I navigate to a new page in NextJs, the useEffect hook