web前后端交互

1.利用cookie对象

Cookie是服务器保存在客户端中的一小段数据信息。使用Cookie有一个前提，就是客户端浏览器允许使用Cookie并对此做出相应的设置。一般不赞成使用Cookie。

（1）后台代码

Cookie cookie=new Cookie(“name”, “hello”);
response.addCookie(cookie);
（2）前台代码

Cookie[] cookies=request.getCookies();
for(int i=0;i<cookies.length;i++){
if(cookies[i].getName().toString().equals(“name”)){
out.print(cookies[i].getValue());
}
}

2.利用session对象

session对象表示特定会话session的用户数据。客户第一次访问支持session的JSP网页，服务器会创建一个session对象记录客户的信息。当客户访问同一网站的不同网页时，仍处于同一个session中。

（1）后台代码

request.getSession().setAttribute(“name”, name);
request.getSession().setMaxInactiveInterval(2);
response.sendRedirect(“welcome.jsp”);
（2）前台代码（jsp页面）

Object user=request.getSession().getAttribute(“name”);
3.利用request重定向，设置setAttribute

（1）后台代码

request.setAttribute(“name”, “cute”);
request.getRequestDispatcher(“welcome.jsp”).forward(request, response); //网址不会改变
PS:如果后台使用的转发代码为 response.sendRedirect(“welcome.jsp”); //网址变为welcome.jsp

则request设置的参数无效，因为已经切换到另一个请求了，request参数的有效期为本次请求。

（2）前台代码

String name=request.getAttribute(“name”).toString();

4.利用Ajax进行异步数据请求（得到的数据可以以json或xml格式返回，便于处理）

(1)后台代码案例（运用servlet传输数据）

public class TestServlet extends HttpServlet {

/**
 * Constructor of the object.
 */
public TestServlet() {
	super();
}

public void doGet(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {
	doPost(request, response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {

	response.setContentType("text/html");
	PrintWriter out = response.getWriter();
    String data="[{\"name\":\"apple\",\"price\":23},{\"name\":\"banana\",\"price\":12},{\"name\":\"orange\",\"price\":8}]";
	out.write(data);
	out.flush();
	out.close();
}

/**
 * Initialization of the servlet. <br>
 *
 * @throws ServletException if an error occurs
 */
public void init() throws ServletException {
	// Put your code here
}

}

2.前台js请求处理数据代码
function createXMLHttpRequest(){
var xmlrequest;
if(window.XMLHttpRequest){
xmlrequest=new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
xmlrequest=new ActiveXObject(“Msxm12.XMLHTTP”);
}catch(e){
try{
xmlrequest=new ActiveXObject(“Microsoft.XMLHTTP”);
}catch(e){
xmlrequest="";
}
}
}
return xmlrequest;
}
//获取数据的函数
function change(){
var xmlrequest=createXMLHttpRequest();
xmlrequest.open(“POST”,“TestServlet”,true);
xmlrequest.onreadystatechange=function(){
if(xmlrequest.readyState4&&xmlrequest.status200){
var data=JSON.parse(xmlrequest.responseText);
var content="

";
for(var i=0;i<data.length;i++){
content+="";
for(o in data[i]){
content+="";
}
content+="";
}
content+="

"+data[i][o]+"

";
document.getElementById(“test”).innerHTML=content;
}
};
xmlrequest.send();
}

总结：在用户访问网站整个生命周期中都会用到的数据用session来存储，例如用户名，登录状态，购物车信息

       显示在网页上的信息数据大多通过 request或Ajax方式获取

第二种
Ajax请求的五个步骤：

1、建立xmlHttpRequest对象

if(window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

if(xmlHttp.overrideMimeType) {

xmlHttp.overrideMimeType(“text/xml”);
}
} else if(window.ActiveXobject) {

var activeName = [“MSXML2.XMLHTTP”, “Microsoft.XMLHTTP”];

for(var i = 0; i < activeName.length; i++) {

try {

xmlHttp = new ActiveXobject(activeName[i]);

break;

} catch(e) {}

}

}

if(!xmlHttp) {

alert(“创建xmlhttprequest对象失败”);

} else {}

2、设置回调函数

xmlHttp.onreadystatechange= callback;

function callback(){}

3、使用OPEN方法与服务器建立连接 xmlHttp.open(“get”,“ajax?name=”+ name,true)

此步注意设置http的请求方式（post/get）,如果是POST方式，注意设置请求头信息xmlHttp.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”)

4、向服务器端发送数据

xmlHttp.send(null)；如果是POST方式就不为空

5、在回调函数中针对不同的响应状态进行处理

if(xmlHttp.readyState == 4){ //判断交互是否成功

if(xmlHttp.status == 200){ //获取服务器返回的数据 //获取纯文本数据

var responseText =xmlHttp.responseText;

document.getElementById(“info”).innerHTML = responseText;

}

}

扩展资料：

Ajax优缺点

优点：

1、异步请求，不妨碍用户浏览页面或者其他操作。

2、局部刷新，无需重新刷新页面。

3、界面与应用分离。有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

4、基于标准被广泛支持。

5、前端和后端负载平衡。最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。

缺点：

1、back和History,对浏览器机制的破坏。

2、安全问题。易受到黑客攻击。

3、对搜索引擎支持较弱。

4、不能很好支持移动设备。

5、违背URL和资源定位的初衷。