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. web基础之会话技术

    一.会话技术之Cookie Cookie技术是将数据存储到客户端 1.怎样去向客户端写出一个cookie 1)创建Cookie对象 Cookie cookie = new Cookie(name,va ...

  2. SQL server 用命令行更改数据库

    (计应154兰家才) CREATE  DATABASE  数据库名 ON [PRIMARY] ( <数据文件参数> [,…n]  [<文件组参数>] ) [LOG ON] ( ...

  3. CoreOS, Kubernetes, etcd

    CoreOS CoreOS Container Linux is the leading container operating system, designed to be managed and ...

  4. html学习笔记 - table表格

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 纯css实现多标签浮动居中(任意个数)

    在做的一个网页上有一块要用浮动标签,具体就是网页底部有未知数量,未知尺寸的元素要水平居中,有点类似于分页器. 首先,我们先新建一个容器con,就是标签的爸爸,用来控制标签在页面的位置,.father{ ...

  6. kafka 0.10.2 消息消费者

    package cn.xiaojf.kafka.consumer; import org.apache.kafka.clients.consumer.ConsumerConfig; import or ...

  7. 如何在Java中调用Python代码

    有时候,我们会碰到这样的问题:与A同学合作写代码,A同学只会写Python,而不会Java, 而你只会写Java并不擅长Python,并且发现难以用Java来重写对方的代码,这时,就不得不想方设法“调 ...

  8. 总结scala(一)

    由于笔记太多,分为了几部分,进入我的博客,查看其它的笔记 scala:面向对象,函数式编程 一.声明变量 1.变量的类型 Byte,Char,Short,Int,Long,Float,Double,B ...

  9. Unity User Group 北京站:《Unity5.6新功能介绍以及HoloLens开发》

    ​时间一转眼从春天来到了初夏,Unity User Group(以下简称UUG)活动也迎来了第七期.我们面向Unity3D开发从业者以及未来想从事Unity3D开发的学生群体的UUG活动这次仍然在海淀 ...

  10. python——爬虫&问题解决&思考(四)

    继续上一篇文章的内容,上一篇文章中已经将url管理器和下载器写好了.接下来就是url解析器,总的来说这个模块是几个模块中比较难的.因为通过下载器下载完页面之后,我们虽然得到了页面,但是这并不是我们想要 ...