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 ddlist=new ArrayList();
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+"                                                                                      
"+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页面的
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



  
    
    
    My JSP 'index.jsp' starting page

  
  
     
  
  
                  jqs
       
   
















你可能感兴趣的:(html基础)