Ajax 前后端数据交互

ajax 数据交互

今天又是奋斗的一天，行吧，来学习ajax

ajax 数据交互
- 什么是ajax？
- ajax的`优势`
- ajax的使用
- - 创建一个ajax对象
  - 配置这个对象
  - 发送请求
  - 接受返回过来的数据
- ajax状态码
- readystatechange
- responseText
ajax请求方式
- 封装一个属于自己的ajax

什么是ajax？

ajax全称 async javascript and xml

具有前后端交互的能力，如果我们使用form表单向后端去提交数据，我们的页面在提交的时候将会刷新

ajax是客户端向服务端发送信息的工具，以及接受响应的工具！

ajax是一个 默认异步 执行机制的功能

ajax的`优势`

我总结起来归根于以下几点：

原生js就可以使用，不需要插件的支持

用户体验好，页面不需要刷新就可以更新数据

减少服务端和带宽的负担

ajax的使用

创建一个ajax对象 new XMLHttpRequest（）

配置这个对象–open

发送请求—send

接受相应 onload或者onreadystatechange事件监听

具体步骤看下面代码

创建一个ajax对象

  let xhr=new XMLHttpRequest()

配置这个对象

xhr.open(请求方式，请求地址，同步还是异步)

        xhr.open('get', 'https://www.baidu.com')
//第三个参数默认是异步

发送请求

xhr.send()

接受返回过来的数据

要想接收到响应，必须遵从下面条件:

本次HTTP请求是成功的，也就是我们之前所说的http状态吗为200~299

ajax对象也有自己的状态吗，用来表示本次ajax请求中各个阶段

 xhr.onload = () => {console.log(xhr.responseText);}//或者xhr.onreadystatechange = () => {if (xhr.readyState === 4) {console.log(xhr.responseText);}}

ajax状态码

ajax状态码—xhr.readyState

是用来表示一个ajax请求的全部过程中的某一个状态

readyState===0:表示初始化完成，也就是open方法还没执行

readyState===1：表示配置已经完成，也就是执行完open之后

readyState===2：表示send方法已经执行完毕

readyState===3：表示正在解析响应内容(只有一部分解析了)

readyState===4: 表示响应内容已经解析完成，可以在客户端使用了

当readyState===4的时候，我们就可以正常使用服务端的数据了。再配合http状态码为200~299

ajax对象中有一个是xhr.status，这个是用来记录请求的http状态码的

当两个条件都满足的时候，我们的请求就完成了！

readystatechange

在ajax对象中有一个事件，叫readystatechange

这个事件是专门来监听ajax对象的readystate的值的

只要值发生变化，就会触发这个事件

所以我们可以采用这个事件来监听readystate中的值

const xhr = new XMLHttpRequest()
xhr.open('get', './data.php')xhr.send()xhr.onreadyStateChange = function () {// 每次 readyState 改变的时候都会触发该事件// 我们就在这里判断 readyState 的值是不是到 4// 并且 http 的状态码是不是 200 ~ 299if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {// 这里表示验证通过// 我们就可以获取服务端给我们响应的内容了}

responseText

记录服务端给我们的响应体内容的

ajax请求方式

再进入下面这个话题之前，我们先全局安装一个json-server，来利用json文件模拟后端阶段接口

npm i json-server -g

ajax请求方式有很多种，下面我总结了比较常用的五种

get —偏向于获取数据

post—偏向于提交数据

put —偏向于更新数据(整个覆盖)

patch —偏向于部分修改数据

delete —偏向于删除数据

以上五种，但工作中比较常用的是get和post

封装一个属于自己的ajax

我这里就简单封装，利用类似于这样的思路，封装完成,使用这个封装的ajax，请阅读一下下面这个手册--这个是配合json-server虚拟后端接口使用的

function changeObj(obj) {let arr = []for (i in obj) {arr.push(obj[i])}return arr
}function shuAjax(options) {let obj1 = {url: '',method: 'GET',async: true,data: {},headers: {"Content-Type": "application/form-www-urlencoded","Content-Type": "application/json"},success: function (res) {console.log(res);},error: function (err) {console.log(err);}}let { url, method, async, data, headers, success, error } = {...obj1,...options}switch (method.toUpperCase()) {case 'delete':}//首先设置基本的XMLlet xhr = new XMLHttpRequest()xhr.open(method, url, async)//设置请求头let newArr = changeObj(headers)for (let i = 0; i < newArr.length; i++) {xhr.setRequestHeader("Content-Type", newArr[i])}//作个判断，如果不是get和delete的话就要传值if (method.toUpperCase() === 'get' || method.toUpperCase === 'delete') {xhr.send()}else {xhr.send(JSON.stringify(data))}xhr.onload = () => {console.log(xhr.responseText);}
}

shuAjax使用方法：

格式：shuAjax({})

对象中的参数：

url 必须传的参数 --如果是要使用put PATCH delete需要在路由最后面加上所要访问的id值

method 可选不选为get

data 可选当用post PATCH put的时候传入一个对象形式的参数

使用示例

 <button id="btn1">get</button><script src="./shuAjax.js"></script><script>btn1.onclick = () => {shuAjax({url: 'http://localhost:3000/users/22',method: 'PUT',data: {username: 'kang',password: 1234556565}})}

Ajax 前后端数据交互相关推荐

【Demo】idea搭建SpringBoot和AJAX前后端数据交互
此文章详细介绍了idea 搭建springboot步骤,以及简易的前后端通过ajax进行简单数据交互代码,二话不说,进入正题. 第一步.idea开发工具搭建springboot框架来看下整个项目结构 ...
ajax连接前后端原理,前后端数据交互方法和原理
前后端数据交互方法和原理发布时间:2018-10-28 11:25, 浏览次数:742 对于想要搞web的新手而言,会用html+css+javascript实现一个页面没什么太大的困难,但是想要前 ...
前后端数据交互——ajax技术
在实际开发过程中,前端页面通常需要根据后台数据实现动态生成和实时更新,因此如何实现前后端数据交互成了开发过程中的难题. 现将使用ajax技术解决前后端数据的交互: (1)ajax技术介绍: ajax一 ...
前后端数据交互——ajax（原生及jquery）
目录前后端数据交互--ajax 1. 介绍 2.原生ajax用法 3.jquery的ajax 4.ajax原理说明前后端数据交互--ajax 1. 介绍 1.1 定义 Ajax(Asynchron ...
ajax实现前后端数据交互
ajax实现前后端数据交互 1.在做项目的时候,或多或少都会用到ajax来实现前后端数据的交互,接下来我们就看一个简单的实例吧. 实例效果: 点击按钮,发送异步请求,请求后端的数据,显示在网页上. 接 ...
前后端数据交互方法汇总
这篇文章给大家介绍几种常用的前后端数据交互方法,并给出使用建议.以提高前后端协同开发的效率.非常的详细,推荐给小伙伴们,有需要的小伙伴可以参考下. 1.HTML赋值输出到 Element 的 val ...
详解 AJAX-SpringBoot 前后端数据交互
详解 AJAX-SpringBoot 前后端数据交互 1. Ajax 概述 Ajax 的英文全称是 "Asynchronous JavaScript and XML",即 &quo ...
前后端数据交互|分页查询|表格-双向绑定|get和post的区别
目录 1 前后端数据交互 1.1 前端代码部署在前端服务器 1.2 前端代码在浏览器展示(只展示页面,没有数据)----自给自足 1.3 前端/浏览器请求后端数据 (后端死数据)----给 ...
软件测试的交互,软件测试--前后端数据交互
作为一个合格的软件测试人员, 能够熟练定位bug的位置是属于前端还是后端,是必备技能之一.所以就需要明白前后端数据是怎么进行交互的. 一.网站数据处理主要分为三层第一层,表示层,这部分可以用HTML ...

Ajax 前后端数据交互

ajax 数据交互

什么是ajax？

ajax的`优势`

ajax的使用

创建一个ajax对象

配置这个对象

发送请求

接受返回过来的数据

ajax状态码

readystatechange

responseText

ajax请求方式

封装一个属于自己的ajax

Ajax 前后端数据交互相关推荐

最新文章

热门文章

Ajax 前后端数据交互

ajax 数据交互

什么是ajax？

ajax的优势

ajax的使用

创建一个ajax对象

配置这个对象

发送请求

接受返回过来的数据

ajax状态码

readystatechange

responseText

ajax请求方式

封装一个属于自己的ajax

Ajax 前后端数据交互相关推荐

最新文章

热门文章

ajax的`优势`