1. 程式人生 > >ajax+servlet+fastjson+js實現非同步重新整理

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

 必須這麼寫(不考試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>