ajax数据请求需要四个步骤：（请求文本内容）

1.创建XMLHttpRequest对象；

2.打开与服务起的链接；

3.发送给服务器；

4.响应就绪。

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>ajax请求数据</title>
  6. 	</head>
  7. 	<body>
  8. 		<button id="btn">请求数据</button>
  9. 		<h1 id="txt"></h1>
  10. 		<script type="text/javascript">
  11. 			var btn = document.getElementById('btn');
  12. 			var txt = document.getElementById('txt');
  13. 			btn.onclick = function() {
  14. 				//1.创建XMLHttpRequest对象
  15. 				var xhr = null;
  16. 				if(window.XMLHttpRequest) {//非IE56
  17. 					xhr = new XMLHttpRequest();//实例对象
  18. 				}else {//IE56
  19. 					xhr = new ActiveXObject('Microsoft.XMLHTTP');
  20. 				}
  21. 				//2.打开与服务器的链接
  22. 				xhr.open('get','abc.txt',true);
  23. 				//3.发送给服务器
  24. 				xhr.send(null);//get请求
  25. 				//4.响应就绪
  26. 				xhr.onreadystatechange = function() {
  27. 					if (xhr.readyState == 4) {//请求完成
  28. 						if(xhr.status == 200) {
  29. 							txt.innerHTML = xhr.responseText;
  30. 						}else {
  31. 							alert(xhr.status);
  32. 						}
  33. 					}
  34. 				}
  35. 			}
  36. 		</script>
  37. 	</body>
  38. </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. Linux使用Jexus托管Asp.Net Core应用程序

    第一步 安装.Net Core环境 安装 dotnet 环境参见官方网站 https://www.microsoft.com/net/core. 选择对应的系统版本进行安装.安装完成过后 输入命令查看 ...

  2. 门面(Facade)模式

    门面模式是对象的结构模式,外部与一个子系统的通信必须通过一个统一的门面对象进行.门面模式提供一个高层次的接口,使得子系统更易于使用. 医院的例子 现代的软件系统都是比较复杂的,设计师处理复杂系统的一个 ...

  3. makefile文件模板介绍

    1    src : = $(shell  ls  *.c)2    objs : = $(patsubst  %.c, %.o, $(src))3    test : $(objs)4       ...

  4. Listener与Filter

    一.监听器Listener javaEE的13们规范中 包括servlet技术和jsp技术 servlet规范中包括三门技术:(servlet的三大组件) servelt技术  Listener技术 ...

  5. kotlin 语言入门指南一

    基于官网的Getting Start部分,翻译如下: 基础语法 定义一个包 包的声明必须放在文件头部: package my.demo import java.util.* // ... 不需要加上p ...

  6. Javascript版-显示相应图片的详细信息

    Hi All, 分享一个通过JS来显示相应图片的详细信息. 需求:进入页面时,动态加载图片信息:当鼠标移动到某一图片上时,则显示该图片的大图片并显示相应说明信息:当鼠标移开图片时,清除新创建的元素. ...

  7. Bootstrap快速入门

    Bootstrap有两个重点,一个是概念的理解,理解bootstrap是如何通过div来代替过去的table布局的:一个是常用结构的熟悉,做到需要的组件马上就能找到,小修修改改可用就行.其最帅的一点就 ...

  8. springboot 集成shiro

    首先看下shiro configuration 的配置,重要部分用红色标出了 package cn.xiaojf.today.shiro.configuration; import at.pollux ...

  9. 深度解析PHP数组函数array_combine

    前些天写了一篇关于array_merge的函数解析. 今天来看一个新的函数array_combine() 此函数一共有两个参数,一个是合并后数组的键名,另一个为键值. 注意:合并后数组的键名放在第一个 ...

  10. 【JAVAEE学习笔记】hibernate01：简介、搭建、配置文件详解、API详解和CRM练习:保存客户

    今日学习:hibernate是什么 一.hibernate是什么 框架是什么: 1.框架是用来提高开发效率的 2.封装了好了一些功能.我们需要使用这些功能时,调用即可.不需要再手动实现. 3.所以框架 ...