Ajax实现局部刷新

Ajax简介: 

Ajax是一种用于创建快速动态网页的技术。

 Ajax特点:

  • 通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。
  • 传统的网页(不使用Ajax)如果需要更新内容,必须重载整个网页页面

使用Ajax+jsp+servlet演示一个音乐列表

首先(Eclipse)创建JSP项目后在WebContent引入一个.js包和json.jar以及servlet-api.jar

Ajax实现局部刷新_第1张图片

 

musicList.jsp

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>





ajax局部刷新



			
			
			
			

 

musicListServlet.java

package cn.java.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONObject;


@WebServlet("/musicListServlet")
public class musicListServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//1、获取ajax传递过来的参数信息
		String flag = request.getParameter("flag");
		//2、需要返回的数据信息
		String data = " ";
		if("1".equals(flag)){//流行歌曲
			data = "下一秒
一生所爱
我最亲爱的"; }else if("2".equals(flag)){//经典歌曲 data = "爱
倔强
独角戏"; }else if("3".equals(flag)){//摇滚歌曲 data = "真的爱你
茫然
无"; } //3、将数据信息回写给ajax response.getOutputStream().write(data.getBytes("utf-8")); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } }

 运行效果:

Ajax实现局部刷新_第2张图片

Ajax实现局部刷新_第3张图片 

Ajax实现局部刷新_第4张图片 

 

你可能感兴趣的:(java,web)