前后端数据交互的几种方式

---

前言

前后端数据交互的方式有哪些？
常用的有哪些？

---

一、传统的ajax(原生ajax)

应首先创建 XMLHttpRequest对象
这个对象包含的属性如下：

1.readyState:对象的状态：

• 0：未初始化
• 1：open方法成功调用send方法未调用
• 2：send方法已调用，尚未开始接收数据
• 3：正在接收数据，但尚未接收完成
• 4：完成

2.onreadystatechange:状态改变的时间触发器
3.resposeText：相应的文本内容
4.status:返回的http状态码：200：成功，404未找到；500标识的服务器内部错误

该对象包含的方法有：
1.
open(String method, String url, Boolean asynch ,String username, String password)

url:请求的地址
method:请求的方法，get/post
asynch:是否采用异步方法，true为异步，false为同步
username和password 提供http认证机制的用户名，通常我们可以不用管。
2.
send():向服务器发出请求，异步，会立即返回 null不发送数据， dom输入流或者字符串
json:eval函数用于解析json数组，转换成json字符串

二、jQuery中的ajax

$.ajax{} 代表jQuery中最底层的ajax函数，其属性代表ajax的相关属性和设置

其写法为：

$.ajax({
url:"请求的路径",
type:"get/post请求方式",
data:{属性名:"属性值",属性名2:"属性值2"},
dataType:"text/json服务器所返回的类型",
success:function(data){},	//请求成功时调用的函数 data:服务器所返回的数据
error:function(){},		//请求失败调用的函数
statusCode:{
	"400":function(){展示内容},
	"500":function(){展示内容},
	"200":function(){展示内容},
		}
})

$.get()
$.post()
	url:请求的路径 $.ajax中的url
	data:请求的参数
	function(){}:请求成功调用的函数
	dataType:服务器返回的结果 text/json
$.get(url,{属性名："属性值"},function(data){},"text/json")
$.getJson():
	$.getJson()为ajax获取json数据设置的，支持跨域的调用
		url:请求的路径
		data:请求的参数
		callback:返回成功的调用函数

$.get()和$.post()是对上面的原生ajax的封装，两个方法参数相同
$.post()和$.getJson()都是进行异步请求的方式，两个主要的区别在于：
$.post()请求返回的数据类型包括html \ text \ json \ xml ，但主要是text \ json
$.getJson()请求返回的数据只能是json格式

---

三、AngularJS（略）

四、表单中数据的提交方式

method = "get/post"
input 标签内添加个name=""
通过ajax进行返回数据的接收

五、JSP中的JSTL标签库

本方法主要用在JSP页面的数据交互

//引用JSTL的标签库，导入需要用的jar包
<%@ taglib url="http://java.sun.com/jsp/jstl/Core" prefix="c"%>
	<c:foreach items="${服务器所返回的数据}"var="展示的变量">
		<tr><td>${展示的变量.属性名或方法}</td></tr>