程序下载：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未初始化的问题。

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

  1. 使用Node.js搭建静态资源服务器

    对于Node.js新手,搭建一个静态资源服务器是个不错的锻炼,从最简单的返回文件或错误开始,渐进增强,还可以逐步加深对http的理解.那就开始吧,让我们的双手沾满网络请求! Note: 当然在项目中如 ...

  2. 通过node.js读取html页面及其页面中引入的css样式

    Node 是什么? Node 是一个基于Chrome V8 引擎的JavaScript 运行环境. Node 不是一种独立的语言.Node不是 JavaScript 框架, Node是一个除了浏览器之 ...

  3. node.js简单的页面输出

    在node.js基本上没有兼容问题(如果你不是从早期的node.js玩起来),而且原生对象又加了这么多扩展,再加上node.js自带的库,每个模块都提供了花样繁多的API,如果还嫌不够,github上 ...

  4. Node.js +Express+MongoDB+mogoose+ejs+bootstrap+jquery

    Node.js + MongoDB 项目实战(二)  创建项目 在项目实战(一)中,已经配置好了开发环境(详见:http://www.cnblogs.com/jameslong/articles/34 ...

  5. 使用highlight.js高亮静态页面的语言代码

    显示静态的代码其实html的pre标签基本可以满足需求了,至少不会将换行的文本显示成一堆字符串. 不过能使静态的文本能高亮显示,倒更炫酷一点.其实很简单的,引入highlight.js包,可以使用cd ...

  6. js实现静态页面跳转传参

    最近有个项目: 存静态web服务,一个新闻页面列表出所有新闻摘要信息,然后通过点击新闻详情访问到该新闻的详情页面: 新闻展示的页面通过ajax请求接口获取到新闻的摘要信息,预计想通过id的方式访问到新 ...

  7. 一个基于React整套技术栈+Node.js的前端页面制作工具

    pagemaker是一个前端页面制作工具,方便产品,运营和视觉的同学迅速开发简单的前端页面,从而可以解放前端同学的工作量.此项目创意来自网易乐得内部项目nfop中的pagemaker项目.原来项目的前 ...

  8. 原生node实现本地静态页面的展示

    var http = require("http"); var fs = require("fs"); var url = require("url& ...

  9. JS控制静态页面之间传递参数获取参数并应用

    在项目中遇到这也一个问题: 有a.html和b.html. 1.a页面已经打开,b页面尚未打开,我希望在a页面设置好一些列参数,比如背景色,宽度等参数,传递给b页面,好让b页面在打开就能应用. 2.a ...

随机推荐

  1. 汕头市队赛 SRM 09 A 撕书

    A 撕书I-3 SRM 09 背景&&描述 琉璃在撕书.     书总共有n页,都悬浮在数轴上,第i页的位置为,上面写着一个数字.     琉璃从右往左撕书.假如看到了第i页,就把在第 ...

  2. php实现二维码

    封装函数 function verifyImage($len=3){ //session_start(); $scr="abcdefghijklmnoqprstuvwxyzABCDEFJHI ...

  3. Objective-C类族和工厂模式

    http://www.cocoachina.com/ios/20141124/10296.html 相信大家都了解GoF的<Design Patterns>中提到的23种设计模式,其中将常 ...

  4. Altium Designer 网络连接方式Port和Net Label详解

    1.图纸结构      图纸包括两种结构关系: 一种是层次式图纸,该连接关系是纵向的,也就是某一层次的图纸只能和相邻的上级或下级有关系:另一种是扁平式图纸,该连接关系是横向的,任何两张图纸之间都可以建 ...

  5. Selenium2+python自动化16-alert\confirm\prompt【转载】

    前言 不是所有的弹出框都叫alert,在使用alert方法前,先要识别出到底是不是alert.先认清楚alert长什么样子,下次碰到了,就可以用对应方法解决. alert\confirm\prompt ...

  6. PhpStorm 快捷键大全 PhpStorm 常用快捷键和配置+如何关闭快捷键ctrl+alt+方向键旋转屏幕

    如果映射的是eclipse的快捷键,又同时安装了英特尔的GPU软件,那么会有这个快捷键冲突 就是快速复制快捷键:ctrl+alt+方向键  会调用英特尔旋转屏幕,禁用掉即可 PhPStorm 是 Je ...

  7. Python实现微信小程序支付功能

    由于最近自己在做小程序的支付,就在这里简单介绍一下讲一下用python做小程序支付这个流程.当然在进行开发之前还是建议读一下具体的流程,清楚支付的过程. 1.支付交互流程 当然具体的参数配置可以参考官 ...

  8. C语言基础之注释与常见错误

    总结起来,注释有三种: 1.单行注释 1: //哈哈 单行注释 2.多行注释 1: /* 2: asdfasdfasdfasdfasdf 3: */ 其中多行注释如果这样写 1: /* 2: * 函数 ...

  9. 微服务实施Spring Boot/Spring Cloud中踩过的坑（转）

    http://tietang.wang/2016/09/08/%E5%BE%AE%E6%9C%8D%E5%8A%A1/%E5%BE%AE%E6%9C%8D%E5%8A%A1%E5%AE%9E%E6%9 ...

  10. sqlserver 下载地址（SQL Server 2008 R2 中英文 开发版/企业版/标准版 下载）

    转自:http://blog.sina.com.cn/s/blog_624b1f950100pioh.html   注:企业版无法安装在xp和win7,开发版才可以! 一. 简体中文 1. SQL S ...