前端与后端数据交互的⽅式之ajax
前端与后端数据交互的⽅式之Ajax
　对于前端学习⽽⾔，CSS+HTML+JavaScript的学习在⾃我学习的情况下掌握也不是很难，但是想要实现前后端的数据交互在没有指导的情况下学习会是⼀头雾⽔。接下来就让我来浅谈⼀下前后端数据交互的⽅式。
web前端与后端是怎么连接的
⽹站数据处理主要分为三层。
第⼀层，表⽰层，这部分可以⽤HTML代码，CSS/Javascript代码来实现等。通过前端代码可以实现⽹页的布局和设计。这层⼜可以称为显⽰层。也就是你⽤浏览器打开能看到的⽹页。
第⼆层，是业务层，这层是负责处理数据的。常⽤的代码语⾔有PHP,JSP，Java等。通过这些后台处理语⾔的算法来处理前台传回的数据。必要的时候进⾏操作数据库，然后把结果返回给前端⽹页。
第三层，是数据层，这个就是数据库，⽤来存储数据的。通过业务层的操作可以实现增删改数据库的操作。
①你接触到的是这个⽹页是属于表⽰层，这个⽹页⼀般由HTML标签结合CSS/JAVASCRIPT来实现的。这时候你要先填⼊数据。
②然后你按提交触发后台处理机制，这时候数据会传到后台的代码进⾏处理。这部分代码根据不同⽹站可以使PHP,JSP，JAVA等。代码根据程序员预设的算法将收到的数据进⾏处理之后会相应的对数据库进⾏操作，存储数据等。
③成功操作完数据库之后，业务层的代码会再向表⽰层也就是显⽰器端传回⼀个指令通知你表格填写成功
⼀.从前端向后端传递参数⽅法
1.前端通过form表单，当你点击submit按钮发送数据给后台
2.后端会前端请求的反应，接收数据，处理数据再返回给前端。
⼆.通过ajax传递参数，ajax主要有两种⽅式get和post（这⾥我们主要讲解ajax）
什么是Ajax
1、Ajax的全称是Asynchronous JavaScript and XML，即异步JavaScript+XML。
2、它是⼀种技术⽅案，但并不是⼀种新技术。
3、它依赖的是现有的CSS/HTML/Javascript，⽽其中最核⼼的依赖是浏览器提供的XMLHttpRequest对象。这个对象为向服务器发送请求和解析服务器响应提供了流畅的接⼝，使得浏览器可以发出HTTP请求与接收HTTP响应，实现在页⾯不刷新的情况下和服务端进⾏数据交互Ajax和XMLHttpRequest 两者的关系：我们使⽤XMLHttpRequest对象来发送⼀个Ajax请求。
关于ajax的优缺点：
优点：
1.不需要插件⽀持（⼀般浏览器且默认开启 JavaScript 即可）；
2.⽤户体验极佳（不刷新页⾯即可获取可更新的数据）；
3.提升 Web 程序的性能（在传递数据⽅⾯做到按需发送，不必整体提交）；
4.减轻服务器和带宽的负担（将服务器的⼀些操作转移到客户端）；
缺点：
1.不同版本的浏览器对 XMLHttpRequest 对象⽀持度不⾜(⽐如 IE5 之前)；
2.前进、后退的功能被破坏（因为 Ajax 永远在当前页，不会记录前后页⾯）；
3.搜索引擎的⽀持度不够（因为搜索引擎爬⾍还不能理解 JS 引起变化数据的内容）；
get和post两种⽅法：
1.POST主要⽤来发送数据，GET主要⽤来接受数据；
2.PSOT发送数据的安全性较好，⽽GET较差；
3.POST发送数据不限制⼤⼩，⽽GET⼤⼩受限2~100k。
什么时候⽤GET和POST：在数据获取时⽤GET⽅式，在操作数据时应使⽤POST⽅式。
Ajax的使⽤
1.var AJAX=new XMLHttpRequest( );
2.AJAX.open('get','data/test.json',true);
第⼀个参数：POST||GET
第⼆个参数：要请求的url
第三个参数：接受⼀个布尔值，决定请求的⽅式
为true时，服务器请求是异步进⾏的，也就是脚本执⾏send() ⽅法后不等待服务器的执⾏结果，⽽是继续执⾏脚本代码；
为false时，服务器请求是同步进⾏的，也就是脚本执⾏send() ⽅法后等待服务器的执⾏结果的返回，若在等待过程中超时，则不再等待，继续执⾏后⾯的脚本代码！adystatechange = function(){
if (adyState == 4 && ajax.status == 200){
func_sponseText);
}else adyState == 4 && ajax.status != 200){
//alert("ajax faild readyState:"+adyState+" status:"+ajax.status);
}
};
4.ajax.send(null);
0 －（未初始化）还没有调⽤send()⽅法
1 －（载⼊）已调⽤send()⽅法，正在发送请求
2 －（载⼊完成）send()⽅法执⾏完成，已经接收到全部响应内容
web后端是指什么
3 －（交互）正在解析响应内容
4 －（完成）响应内容解析完成，可以在客户端调⽤了
HTTP 状态码 ajax.status
1**：请求收到，继续处理
2**：操作成功收到，分析、接受
3**：完成此请求必须进⼀步处理
4**：请求包含⼀个错误语法或不能完成
5**：服务器执⾏⼀个完全有效请求失败
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——交易成功
201——提⽰知道新⽂件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，⽤户代理必须复位当前已经浏览过的⽂件
206——服务器已经完成了部分⽤户的GET请求
300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问⽅式
304——客户端已经执⾏了GET，但⽂件未变化
305——请求的资源必须从服务器指定的地址得到
306——前⼀版本HTTP中使⽤的代码，现⾏版本中不再使⽤
307——申明请求的资源临时性删除
400——错误请求，如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现⽂件、查询或URl
405——⽤户在Request-Line字段定义的⽅法不允许
406——根据⽤户发送的Accept拖，请求资源不可访问
407——类似401，⽤户必须⾸先在代理服务器上得到授权
408——客户端没有在⽤户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且⽆进⼀步的参考地址
411——服务器拒绝⽤户定义的Content-Length属性请求
412——⼀个或多个请求头字段在当前请求中错误
413——请求的资源⼤于服务器允许的⼤⼩
414——请求的资源URL长于服务器允许的长度
415——请求资源不⽀持请求项⽬格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指⽰值，请求也不包含If-Range请求头字段    417——服务器不满⾜请求Expect头字段指定的期望值，如果是代理服务器，可能是下⼀级服务器不能满⾜请求
500——服务器产⽣内部错误
501——服务器不⽀持请求的函数
502——服务器暂时不可⽤，有时是为了防⽌发⽣系统过载
503——服务器过载或暂停维修
504——关⼝过载，服务器使⽤另⼀个关⼝或服务来响应⽤户，等待时间设定值较长
505——服务器不⽀持或拒绝⽀请求头中指定的HTTP版本
以上就是你本⼈在学习ajax过程中的⼀些总结，若是有理解不到位的地⽅欢迎⼤家指出。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。