ajax加载 js不会执行

Ajax 加载的 JavaScript 不会执行可能是因为跨域问题或未正确设置响应头。

1、问题原因

浏览器安全限制

同源策略：Ajax请求遵循同源策略，即请求的URL的协议、域名、端口必须与当前页面的相同，如果跨域请求加载JS文件，浏览器会出于安全考虑阻止JS代码的执行，当前页面所在域名为a.com，通过Ajax请求加载b.com下的JS文件，浏览器会拒绝执行该JS文件中的代码。

内容类型限制：服务器返回的响应头中Content-Type字段设置不正确也可能导致JS无法执行，如果Content-Type不是application/javascript或text/javascript，浏览器可能会将返回的内容视为普通文本而不是可执行的脚本，服务器错误地将Content-Type设置为text/plain，那么浏览器就不会执行返回的JS代码。

JS加载时机问题

DOM未就绪：如果在Ajax请求返回的数据中包含需要操作DOM元素的JS代码，而此时DOM元素尚未完全加载或处于不可操作状态，JS代码可能无法正常执行，在页面还未完全加载完成时，通过Ajax加载了一个JS文件，该文件中的代码试图获取一个尚未渲染到页面上的DOM元素，就会导致代码执行出错。

异步执行顺序：Ajax请求是异步的，这意味着JS代码可能在Ajax请求完成之前就开始执行后续操作，如果后续操作依赖于Ajax加载的JS文件中的变量或函数，就会出现变量未定义或函数未找到的错误，导致JS无法正常执行。

2、解决方案

解决同源策略问题

JSONP：JSONP（JSON with Padding）是一种解决跨域问题的古老方法，它利用了<script>标签不受同源策略限制的特点，通过动态插入<script>标签来加载跨域的JS文件，不过，JSONP只能用于GET请求，且存在安全隐患，如跨站脚本攻击（XSS），在前端页面中创建一个<script>标签，将其src属性设置为跨域的JS文件URL，并在URL中添加一个回调函数参数，服务器端在返回数据时会将数据作为参数传递给回调函数，从而避免了同源策略的限制。

CORS（跨域资源共享）：现代浏览器普遍支持CORS，通过在服务器端设置正确的CORS响应头，允许特定域名的客户端访问资源，服务器需要在响应头中添加Access-Control-Allow-Origin字段，并将其值设置为允许访问的域名，对于所有域名都允许访问的情况，可以设置为；对于特定域名，可以设置为具体的域名值，如http://example.com，还可以根据需要设置其他CORS相关的响应头，如Access-Control-Allow-Methods、Access-Control-Allow-Headers等。

确保JS加载时机正确

使用回调函数：在Ajax请求完成后，通过回调函数来执行需要依赖Ajax返回数据的JS代码，这样可以确保在Ajax请求成功获取数据并处理完成后，再执行相关的JS操作，使用jQuery的$.ajax()方法时，可以在success回调函数中编写需要执行的JS代码，如下所示：

    $.ajax({
        url: "example.com/data",
        type: "GET",
        success: function(data) {
            // 在这里执行依赖于Ajax返回数据的JS代码
            console.log(data);
        }
    });

监听DOM事件：可以使用DOMContentLoaded事件来确保在DOM元素完全加载完成后再执行JS代码，将需要执行的JS代码放在DOMContentLoaded事件的回调函数中，这样可以保证在页面DOM结构加载完成后再执行相关操作。

     document.addEventListener("DOMContentLoaded", function() {
         // 在这里执行需要在DOM加载完成后执行的JS代码
         console.log("DOM已加载完成");
     });

3、示例代码

方法	代码示例	说明
JSONP示例	前端页面： `function loadScript(url, callback) { var script = document.createElement('script'); script.src = url + '?callback=' + callback; document.body.appendChild(script); }` `loadScript('https://example.com/data.js', 'handleData');` 服务器端（假设使用Node.js）： `app.get('/data.js', function(req, res) { const callback = req.query.callback; const data = { message: 'Hello, World!' }; res.jsonp(data); });`	前端通过`loadScript`函数动态加载跨域的JS文件，服务器端通过`res.jsonp`方法返回带有回调函数包装的数据，解决了跨域问题。
CORS示例	前端页面： `fetch('https://example.com/data', { method: 'GET', headers: {'Content-Type': 'application/json'} }) .then(response => response.json()) .then(data => { console.log(data); });` 服务器端（假设使用Express.js）： `app.use((req, res, next) => { res.header("Access-Control-Allow-Origin", ""); res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS"); next(); }); app.get('/data', (req, res) => { res.json({ message: 'Hello, World!' }); });`	前端使用`fetch`函数发送CORS请求，服务器端设置CORS相关的响应头，允许所有域名访问，并返回JSON数据。
Ajax回调函数示例	前端页面： `$.ajax({ url: "example.com/data", type: "GET", success: function(data) { console.log(data); } });`	在Ajax请求成功后的回调函数中执行对返回数据的处理操作。
DOM事件监听示例	前端页面： `document.addEventListener("DOMContentLoaded", function() { console.log("DOM已加载完成"); });`	确保在DOM元素完全加载完成后执行指定的JS代码。

4、相关问题与解答

问题1：为什么使用JSONP解决跨域问题时只能用于GET请求？

解答：JSONP的工作原理是通过动态插入<script>标签来加载跨域的JS文件，而<script>标签的src属性只能指定资源的URL，无法携带请求体数据，因此只能用于GET请求，对于POST请求等需要携带请求体数据的请求方式，JSONP无法满足需求。

问题2：如何判断Ajax请求是否成功获取了数据？

解答：可以通过检查Ajax请求的响应状态码来判断是否成功获取了数据，状态码为200表示请求成功，服务器成功返回了数据，还可以在Ajax请求的回调函数中处理服务器返回的数据，并根据数据的有效性和完整性来判断是否成功获取了所需数据，在jQuery的$.ajax()方法中，可以在success回调函数中进行数据处理和验证。

原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1656471.html

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。