Node.js的静态页面想通过jQuery的Ajax函数调用远程服务的措施无效

简介:

程序下载:https://files.cnblogs.com/files/xiandedanteng/nodejsMakejqueryAjaxInvalid.rar

在 http://www.cnblogs.com/xiandedanteng/p/7517398.html  这个例子中,使用静态页面调用angularjs库去获取SpringBoot提供的JSon列表失败了。

于是我换了jQuery的库,jQuery的dom操作还有效,但ajax操作就无效了,页面代码如下:

复制代码
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>Node.js静态页面展示</title>
     <link rel='stylesheet' href='/css/style.css'/>
     <!-- <script src="/js/jquery-1.7.2.min.js" type="text/javascript"/> 这样写整个页面出不来-->
     <script src="/js/jquery-1.7.2.min.js" type="text/javascript"></script>
     <script src="/js/test.js" type="text/javascript"></script>
    </head>

     <body onload="run()">
        <div class="main">
            <div class="content">
                <div>
                    <img src="/img/jkx.png"/>
                </div>
            </div>
        </div>
        <div class="side">
                <ul>
                    <li>菜单一</li>
                    <li>菜单二</li>
                    <li>菜单三</li>
                    <li>菜单四</li>
                </ul>
        </div>
     </body>
</html>
<script type="text/javascript">
<!--
function run(){
    //changeLiText();
}

/*****************************************************
* 窗口载入时调用的启动函数
*****************************************************/
$(document).ready(function() {
    $(".side ul li").html("1");    
    
    loadRemoteData();
});

/*****************************************************
* 取出远程服务器数据
*****************************************************/
function loadRemoteData(){
    var url="http://localhost:8080/list";    
    
    $.ajax({
        url: url,// 请求的地址
        data:{url:url},// 请求参数
        type: "get",// 请求方式
        success: function(data) {
            // 成功时的回调函数
            alert($(data).text());            
        },
        timeout: 5000,// 超时时间,超时后会调用error后的函数
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            var errMsg="";
            errMsg+=("XMLHttpRequest.status="+XMLHttpRequest.status);
            errMsg+=("XMLHttpRequest.readyState="+XMLHttpRequest.readyState);
            errMsg+=("textStatus="+textStatus);
            alert(errMsg);

            // 404 请求地址无效
            if(XMLHttpRequest.status=='404'){
                alert("执行loadRemoteData()函数时,请求地址无效");
                
                return;
            }
        
            // 请求失败时被调用的函数
            alert("执行loadRemoteData()函数时,请求超时5000毫秒无响应");
        }
    
    });
}
//-->
</script>
复制代码

把页面调起来出现alert,提示:

XMLHttpRequest.status=0
XMLHttpRequest.readyState=0
textStatus=error

这个明显是xhr尚未初始化的状态,何谈调用远程服务。

看来jQuery和AngularJS一样出现了xhr未初始化的问题。














本文转自张昺华-sky博客园博客,原文链接:http://www.cnblogs.com/xiandedanteng/p/7518141.html,如需转载请自行联系原作者


相关文章
|
10天前
|
Web App开发 JavaScript 前端开发
构建高效后端服务:Node.js与Express框架的实战指南
【9月更文挑战第6天】在数字化时代的潮流中,后端开发作为支撑现代Web和移动应用的核心,其重要性不言而喻。本文将深入浅出地介绍如何使用Node.js及其流行的框架Express来搭建一个高效、可扩展的后端服务。通过具体的代码示例和实践技巧,我们将探索如何利用这两个强大的工具提升开发效率和应用性能。无论你是后端开发的新手还是希望提高现有项目质量的老手,这篇文章都将为你提供有价值的见解和指导。
|
21天前
|
存储 负载均衡 监控
检索服务elasticsearch节点(Node)
【8月更文挑战第23天】
34 5
|
20天前
|
JavaScript 前端开发 中间件
构建高效后端服务:Node.js与Express框架的完美搭档
【8月更文挑战第28天】在追求高性能、可扩展和易维护的后端开发领域,Node.js和Express框架的组合提供了一种轻量级且灵活的解决方案。本文将深入探讨如何利用这一组合打造高效的后端服务,并通过实际代码示例展示其实现过程。
|
1月前
|
JavaScript
鼠标事件(点击换色)分别使用js和jQuery代码实现
鼠标事件(点击换色)分别使用js和jQuery代码实现
28 1
|
3天前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
12 1
|
21天前
|
监控 JavaScript 前端开发
深入浅出Node.js: 打造高效的后端服务
【8月更文挑战第27天】在这个数字化飞速发展的时代,后端技术成为支撑互联网服务的基石。Node.js作为其中的佼佼者,以其非阻塞I/O模型、事件驱动架构和丰富的生态系统,赢得了开发者的青睐。本文将带领读者深入理解Node.js的核心概念,通过实际案例分析其应用模式,并探讨如何利用Node.js构建高效、可扩展的后端服务。无论你是初学者还是有经验的开发者,都能在这篇文章中找到提升你的Node.js技能的灵感和知识。
|
21天前
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的深度整合
【8月更文挑战第27天】 在现代Web开发中,后端服务的高效性至关重要。本文深入探讨了如何利用Node.js的非阻塞I/O特性和Express框架的简洁性来打造高性能的后端服务。我们将通过具体案例,展示如何在不牺牲代码可读性和可维护性的前提下,实现高效的请求处理和服务端逻辑。文章旨在为开发者提供一个清晰的指导,帮助他们在构建后端服务时做出更明智的技术选择。
|
25天前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
27 2
|
1月前
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
15 1
|
21天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js: 打造高效后端服务
【8月更文挑战第27天】Node.js作为一款强大的后端开发平台,以其非阻塞I/O和事件驱动的特性深受开发者喜爱。本篇文章将引导你从基础到进阶,探索Node.js的核心技术与应用实践,让你能够利用这一技术构建高效、可扩展的后端服务。文章不仅包含理论知识,还会通过实际代码示例加深理解,让学习过程既系统又富有趣味。