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 的表格插件,你可以任意控制表格的行和列,用 ...
随机推荐
- CF1217E Sum Queries? （线段树）
完了,前几天才说 edu 的 DEF 都不会,现在打脸了吧 qwq 其实在刚说完这句话 1min 就会了 D,3min 就会了 E 发现,对于大小 \(\ge 3\) 的不平衡集合,它至少有一个大小为 ...
- python总结十一
1.python运行速度慢的原因: python不是强类型的语言,所以解释器运行时遇到变量以及数据类型转换,比较操作,引用变量时都需要检查其数据类型 python的编译器启动速度比java快,但几乎每 ...
- oracle--BBED (dump 深入实践三)
一,工具介绍 bbed是Block Browser and Editor(块浏览编辑器)的缩写,它是Oracle数据库在安装时一起附带的工具. 一般此工具倾向于仅作为Oracle内部使用,且Oracl ...
- Ubuntu18.04开机挂载硬盘
一.查看磁盘信息 fstab文件的格式如上,其中: 1.设备文件名称是指磁盘或分区的文件名称,也可以使用label或uuid.UUID可以通过"sudo blkid"命令 ...
- Golang 基础语法介绍及对比（二）
传值与传参 Golong func main() { a := fmt.Println("a = ", a) // 应该输出 "a= 3" a1 := add1 ...
- C# HTTP系列2 HttpWebReponse类
系列目录 [已更新最新开发文章,点击查看详细] System.Net.HttpWebReponse 类提供 WebResponse 类的特定于HTTP的实现. 例子 下面的示例返回一个从Htt ...
- 结合Spring实现策略模式
最近系统需要对不同维度的数据进行差异化计算,也就会使用不同算法.为了以后更加容易扩展,结合Spring框架及策略模式对实现架构做了系统设计. 1. 定义策略接口(Strategy): import c ...
- Knative Serving 进阶: Knative Serving SDK 开发实践
作者 | 阿里云智能事业群技术专家 牛秋霖(冬岛) 导读:通过前面的一系列文章你已经知道如何基于 kubectl 来操作 Knative 的各种资源.但是如果想要在项目中集成 Knative 仅仅使用 ...
- mysql的简介和使用
mysql简介 数据的所有存储,检索,管理和处理实际上是由数据库软件--DBMS(数据库管理系统)完成的 mysql是一种DBMS,即它是一种数据库软件 mysql工具 mysql是一个客户机-服务器 ...
- commitizen规范代码提交
转载链接:https://www.jianshu.com/p/bd712e42f2e9 参考链接:https://segmentfault.com/a/1190000009048911 平时提交的变动 ...