ajax+servlet+fastjson+js非同期リフレッシュを実現

1.08年ごろからajax技術が流行し始め、
そのhtml静的ページがバックグラウンドとデータを対話できる場合
今日はajaxの基礎の極速の入門を探究します
 2. まずfastjsonをインポートする.jar包------アリのオープンソースプロジェクト、ネット上でダウンロードすることができます
       3. 次にservlet javaコードを書きます.
@WebServicelet("/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 ddlist=new ArrayList();ddlist.add(dd1);ddlist.add(dd2);PrintWriter out = response.getWriter();//このfastjso.JArが持参したメソッドは、オブジェクトとlistのセットをすべて
Json文字列toJSONString();String jsonstr = JSON.toJSONString(ddlist);out.println(jsonstr);
}}
——————————————————————————
 2. それからhtmlページかjspページを直接書きます
簡単にscriptの中のコード<
                               function  fun(){
                                                                             var ajax=newXMLHttpRequest();そう書かなければならない(IE 5.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+"                                                                                     "+html_json.deptName; jsonオブジェクトの値の取得方法(オブジェクト)
                                                                                                                                          var deptObj = document.all.dept;                               deptObj.length=0;//複数のJsonオブジェクトfor(var i=0;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 ddlist=new ArrayList();
		ddlist.add(dd1);
		ddlist.add(dd2);
		PrintWriter out = response.getWriter();
		
		String jsonstr = JSON.toJSONString(ddlist);
		out.println(jsonstr);
		
		out.flush();
		out.close();
	}

}

jspページの

  
    
    
    

  
  
     
       
        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();
           
        
        
        }
   
   
   
  
  
                  jqs