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 的表格插件,你可以任意控制表格的行和列,用 ...
随机推荐
- [LeetCode] 50. Pow(x, n) 求x的n次方
Implement pow(x, n), which calculates x raised to the power n(xn). Example 1: Input: 2.00000, 10 Out ...
- NOI 2010 海拔（最小割转最短路）
题意 https://www.lydsy.com/JudgeOnline/problem.php?id=2007 思路 首先可以发现一个结论,每个位置的海拔只有能是 \(0\) 和 \(1\) ,然后 ...
- Qt 调试信息、打印信息、输出到文本
void debug_msg(QVariant msg) { ; QFile file("debug_msg.txt"); ) { i = ; file.open(QFile::W ...
- vue+elementui搭建后台管理界面(1登录)
1 node环境安装 从 node官网下载安装包 2 vue-cli npm install vue-cli -g 3 新建项目 vue init webpack vue-project 可保持默认, ...
- Azure DevOps Server 经验分享（国内重型工程公司）
受邀在上海为国内著名的重型工程公司的软件研发团队分享了Azure DevOps Server 的经验. http://www.cnblogs.com/danzhang/ DevOps MVP 张洪君 ...
- PowerShell的异常处理办法
$ErrorActionPreference = 'Stop' Try{ # C:\xxx 不存在 Copy-Item C:\xxx -ErrorAction Stop } Catch ...
- java中的泛型【T】与通配符【?】概念入门
使用泛型的目的是利用Java编译机制,在编译过程中帮我们检测代码中不规范的有可能导致程序错误的代码.例如,我们都知道List容器可以持有任何类型的数据,所以我们可以把String和Integer等类型 ...
- Java 8——接口中个的默认方法和静态方法
在Java SE 8之前,interface只是事物的抽象,用来定义统一的抽象事物和描述事物的抽象行为和属性. 但是在Java SE 8中,增加了可以在interface中增加默认实现的行为和事物的静 ...
- 【转】常用PLC通讯协议
三菱FX系列PLC通讯测试 发送帧(Hex): 起始(STX) 02 命令(CMD) 30 首地址(ADDRESS) 30 30 41 30 字节数(BYTES) 30 31 终止(ETX) 03 校 ...
- Linq 将两个查询结果合称为一个
var handsonitems = from a in db.DltQuestionHandson join c in db.DltBdChapter on new { a.ChapterCode ...