Ajax异步请求的五个步骤
AJAX(Asynchronous JavaScript and XML):是指一种创建交互式网页应用的网页开发技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这就意味着可以在不重新加载整个网页的情况下,对网页的局部进行更新。
1.建立xmlHttpRequest异步对象
const xhr=new XMLHttpRequest();
2.创建HTTP请求(设置请求方法和URL)
//get方式
xhr.open('GET',URL);//post方式发送数据,需要设置请求头
xhr.open('POST',URL);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
除了method和URL两个必选参数外还有三个可选参数:flag,name,password
flag:参数值为布尔类型,用于指定是否用异步方式。true表异步,false表同步,默认为true。
name:
3.发送数据
//get不需要传递参数
xhr.send(null);//post必须有参数
xhr.send('a=100&b=200&c=300');
4.设置回调函数
xhr.onreadystatechange = callback;
5.在回调函数中对不同的响应状态进行处理
function callback() {//判断响应状态码if(xhr.readyState===4){// 判断交互是否成功if(xhr.status>=200&&xhr.status<300){// console.log(xhr.status);//状态码// console.log(xhr.statusText);//状态字符串// console.log(xhr.getAllResponseHeaders());//所有响应头// console.log(xhr.response);//响应体// 获取服务器响应的数据result.innerHTML=xhr.response;}else{}}
}
ajax中的readyState属性
0:未初始化。尚未调用 open()方法。
1:启动。已经调用 open()方法,但尚未调用 send()方法。
2:发送。已经调用 send()方法,但尚未接收到响应。
3:接收。已经接收到部分响应数据。
4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了。
只有在XMLHttpRequest对象完成了以上5个步骤之后,才可以获取从服务器端返回的数据。
ajax中的状态码(200-300则表示响应成功)
400:请求参数错误
401:无权限访问
404:访问的资源不存在
Ajax异步请求的五个步骤相关推荐
- ajax发送异步请求四个步骤,深入理解ajax异步请求的五个步骤(详细代码)
在前端工作中,经常会用到ajax,其实很多人只知道ajax是异步请求,不知道应该如何用它,它的基本步骤有哪些,ajax请求过程是怎样的?接下来这篇文章就给大家介绍Ajax的请求步骤,以及ajax请求步 ...
- jquery ajax步骤,jquery ajax(ajax请求的五个步骤jQuery)
jqueryajax AJAX是与服务器交流数据的艺术,它在不重载全部页面的情况下,完成了对部分网页的更新. jQueryAJAX实例 请点击下面的按钮,经过jQueryAJAX改变这段文本. 获得外 ...
- Ajax请求的五个步骤
目录 Ajax请求的五个步骤 一.定义 1.什么是Ajax 2.同步与异步的区别 3.ajax的工作原理 二.实现AJAX的基本步骤 1.创建XMLHttpRequest对象 2.创建HTTP请求 3 ...
- ajax请求的五个步骤_监控整个页面,非AJAX,需要通知
ajax请求的五个步骤 最近,在JSF中开发新图表和图表"导出服务"时,我遇到了一个非常普遍的问题. 当您执行长时间运行的任务(操作)时,您希望在开始时显示状态"请稍候- ...
- ajax请求的步骤,ajax请求的五个步骤
ajax请求的五个步骤 第一步,创建XMLHttpRequest对象 第二步,注册回调函数 第三步,配置请求信息,open(),get 第四步,发送请求,post请求下,要传递的参数放这 第五步,创建 ...
- php原生的异步请求,原生JavaScript实现Ajax异步请求
ajax现在是一种非常流行的技术,现在虽然可以利用JQuery或者一些第三方插件甚至微软提供的一些控件可以方面的实现ajax功能,但是明白其原理也是非常重要的,下面是来使用纯javascript实现获 ...
- ajax异步请求数据库实现级联下拉菜单。
ajax实现级联下拉菜单,使用Springboot实现. 思路很简单,使用ajax异步请求数据库数据即可. 文末有项目源码! 实现效果: 废话不多说,现在我们来开始实现! 第一步. 创建三张表:省.市 ...
- ajax异步请求,以及ajax异步返回的数据的处理方案
为什么JS会有同步任务和异步任务: js是单线程,会按照顺序执行一个一个的任务,如果遇到某个任务像网络请求一类的需要延长执行回调函数,那么页面就会阻塞,所以引入了异步的概念. 同步任务:同步任务不需要 ...
- php 返回字符串给aja,解决ajax异步请求返回的是字符串问题
1.返回结果差异 js获取后打印res.code无结果.因为返回数据格式不正确. php文件添加header头: header('Content-Type:application/json;'); 或 ...
最新文章
- pl/sql中建用户
- 判断js中的数据类型的方法
- python可视化直方图的代码
- VB6 中将数据导出到 Excel 提速之法
- C语言将raw转为bmp,RAW格式数据转BMP格式数据
- Jquery点点滴滴-draggable对象和droppable对象
- 如何最大程度地提高cin和cout的效率
- android通过代码设置铃声_让你的手机铃声与众不同 (附ios音乐dj)
- 【Java】课程设计—学生在线考试系统
- Docker文档笔记
- pypython画图中的cumsum是什么_Python绘图之matplotlib基本语法
- 使用nexus搭建maven私服(一)安装启动
- python代码变量作业_1作业python数据类型 条件循环 列表
- 工具类(Excel)[一]
- 系统平台运营热门店铺模式
- 台式计算机用u盘给电脑安装系统,台式机用u盘装系统 电脑店给台式机装系统详细教程...
- 如何 增删改查 XML文件中的元素
- synaptic在哪_在Ubuntu上需要Synaptic进行的10个软件包管理操作
- linux tar:谨慎地拒绝创建空归档文件
- 淘宝评价计分规则,店铺信用评价如何累计