Javascript学习笔记12—

Ajax:Asynchronous Javascript And XML。写个简单的例子：
<body>    <form id="form1" runat="server">    <div>        <asp:Label ID="LabelTime" runat="server"></asp:Label>    </div>    </form>    <script type="text/javascript">        if (!window.XMLHttpRequest) {            window.XMLHttpRequest = function () {return new ActiveXObject("Microsoft.XMLHTTP");            };        }function UpdateClock() {var request = new XMLHttpRequest();            request.open("post", "TimeTest.aspx", false);            request.send("");            document.getElementById("LabelTime").innerText = request.responseText;        }        setInterval(UpdateClock, 1000);

</script></body>
而在另一个页面写下当前时间，这样就形成了一个钟表。

代码很简单，就是操纵一个XMLHttpRequest对象来获取服务器时间，然后更新时间。上面的代码在与服务器交互时，并没有页面整体刷新，而是局部刷新。

但是上面的代码在request.open时，最后一个参数为false，表示发出的XMLHttpRequest是同步的，由于Javascript是单线程的，所以在等待请求的过程中，线程会被阻塞，如果请求时间过长，浏览器会停止响应。

虽然Javascript是单线程的，但是XMLHttpRequest具备异步处理请求的能力。代码如下：
<body>    <form id="form1" runat="server">    <div>        <asp:Label ID="LabelTime" runat="server"></asp:Label>    </div>    </form>    <script type="text/javascript">        if (!window.XMLHttpRequest) {            window.XMLHttpRequest = function () {return new ActiveXObject("Microsoft.XMLHTTP");            };        }

function AsynRequest() {var request = new XMLHttpRequest();            request.open("post", "TimeTest.aspx", true);            request.onreadystatechange = function () {if (request.readyState === 4) {                    UpdateClock(request.responseText);                }            };            request.send("");        }function UpdateClock(time) {            document.getElementById("LabelTime").innerText = time;        }        setInterval(AsynRequest, 1000);

</script></body>
哎，没有智能提示的日子真不好过。

转载于:https://www.cnblogs.com/kym/archive/2010/01/17/1650229.html

Javascript学习笔记12——Ajax入门相关推荐

JavaScript学习笔记：AJAX基础
文章目录一.准备工作任务1.安装`phpstudy_pro`并启动`Apache`服务任务2.下载HBuilder X,创建HBuilder项目任务3.输入城市代码,返回城市天气预报信息 1. ...
JavaScript 学习笔记 - 12 JavaScript 应用示例
目录 12.1 使用可折叠菜单 12.2 添加下拉菜单 12.3 改进下拉菜单 12.4 带说明的幻灯片 12.5 一个娱乐姓名生成器 12.6 柱状图生成器 12.7 样式表切换器 12.1 使用可 ...
Java学习笔记12——JVM入门
文章目录 JVM简介和体系结构 JVM的位置 JVM的体系结构类加载器双亲委派机制沙箱安全机制(了解即可) Native PC寄存器方法区栈三种JVM 堆新生区永久区堆内存调优 Jp ...
JavaScript学习笔记（五）---cookie、Proxy、服务器、PHP语言、http协议、同步异步、事件轮循机制、ajax编写、接口
JavaScript学习笔记(五)---cookie.Proxy.服务器.PHP语言.http协议.同步异步.事件轮循机制.ajax编写.接口 1.cookie 1.1cookie概念 1.2cook ...
Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
JavaScript学习笔记之入门篇
JavaScript学习笔记之入门篇 JavaScript引入 1. 页面级 js: 2. 外部js文件: JavaScript变量 1. 变量的作用: 2. 声明变量: 3. 变量赋值: 4. 单一 ...
JavaScript学习笔记（六）(Jquery入门)
JavaScript学习笔记(六) 一.jQuery是什么? 二.jQuery的安装三.载入事件区别四.jQuery对象和DOM对象的区别 DOM对象和Jquery对象互转五.选择器 5.1 j ...
JavaScript学习笔记(九）(验证框架,layer弹出层)
JavaScript学习笔记(九) 一.jQuery Validate验证框架 1.引入相关插件路径 2. 修改一些规则 3. 自定义验证规则 4.异步验证整体代码二.layer弹出层 1.引入相 ...
千锋JavaScript学习笔记
千锋JavaScript学习笔记文章目录千锋JavaScript学习笔记写在前面 1. JS基础 1.1 变量 1.2 数据类型 1.3 数据类型转换 1.4 运算符 1.5 条件 1.6 循环 ...

Javascript学习笔记12——Ajax入门

Javascript学习笔记12——Ajax入门相关推荐

最新文章

热门文章