AJAX数据请求
ajax数据请求需要四个步骤：（请求文本内容）
1.创建XMLHttpRequest对象；
2.打开与服务起的链接；
3.发送给服务器；
4.响应就绪。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax请求数据</title>
</head>
<body>
<button id="btn">请求数据</button>
<h1 id="txt"></h1>
<script type="text/javascript">
var btn = document.getElementById('btn');
var txt = document.getElementById('txt');
btn.onclick = function() {
//1.创建XMLHttpRequest对象
var xhr = null;
if(window.XMLHttpRequest) {//非IE56
xhr = new XMLHttpRequest();//实例对象
}else {//IE56
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//2.打开与服务器的链接
xhr.open('get','abc.txt',true);
//3.发送给服务器
xhr.send(null);//get请求
//4.响应就绪
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {//请求完成
if(xhr.status == 200) {
txt.innerHTML = xhr.responseText;
}else {
alert(xhr.status);
}
}
}
}
</script>
</body>
</html>
AJAX数据请求的更多相关文章
- Ajax --- 数据请求
下面主要介绍(JS原生)数据请求的主要步骤: Ajax 数据请求步骤: 1.创建XMLHttpRequest对象 2.准备数据发送 3.执行发送 4.指定回掉函数 第一步:创建XMLHttpReque ...
- VueJS搭建简单后台管理系统框架 (二) 模拟Ajax数据请求
开发过程中,免不了需要前台与后台的交互,大部分的交互都是通过Ajax请求来完成,在服务端未完成开发时,前端需要有一个可以模拟Ajax请求的服务器. 在NodeJs环境下,通过配置express可访问的 ...
- ajax数据请求5（php格式）
ajax数据请求5(php格式): <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- ajax数据请求4（xml格式）
ajax数据请求4(xml格式): <!doctype html> <html> <head> <meta charset="utf-8" ...
- ajax数据请求3（数组json格式）
ajax数据请求3(数组json格式) <!doctype html> <html> <head> <meta charset="utf-8&quo ...
- ajax数据请求2（json格式）
ajax数据请求2(json格式) <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- 微信小程序的ajax数据请求wx.request
微信小程序的ajax数据请求,很多同学找不到api在哪个位置,这里单独把小程序的ajax请求给列出来,微信小程序的请求就是wx.request这个api,wx.request(一些对象参数),微信小程 ...
- ajax数据请求的理解
一,请求 发送请求有两种方式:get 跟 post . 1.get仅请求数据,不需要服务端做处理,最后会返回指定的资源. 2.post可以提交数据,服务端根据提交的数据做处理,再返回数据. 二,创建X ...
- ajax 数据请求（一）同域
参考:http://www.css88.com/jqapi-1.9/jQuery.ajax/ http://www.cnblogs.com/haitao-fan/p/3908973.html 1.常用 ...
随机推荐
- Java学习笔记--链表
心在山东身在吴,飘蓬江海漫嗟吁. 他时若遂凌云志, 敢笑黄巢不丈夫. --水浒传 先上源代码,LinkedList类: private static class Node<E> { E i ...
- php 使用composer
之前写过相关的composer,之后碰到了几个朋友问我,我整理了一下,方便自己也方便大家日后查阅~~不玩开源的程序员不是好厨子 1.执行在线安装 curl -sS https: ...
- Response.AddHeader
Response.AddHeader使用实例 1.文件下载,指定默认名 Response.AddHeader("content-type","application/x- ...
- protobuf 系列 ---------下载、编译与使用
protobuf是谷歌开发并开源的二进制序列化工具,比常用的xml,json体积更小,解析速度更快. 目前,手头上的项目有涉及到这个工具,打算仔细研究一番,顺带记录遇到的问题,解决方法,时间足够的话, ...
- Java基础知识二次学习-- 第二章 基础语法与递归补充
第二章 基础语法与递归补充 时间:2017年4月24日10:39:18 章节:02章_01节,02章_02节 视频长度:49:21 + 15:45 内容:标识符,关键字与数据类型 心得:由字母,下 ...
- 关于蓝桥杯嵌入式STM32的一点收获
各社团成员培训时自己总结的一点材料,直接粘过来的,可能有些朋友看不明白,总之这个比赛吧:有很多技巧,掌握到技巧能省我们半个月时间,我说的是针对这个比赛,对于STM32还是要多多练习,总之STM32还是 ...
- 《JAVA与模式》之命令模式
在阎宏博士的<JAVA与模式>一书中开头是这样描述命令(Command)模式的: 命令模式属于对象的行为模式.命令模式又称为行动(Action)模式或交易(Transaction)模式. ...
- React源码学习——ReactClass
前言 之前一直在使用react做开发,但是对其内部的工作机制却一点儿都不了解,说白了就是一直在套api,毫无成就感.趁最近比较闲,对源码做了一番研究,并通过博客的方式做一些记录. 进入正题 通过编写自 ...
- Pandas日期数据处理：如何按日期筛选、显示及统计数据
前言 pandas有着强大的日期数据处理功能,本期我们来了解下pandas处理日期数据的一些基本功能,主要包括以下三个方面: 按日期筛选数据 按日期显示数据 按日期统计数据 运行环境为 windows ...
- java中String是对象还是类？详解java中的String
有很多人搞不懂对象和类的定义.比如说java中String到底是对象还是类呢? 有人说String 既可以说是类,也可以说是对象. 其实他这么说也没问题, 类和对象其实都是一个抽象的概念. 我们可以把 ...