前端与后端数据交互的方式之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的优缺点:
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() 方法后等待服务器的执行结果的返回,若在等待过程中超时,则不再等待,继续执行后面的脚本代码! 3.ajax.onreadystatechange = function(){ if (ajax.readyState == 4 && ajax.status == 200){ func_succ(ajax.responseText); }else if(ajax.readyState == 4 && ajax.status != 200){ //alert("ajax faild readyState:"+ajax.readyState+" status:"+ajax.status); } }; 4.ajax.send(null);
ajax.readystate