ajax+servlet+fastjson+js实现异步刷新

来源：互联网发布：java视频模糊编辑：程序博客网时间：2024/05/08 07:14

1.大概从08年开始ajax技术开始流行，

出现那种 html 静态页面可以与后台交互数据的情况

今天专门探究 ajax 基础极速入门

2. 首先导入 fastjson.jar包------阿里的开源项目，网络上可以下载

3. 然后就是书写 servlet java 代码：

@WebServlet("/ss") 注解

public ss{

dopost( req ,resp ){

response.setContentType("text/html;charset=UTF-8");

dept dd1=new dept(1,"nima");
dept dd2=new dept(2,"nimad");
List<dept> ddlist=new ArrayList<dept>();
ddlist.add(dd1);
ddlist.add(dd2);
PrintWriter out = response.getWriter();
// 这个fastjso.jar 自带的方法可以将对象和 list集合全部转化为

json 字符串， Json.toJSONString();
String jsonstr = JSON.toJSONString(ddlist);
out.println(jsonstr);

}}

——————————————————————————

2. 然后就是直接写 html页面或者是jsp页面

简单些 script 里面的代码<

function fun(){

var ajax=newXMLHttpRequest(); 必须这么写（不考试IE5.6）

ajax.onreadystatechange = function(){
  if(ajax.readyState!=4){
   document.getElementById("msg").innerHTML = "正在加载数据.....";
  }else{    这就是 servlet里面 out.print( jsonstr );
   var html = ajax.responseText;

   var json = eval('('+html+')');//

将json字符串转换为json对象必须的写

//document.getElementById("msg").innerHTML =html_json.deptId+" <br/>"+html_json.deptName; json对象取值方法（一个对象）

var deptObj = document.all.dept;
  deptObj.length=0;    //清空防止多次点击出现乱
多个Json对象 for(var i=0;i<json.length;i++){
   var opt = new Option(json[i].deptName,json[i].deptId);
  deptObj.options.add(opt);
   }

  }
  }--匿名的function{}
};
//设置请求数据 --这个就是 servlet里面的 request.getpramar("deptid")
  ajax.open("post", "DeptSvt?deptId=101", true); --
//开始请求
ajax.send(null);

}

4. 贴出完整的代码 servlet的

package com;import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import java.util.List;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 com.alibaba.fastjson.JSON;public class svt extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html;charset=UTF-8");dept dd1=new dept(1,"nima");dept dd2=new dept(2,"nimad");List<dept> ddlist=new ArrayList<dept>();ddlist.add(dd1);ddlist.add(dd2);PrintWriter out = response.getWriter();String jsonstr = JSON.toJSONString(ddlist);out.println(jsonstr);out.flush();out.close();}}

jsp页面的

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>My JSP 'index.jsp' starting page</title>  </head>       <script type="text/javascript">               function ff(){             var ajax=new XMLHttpRequest();           alert(ajax);                     ajax.onreadystatechange = function(){                            if(ajax.readyState!=4){                  document.getElementById("msg").innerHTML = "正在加载数据..";                 }else{                    // 如果 传过来是 json 对象 ，那么 可以 使用 转换                    var html = ajax.responseText;                                       var json = eval('('+html+')');// json字符串转换为 json对象                                       for(var i=0;i<json.length;i++){                         alert(',.a取值dfs,.'+json[i].id);                    }                   document.getElementById("msg").innerHTML = "chengg";                                    }           };           ajax.open("post", "svt", true);           ajax.send();                                   }         </script>    <body>                  <a href="" onclick="ff()">jqs</a>       <input type="button" value="wo de " onclick="ff()" />   <div id="msg">          </div>     </body></html>

0 0