AjAX 异步通信
<!DOCTYPE html>
<html lang="en">
<head>
<title>xmlhttprequest ajax demo</title>
<script type ="text/javascript" language ="javascript" >
var req; //定义变量，用来创建xmlhttprequest对象
function creatReq() // 创建xmlhttprequest,ajax开始
{
var url="./test4.json"; //要请求的服务端地址
if(window.XMLHttpRequest) //非IE浏览器及IE7(7.0及以上版本)，用xmlhttprequest对象创建
{
req=new XMLHttpRequest();
}
else if(window.ActiveXObject) //IE(6.0及以下版本)浏览器用activexobject对象创建,如果用户浏览器禁用了ActiveX,可能会失败.
{
req=new ActiveXObject("Microsoft.XMLHttp");
} if(req) //成功创建xmlhttprequest
{
req.open("GET",url,true); //与服务端建立连接(请求方式post或get，地址,true表示异步)
req.onreadystatechange = callback; //指定回调函数
req.send(null); //发送请求
}
} function callback() //回调函数，对服务端的响应处理，监视response状态
{
console.log(req);
if(req.readyState==4) //请求状态为4表示成功
{
if(req.status==200) //http状态200表示OK
{
Dispaly(); //所有状态成功，执行此函数，显示数据
}
else //http返回状态失败
{
alert("服务端返回状态" + req.statusText);
}
}
else //请求状态还没有成功，页面等待
{
document .getElementById ("myTime").innerHTML ="数据加载中";
}
} function Dispaly() //接受服务端返回的数据，对其进行显示
{
document .getElementById ("myTime").innerHTML =(req.responseText);
} </script>
</head>
<body>
<div id="myTime"></div> <input id="Button1" type="button" value="Get Time" onclick ="creatReq();"/>
</body>
</html>
注意事项：
1首先创建XMLHttpRequest对象。为了兼容IE6浏览器。
if(window.XMLHttpRequest) //非IE浏览器及IE7(7.0及以上版本)，用xmlhttprequest对象创建
{
req=new XMLHttpRequest();
}
else if(window.ActiveXObject) //IE(6.0及以下版本)浏览器用activexobject对象创建,如果用户浏览器禁用了ActiveX,可能会失败.
{
req=new ActiveXObject("Microsoft.XMLHttp");
} 2.创建好了对象后，发送之前，还需要设置一下请求信息，即open('GET',url,false)这三个参数，第一个参数表示的是请求方法，第二个参数表示是请求的网址，第三个参数是一个boolean值，true表示异步操作，false表示的是同步操作。
3.设置好了请求信息后，就可以发送了，即send（null），对于get请求方式，不需要发送附加信息，所以可以设置null。
4. req.onreadystatechange = callback; //指定回调函数
这个是监听后台状态，然后做出相应的响应。
AjAX 异步通信的更多相关文章
- 本机Ajax异步通信
昨天我们用JQuery.Ajax解释JQuery样通过Ajax实现异步通信.为了更好的编织知识网,今天我们用一个Demo演示怎样用javascript实现原生Ajax的异步通信. 原生Ajax实现异步 ...
- struts2，实现Ajax异步通信
用例需要依赖的jar: struts2-core.jar struts2-convention-plugin.jar,非必须 org.codehaus.jackson.jar,提供json支持 用例代 ...
- 原生javaScript中使用Ajax实现异步通信
AJAX本质就是在HTTP协议的基础上以异步的方式与服务器进行通信,所谓异步,就是指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步. 以下开始简单 ...
- 网站教学 提纲总结到ajax结束后面还有
Repeater - 重复器五个模板:HeaderTemplate - 在最上面,显示一次FooterTemplate - 最下面,显示一次ItemTemplate - 在中间,显示n次Alterna ...
- 什么是 ajax？----异步 javascript 和 xml
GET 用于请求服务器数据 POST 用于上传数据到服务器,或者修改服务器数据 ajax 异步通信,实现页面的局部刷新,按需获取数据,节约带宽,带来更好的用户体验 客户端与服务器在不必刷新浏览器的情况 ...
- 6.Vue的Axios异步通信
1.什么是Axios Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架,主要作用就是实现 AJAX 异步通信,其功能特点如下: 从浏览器中创建 XMLHttpRequests ...
- Ajax 简述与基础语法
目录 Ajax 1. 原生 JS 实现 Ajax 2. 使用 Ajax 实现异步通信 a. Ajax 的基础语法 b. 用 Ajax 传递数据 i. 传递字符串数据 ii. 传递 JSON 数据 3. ...
- jQuery从无知到无所不知
说明: 本文以读书笔记的方式整理jQuery的重要知识点,言简意赅,一语中的,删繁就简,引人入胜. 本文先对jQuery强大的功能作一系统的介绍,再详细整理jQuery的选择器.过滤器.DOM操作.事 ...
- 25款顶级的jQuery表格插件
jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...
随机推荐
- Linux性能优化实战学习笔记：第三十二讲
一.上节总结 专栏更新至今,四大基础模块的第三个模块——文件系统和磁盘 I/O 篇,我们就已经学完了.很开心你还没有掉队,仍然在积极学习思考和实践操作,并且热情地留言与讨论. 今天是性能优化的第四期. ...
- 图论问题(1) : hdu 1198
题目转自hdu 1198,题目传送门 题目大意: 给你11种单位水管摆放位置,若上下或左右有水管连接则视为这两点相连. 最后让你求这些张图中有几个连通块. 解题思路: 本来觉得这道题很简单,不就一个建 ...
- [LeetCode] 343. Integer Break 整数拆分
Given a positive integer n, break it into the sum of at least two positive integers and maximize the ...
- 【贪心】umi的函数
原题传送门 思路 这道题乍一看很难,然而实际在草纸上一模拟,结果就出来了. 分析:这道题实际上要么无解,要么有无数个解,因而题目只要求输出了一个解(明白这点题目就做出来一半了). 题中,规定所求z满足 ...
- log4j输出到控制台的性能问题
一.背景 最近几个业务遇到服务假死的情况,通过排查,我们发现是因为业务在线上使用了日志框架的ConsoleAppender所致. 请尊重作者劳动成果,转载请标明原文链接:https://www.cnb ...
- Webpack 一些核心概念了解
Webpack的几个核心概念 Entry:入口,Webpack执行构建的第一步将从Entry开始,可抽象成输入. Module:模块,在Webpack里一切皆模块,一个模块对应一个文件.Webpack ...
- Oracle 10G RAC集群安装
一,基本环境配置 01,hosts cat /etc/hosts 127.0.0.1 localhost localhost.localdomain localhost4 localhost4.loc ...
- CentOS7 Git 安装
最新git源码下载地址: https://github.com/git/git/releases https://www.kernel.org/pub/software/scm/git/ 1 移除旧版 ...
- Spring @ContextConfiguration注解
原文地址:https://www.cnblogs.com/bihanghang/p/10023759.html @ContextConfiguration这个注解通常与@RunWith(SpringJ ...
- SWIG 3 中文手册——4. 脚本语言
目录 4 脚本语言 4.1 两种语言的概览 4.2 脚本语言如何调用 C? 4.2.1 包装器函数 4.2.2 变量链接 4.2.3 常量 4.2.4 结构体与类 4.2.5 代理类 4.3 构建脚本 ...