前后端数据交互——ajax（原生及jquery）

前后端数据交互——ajax

1. 介绍

2.原生ajax用法

3.jquery的ajax

4.ajax原理说明

前后端数据交互——ajax

1. 介绍

1.1 定义

Ajax(Asynchronous Javascript And XML) 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网

1.2 传统请求的问题

浏览器地址栏发送请求，是同步的（阻塞代码运行），当服务器很忙碌的时候会卡顿（等待），就造成了资源浪费

1.3 Ajax请求与传统请求的区别：

ajax数据交互的优点是在请求数据的时候不会阻塞后续js代码的执行
带有ajax代码的js代码的执行顺序
- 1.从上到下执行
- 2.遇到ajax代码后先发送请求
- 3.在等待服务器响应数据的时间段内继续向下执行其他js代码
- 4.等到服务器数据响应回来再执行渲染数据的代码

1.4 应用场景：

但凡遇到动态渲染的效果我们都应该使用ajax

2.原生ajax用法

2.1ajax的基础语法

本质上ajax其实是es5中提供的一个构造函数——XMLHttpRequest
ajax实现前后端数据交互的步骤如下

//1.创建 ajax交互对象 通过XMLHTTPRequest来实例化出来
let ajax = new XMLHttpRequest();
//2.建立前端和服务器之间的连接 ajax对象有一个方法 open 调用即可建立连接
ajax.open("请求方式"，"服务器url地址");
//3.发送请求 ajax对象有一个方法 send 调用即可发送请求
ajax.send();
//4.接收服务器响应数据  ajax中是通过ajax对象的一个事件——onreadystatechange(通信状态码/生命周期 改变事件)
ajax.onreadystatechange = ()=>{//5.接收响应数据 当通信状态码为4的时候 就可以获取到响应数据了if(ajax.readyState==4){if(ajax.status==200||ajax.status==304){console.log(ajax.responseText)}else{console.log("请求失败")}}
}

ajax 的通信状态码/生命周期
- ajax的通信状态码/生命周期有五个代表的含义各不相同
- 分别是
  - 0：请求未初始化（ajax对象还没有声明出来）
  - 1：已建立连接（ajax对象调用了open）
  - 2：已发送请求（ajax对象调用了send）
  - 3：服务器接收到请求并正在处理
  - 4：服务器已响应数据
- 随着ajax数据交互的一步步推荐通信状态码/生命周期会自动发生变化
- 每当通信状态码/生命周期发生变化就会触发一次onreadystatechange事件
在ajax中我们可以通过ajax对象的一个属性 readyState 来获取通信状态码/生命周期
- ajax对象.readyState
我们也可以通过ajax对象的一个属性 responseText 来获取响应数据
- ajax对象.responseText
我们还可以通过ajax对象的一个属性 status 来获取响应状态码
- ajax对象.status

2.2ajax提交数据

在不同的请求方式下请求提交数据的写法也不同我们主要了解一下 get 和 post两种请求方式的提交数据的写法

get

get请求提交数据是在地址后面添加 "?键名=键值&键名=键值&..."

//1.创建 ajax交互对象 通过XMLHTTPRequest来实例化出来
let ajax = new XMLHttpRequest();
//2.建立前端和服务器之间的连接 ajax对象有一个方法 open 调用即可建立连接

//get请求提交数据 提交在地址后面
ajax.open("get"，"服务器url地址?键名=键值&键名=键值&...");
//3.发送请求 ajax对象有一个方法 send 调用即可发送请求
ajax.send();
//4.接收服务器响应数据  ajax中是通过ajax对象的一个事件——onreadystatechange(通信状态码/生命周期 改变事件)
ajax.onreadystatechange = ()=>{//5.接收响应数据 当通信状态码为4的时候 就可以获取到响应数据了if(ajax.readyState==4){if(ajax.status==200||ajax.status==304){console.log(ajax.responseText)}else{console.log("请求失败")}}
}

post

post请求提交数据是写在 send方法中将要提交的数据作为send方法的实参传入
post请求在提交之前需要单独设置请求头使用ajax对象的setRequestHeader方法就可以设置请求头了

//1.创建 ajax交互对象 通过XMLHTTPRequest来实例化出来
let ajax = new XMLHttpRequest();
//2.建立前端和服务器之间的连接 ajax对象有一个方法 open 调用即可建立连接

//get请求提交数据 提交在地址后面
ajax.open("post"，"服务器url地址?键名=键值&键名=键值&...");

//设置请求头
ajax.setRequestHeader("content-type"，"application/x-www-form-urlencoded"/"application/json")

//3.发送请求 ajax对象有一个方法 send 调用即可发送请求
//将要提交的数据 作为实参 传入send方法中
ajax.send("键名=键值&键名=键值&..."/JSON.stringify({}));
//注意：如果设置为 application/json 提交的数据 必须是一个对象格式的json字符串//4.接收服务器响应数据  ajax中是通过ajax对象的一个事件——onreadystatechange(通信状态码/生命周期 改变事件)
ajax.onreadystatechange = ()=>{//5.接收响应数据 当通信状态码为4的时候 就可以获取到响应数据了if(ajax.readyState==4){if(ajax.status==200||ajax.status==304){console.log(ajax.responseText)}else{console.log("请求失败")}}
}

在不提交数据的时候的 post请求即使不设置请求头也不会出问题但是我们一般为了语义和提高容错率，都会选择设置请求头。

3.jquery的ajax

3.1基本用法

jquery的ajax 是 $的一个方法——ajax 调用这个方法并传参即可实现ajax数据交互

$(()=>{//调用ajax方法 实现数据交互$.ajax({url:"服务器url地址"，//必传项type:"请求方式",//可选项 默认值为getdataType:"数据交互的格式"//可选项 默认值为json 另外还可以选择 xml text jsonpdata:{},//请求提交的数据 可选项 默认不提交数据  如果想提交 在对象中 写入属性即可提交timeout:数字，//超时时间 可选项 默认为无限 如果设置了具体的超时时间 则会在请求发送后 超过超时                     时间还没接收到响应数据的时候  停止请求 并报错404   单位为msbeforeSend(){//这个方法函数 会在ajax发送请求前 执行}，success(res){//这个方法函数 会在ajax发送请求 并成功接收到响应数据的时候 执行 形参会接收到响应数据}，error(err){//这个方法函数 会在ajax接收响应数据失败的时候执行 形参会接收到 失败信息}，complete(){//这个方法函数 会在ajax交互完成的时候 执行}})
})

注意：在实参对象中四个方法理论上都可以不传但是success在实际开发中必传因为success是用来接收响应数据的

3.2jquery的ajax交互简化方法

get
- 用法：$.get("url地址?键值对&键值对...",(res)=>{ res形参用来接收响应数据 })
post
- 用法：$.post(url地址,{要提交的数据},(res)=>{ res形参用来接收响应数据 })

4.ajax原理说明

ajax的数据交互方式对比传统的输入地址的交互方法最大的优点是
- 是不阻塞后续代码
- 在等待响应数据的时间段内会继续向下执行后续js代码
这个优点的原理来源于 js的同步异步代码的区分和执行顺序

js同步异步代码的执行顺序

js代码从上到下执行
如果遇到同步代码就直接执行
如果遇到异步代码会先存入任务队列之后继续向下执行
直到所有同步代码都执行完了再去任务队列中将异步代码按照顺序依次取出并执行
js中同步代码和异步代码的分类
- 异步代码：事件、定时器、ajax
- 同步代码：除了异步之外都是同步
ajax代码为什么能不阻塞后续js代码的执行

//1.创建 ajax交互对象 通过XMLHTTPRequest来实例化出来
let ajax = new XMLHttpRequest();//同步代码
//2.建立前端和服务器之间的连接 ajax对象有一个方法 open 调用即可建立连接
ajax.open("请求方式"，"服务器url地址");//同步代码
//3.发送请求 ajax对象有一个方法 send 调用即可发送请求
ajax.send();//同步代码
//4.接收服务器响应数据  ajax中是通过ajax对象的一个事件——onreadystatechange(通信状态码/生命周期 改变事件)
ajax.onreadystatechange = ()=>{//ajax的异步 体现在事件上 事件是异步代码//5.接收响应数据 当通信状态码为4的时候 就可以获取到响应数据了if(ajax.readyState==4){if(ajax.status==200||ajax.status==304){console.log(ajax.responseText)}else{console.log("请求失败")}}
}

前后端数据交互——ajax（原生及jquery）相关推荐

前后端数据交互——ajax技术
在实际开发过程中,前端页面通常需要根据后台数据实现动态生成和实时更新,因此如何实现前后端数据交互成了开发过程中的难题. 现将使用ajax技术解决前后端数据的交互: (1)ajax技术介绍: ajax一 ...
ajax实现前后端数据交互
ajax实现前后端数据交互 1.在做项目的时候,或多或少都会用到ajax来实现前后端数据的交互,接下来我们就看一个简单的实例吧. 实例效果: 点击按钮,发送异步请求,请求后端的数据,显示在网页上. 接 ...
ajax连接前后端原理,前后端数据交互方法和原理
前后端数据交互方法和原理发布时间:2018-10-28 11:25, 浏览次数:742 对于想要搞web的新手而言,会用html+css+javascript实现一个页面没什么太大的困难,但是想要前 ...
前后端数据交互方法汇总
这篇文章给大家介绍几种常用的前后端数据交互方法,并给出使用建议.以提高前后端协同开发的效率.非常的详细,推荐给小伙伴们,有需要的小伙伴可以参考下. 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 ...
超详细总结：前后端数据交互原理
最近开始接触前后端的一些知识,查了很多资料,今天把互联网产品的前后端数据交互做个总结留做笔记. 互联网产品的前后端数据交互是通过一个通讯协议完成.前后台交互的协议主要包括HTTP,FTP,SMTP,T ...
干货 | 万字长文全面解析GraphQL，携程微服务背景下的前后端数据交互方案
作者简介古映杰,携程研发高级经理,负责前端框架和基础设施的设计.研发与维护.开源项目react-lite和react-imvc作者. 前言随着多终端.多平台.多业务形态.多技术选型等各方面的发展, ...

前后端数据交互——ajax（原生及jquery）

前后端数据交互——ajax

1. 介绍

2.原生ajax用法

3.jquery的ajax

4.ajax原理说明

前后端数据交互——ajax（原生及jquery）相关推荐

最新文章

热门文章