ajax+servlet+fastjson+js實現非同步重新整理
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();
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();
}
}
<%@ 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>