Ajax获取数据的流程

一、Ajax的对象 XMLHttpRequest的方法

方法	描述
abort()	停止当前请求
getAllResponseHeaders()	把 HTTP请求的所有响应首部作为健／值对返回
getResponseHdader(“header”)	返回指定首部的串值
open(“method”,”url”)	建立对服务器端调用。Method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL
send(conten)	向服务器发送请求
setRequestHeader(“header”,”value”)	把制定首部设置为所提供的值。在设置任何首部之前必须先调用open()

二、发送请求

setRequestHeader(header,value)

当浏览器向服务器请求页面时，它会伴随着这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据（metadata）.首部信息用来声明一个请求是GET还是 POST。
Ajax请求中，发送首部信息的工作可以由setRequestHeader完成
参数header :首部的名字；参数 value：首部的值
如果用POST请求向服务器发送数据，需要将”Content-type” 的首部设置为 “application/x-www-form-urlencoded”.它会告知服务器正在发送数据，并且数据已经符合URL编码来。
该方法必须在open()之后才能调用

三、接收响应

readyState

readyState属性表示Ajax请求的当前状态。它的值用数字代表。

0 代表未初始化，还没有调用open 方法
1 代表正在加载，open方法已经被调用，但 send方法还没有被调用
2 代表加载完毕。send方法已被调用，请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕
每次readyState值的改变，都会触发readystatechange事件。如果把onreadystatechange事件处理函数赋给一个函数，那么每次 readyState的值的改变都会引发该函数的执行。
readyState值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把readyState的值统一设为4.

实例代码呈现

 <!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script>window.onload=function(){//            1、获取a节点，并为其添加onclick响应函数document.getElementsByTagName("a")[0].onclick=function(){//                3、创建一个XMLHttpRequest对象var request=null;request= new XMLHttpRequest();
//                4、准备发送请求对数据：url
//                增加时间戳起到禁用缓存对目的var url= this.href+"?time="+new Date();
//                var method="GET";var method="POST";//                5、调用XMLHttpRequest 对象对open方法request.open(method,url);request.setRequestHeader("ContentType","application/x-www-form-urlencoded");//                6、调用XMLHttpRequest对send方法request.send("name='atguigu'");//                7、为XMLHttpRequest 对象添加onreadystatechange响应函数request.onreadystatechange=function(){if(request.readyState==4){if(request.status==200||request.status==304){alert(request.responseText);}}}//                8、判断响应是否完成： XMLHttpRequest对象对readyState 属性值为4对时候
//                9、再判断响应是否可用：XMLHttpRequest对象对status属性值为200
//                10、打印响应结果：responseText
//                2、取消a节点对默认行为return false;}}</script>
</head>
<body><a href="helloAjax.txt" >Ajax</a>
</body>
</html>

Ajax获取数据的流程相关推荐

通过ajax获取的数据怎怎么在html上,Ajax获取数据然后显示在页面的实现方法
主要功能流程介绍循环获取列表数据点击列表数据进入详情页点击报名参加弹出报名成功提示框点击提示框中的确定按钮,跳回列表页代码实现流程和解说 1.访问链接list.PHP时判断是pc端还是客户端 ...
vue定时ajax获取数据,vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
ajax 微信code获取_获取链接的参数，判断是否是微信打开，ajax获取数据
//获取链接参数 function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "= ...
ajax获取数据中文乱码问题最简单的完美解决方案
ajax获取数据中文乱码问题最简单的完美解决方案参考文章: (1)ajax获取数据中文乱码问题最简单的完美解决方案 (2)https://www.cnblogs.com/konglxblog/p/1 ...
vue 读取ajax数据,详解vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
(vue)在ajax获取数据时使用loading组件不起作用
问题描述: 在用ajax获取数据时页面没有变化,想用一个loading图标在获取数据时显示,获取完成后隐藏整个系统用到了vue框架,在执行sure方法时调用ajax函数 sure() {conso ...
Chart.js使用及ajax获取数据
图表插件Chart.js使用插件简介安装插件简介 chart.js是一个优秀的开源图表处理插件,内置条形,折现,雷达,时间刻度等等图表渲染. 安装 chart.js官网. 我这里使用2019年3 ...
【四二学堂】jquery方式ajax获取数据并渲染页面
var newsData = ''; var mydata = {"pageNum":obj.curr,"pageSize":"5"}; / ...
jQuery中ajax获取数据赋值给页面
//html代码 <a href="javascript:void(0)" class="cityname" id="{$rr[code]}&q ...

Ajax获取数据的流程

一、Ajax的对象 XMLHttpRequest的方法

二、发送请求

setRequestHeader(header,value)

三、接收响应

readyState

Ajax获取数据的流程相关推荐

最新文章

热门文章