浏览器不支持Ajax时，如何无刷新获取带参动态服务器数据？

Absolutely possible! Even without native Ajax (XMLHttpRequest) support, there are tried-and-true workarounds to pull dynamic data from a server without reloading the entire page. These methods were standard back in the days before modern Ajax was ubiquitous, so they’re perfect for older browser environments.

Top Workarounds #

1. Hidden <iframe> Technique #

This approach uses a hidden iframe to make background requests. The server can return either HTML to insert directly into your page or JavaScript that communicates with the parent window to pass data.

Here’s a quick implementation example:

• First, add a hidden iframe to your page:

<iframe id="hiddenFrame" style="display: none;"></iframe>

• When you need to fetch data with parameters, update the iframe’s src attribute with your endpoint and properly encoded parameters:

function fetchDataWithIframe(param1, param2) {
  const encodedParam1 = encodeURIComponent(param1);
  const encodedParam2 = encodeURIComponent(param2);
  const frame = document.getElementById('hiddenFrame');
  frame.src = `/your-server-endpoint?param1=${encodedParam1}&param2=${encodedParam2}`;
}

• On the server side, return a script that calls a pre-defined function in the parent window to pass the dynamic data:

<script>
  parent.updatePageContent('Your dynamic data here — this can even be a JSON string for structured data!');
</script>

• Define the handler function in your main page to process and display the data:

function updatePageContent(data) {
  // Insert the data into your page, e.g.:
  document.getElementById('contentArea').textContent = data;
}

2. Dynamic <script> Tag (JSONP-style) #

This method leverages the universal support for external script tags in all browsers. It’s especially handy for cross-domain requests (though it works seamlessly for same-domain too).

How to use it:

• First, define a callback function in your page that will process the incoming dynamic data:

function handleDynamicData(response) {
  // Process the data (response can be an object, string, or any structured format)
  console.log('Received dynamic data:', response);
  document.getElementById('contentArea').textContent = response.userData;
}

• When you need to fetch data, dynamically create a script tag and set its src to your endpoint, including your parameters and the callback function name:

function fetchDataWithScript(userID) {
  const encodedUserID = encodeURIComponent(userID);
  const script = document.createElement('script');
  script.src = `/your-server-endpoint?user_id=${encodedUserID}&callback=handleDynamicData`;
  document.body.appendChild(script);
  // Clean up the script tag after it loads to avoid clutter
  script.onload = function() {
    this.remove();
  };
}

• On the server side, return the data wrapped in a call to your specified callback function:

// Example server response (PHP)
$callback = $_GET['callback'];
$data = ['userData' => 'Dynamic profile data for user: ' . $_GET['user_id']];
echo $callback . '(' . json_encode($data) . ')';

Key Notes #

• Always encode your parameters using encodeURIComponent() to avoid URL parsing errors and security risks like injection attacks.
• Ensure your server returns the correct content type (e.g., text/javascript for script-based responses).
• For same-domain requests, the iframe method gives you more control over HTML content, while the script method is lighter for data-only payloads.

内容的提问来源于stack exchange，提问作者Santosh Prakash