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数据请求的更多相关文章

  1. Ajax --- 数据请求

    下面主要介绍(JS原生)数据请求的主要步骤: Ajax 数据请求步骤: 1.创建XMLHttpRequest对象 2.准备数据发送 3.执行发送 4.指定回掉函数 第一步:创建XMLHttpReque ...

  2. VueJS搭建简单后台管理系统框架 (二) 模拟Ajax数据请求

    开发过程中,免不了需要前台与后台的交互,大部分的交互都是通过Ajax请求来完成,在服务端未完成开发时,前端需要有一个可以模拟Ajax请求的服务器. 在NodeJs环境下,通过配置express可访问的 ...

  3. ajax数据请求5(php格式)

    ajax数据请求5(php格式): <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  4. ajax数据请求4(xml格式)

    ajax数据请求4(xml格式): <!doctype html> <html> <head> <meta charset="utf-8" ...

  5. ajax数据请求3(数组json格式)

    ajax数据请求3(数组json格式) <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  6. ajax数据请求2(json格式)

    ajax数据请求2(json格式) <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  7. 微信小程序的ajax数据请求wx.request

    微信小程序的ajax数据请求,很多同学找不到api在哪个位置,这里单独把小程序的ajax请求给列出来,微信小程序的请求就是wx.request这个api,wx.request(一些对象参数),微信小程 ...

  8. ajax数据请求的理解

    一,请求 发送请求有两种方式:get 跟 post . 1.get仅请求数据,不需要服务端做处理,最后会返回指定的资源. 2.post可以提交数据,服务端根据提交的数据做处理,再返回数据. 二,创建X ...

  9. ajax 数据请求(一)同域

    参考:http://www.css88.com/jqapi-1.9/jQuery.ajax/ http://www.cnblogs.com/haitao-fan/p/3908973.html 1.常用 ...

随机推荐

  1. Python爬虫一:爬取上交所上市公司信息

    前几天领导让写一个从新闻语料中识别上市公司的方案.上市公司属于组织机构的范畴,组织机构识别属于命名实体识别的范畴.命名实体识别包括人名.地名.组织机构等信息的识别. 要想从新闻语料中识别上市公司就需要 ...

  2. Swift 中 String 取下标及性能问题

    Swift 中 String 取下标及性能问题 取下标 String String 用 String.Index 取下标(subscript)得到 Character,String.Index 要从 ...

  3. Hive 桶的分区

    (一).桶的概念: 对于每一个表(table)或者分区, Hive可以进一步组织成桶(没有分区能分桶吗?),也就是说桶是更为细粒度的数据范围划分.Hive也是 针对某一列进行桶的组织.Hive采用对列 ...

  4. Vuejs实例-02Vue.js项目集成ElementUI

    Vuejs实例-02Vue.js项目集成ElementUI 0:前言 vue.js的UI组件库,在git上有多个项目,我见的使用者比较多的是iView和Element.两个组件库,组件都很丰富. 官网 ...

  5. JSP----获取表单参数

    在页面中可大量使用 request 对象来获取表单域的值,获取表单域的值有如下两个 方法. • String getParamete(String para mN ame): 获取表单域的值. • S ...

  6. ACCESS数据库增强器需求及介绍

    目前版本:ver1.0.0.2 现已支持cs文件浏览,高亮显示 针对如下图所示的access数据库,我想导出access数据库的所有或者部分表的表结构,还想对表进行封装,封装如下所示. using S ...

  7. Linux C 程序的开发环境

    1.开发环境的构成 编辑器 vim,vi 编译器 gcc 调试器 gdb 函数库glibc 系统头文件glibc_header 2.gcc编译器 功能强大.性能优越的多平台编译器,gcc可以将c.c+ ...

  8. Linux Network Management

    Linux网络管理 (YouTube视频教程) ISO/OSI七层模型 ISO: The International Organization for Standardization 国际标准化组织 ...

  9. 在Excel上写程序(ExcelEx)

    首先要说明的是:Ctrl+D,是执行框选的的扩展函数+号,一个单元格里多个函数用+号分隔*号,相当于链式操作(没法子,公式里不能写"."号) 虽还有很大的局限性,至少很多小程序和数 ...

  10. 《安卓网络编程》之第五篇 WebView的使用

    Android提供了WebView组件,,在Android的所有组件中,WebView的功能是最强大的,是当之无愧的老大.WebView组件本身就是一个浏览器实现,她的内核是基于开源WebKit引擎. ...