有時(shí)要擅長(zhǎng)用，善用搜索引擎，問(wèn)老師之類的人和有用信息，解惑信息，解決問(wèn)題的信息，個(gè)人理解，個(gè)人思考等的記錄，這會(huì)是很好的學(xué)習(xí)方法——詩(shī)書畫唱

個(gè)人對(duì)JSON的格式的總結(jié)：[{自己定義的對(duì)象1的屬性名1：自己寫的對(duì)應(yīng)的屬性值1，自己定義的對(duì)象1的屬性名2：自己寫的對(duì)應(yīng)的屬性值2，......},{自己定義的對(duì)象2的屬性名1：自己寫的對(duì)應(yīng)的屬性值1，自己定義的對(duì)象2的屬性名2：自己寫的對(duì)應(yīng)的屬性值2，......},......]

個(gè)人的理解：每個(gè){}的部分有時(shí)就是可以視為一個(gè)完整的對(duì)象，因?yàn)橛袝r(shí)包含完整的對(duì)象的所有屬性名和屬性值。

個(gè)人理解：先執(zhí)行html，后執(zhí)行js，再執(zhí)行servlet，再執(zhí)行js（回調(diào)函數(shù)）。

個(gè)人對(duì)上圖的理解：是把數(shù)據(jù)放到了response中之后用responseText獲取。

個(gè)人對(duì)上圖的理解：將JSON字符串轉(zhuǎn)換成了數(shù)組。

個(gè)人對(duì)異步對(duì)象的理解：前一個(gè)任務(wù)執(zhí)行沒(méi)完畢，也會(huì)執(zhí)行后一個(gè)任務(wù)的對(duì)象。

異步就是有類似于“就近原則”一樣的規(guī)則，哪個(gè)更好執(zhí)行就先執(zhí)行哪個(gè)，比同步這種只會(huì)從上到下執(zhí)行，而且上一個(gè)沒(méi)執(zhí)行完就不會(huì)執(zhí)行下一個(gè)，若一直沒(méi)執(zhí)行成功就會(huì)一直死耗著，卡在那里的“死腦筋”更靈活。

個(gè)人對(duì)conf的理解：config的縮寫，配置，類似于一些如果不用而用別的就會(huì)不得不用上很多有重復(fù)內(nèi)容的別的內(nèi)容，如果用就是只要用一次的原來(lái)會(huì)重復(fù)內(nèi)容，有格式，模板式的內(nèi)容等等。

個(gè)人對(duì)上圖的理解：是在調(diào)用封裝的函數(shù)

在商品表中插入一些數(shù)據(jù)。

使用ajax技術(shù)實(shí)現(xiàn)打開list.jsp頁(yè)面，能夠顯示商品表中所有商品信息的功能。

create table Sp(

id int primary key auto_increment,

name varchar(100) ,

price Double,

type varchar(100)

);

--select * from Sp

insert into Sp(

name ,

price ,

type ) values?

("詩(shī)書畫唱手機(jī)1",66663,"詩(shī)書畫唱牌1"),

("詩(shī)書畫唱手機(jī)2",66664,"詩(shī)書畫唱牌2"),

("詩(shī)書畫唱手機(jī)3",66665,"詩(shī)書畫唱牌3");

如果servlet中用的時(shí)JSON的字符串的拼接，那么在jsp中寫的AJAX的部分要轉(zhuǎn)換成數(shù)組后再用拼接等，這樣才可以拼接成表格的字符串，之后除了下拉框（用innerHTML會(huì)有兼容性的問(wèn)題），都可以用innerHTML。用innerText等的話就單純是字符串，是不行的。當(dāng)然除了下拉框，其實(shí)在servlet中拼接成表格等自己想要的字符串就會(huì)更簡(jiǎn)單。

（1）、用拼接HTML代碼的方法

package com.SSHC.bean;

public class Sp {

private Integer id;

private String name;

private Double price;

private String type;

public Integer getId() {

return id;

}

public void setId(Integer id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public Double getPrice() {

return price;

}

public void setPrice(Double price) {

this.price = price;

}

public String getType() {

return type;

}

public void setType(String type) {

this.type = type;

}

}

package com.SSHC.controller;

import java.io.IOException;

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.SSHC.bean.Sp;

import com.SSHC.dao.SpDao;

/**

?* Servlet implementation class ListServlet

?*/

@WebServlet("/ListServlet")

public class ListServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

? ? ? ?

? ? /**

? ? ?* @see HttpServlet#HttpServlet()

? ? ?*/

? ? public ListServlet() {

? ? ? ? super();

? ? ? ? // TODO Auto-generated constructor stub

? ? }

/**

* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

*/

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

this.doPost(request, response);

}

/**

* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

*/

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// TODO Auto-generated method stub

SpDao ud = new SpDao();

List<Object> list;

try {

list = ud.selectAll(Sp.class,null);

/*StringBuilder jsonString = new StringBuilder("[");

String dot = "";

? for(Object o : list) {

Sp sp = (Sp)o;

jsonString.append(dot);

jsonString.append("{\"id\":");

jsonString.append(sp.getId());

jsonString.append(",\"name\":\"");

jsonString.append(sp.getName());

jsonString.append(",\"price\":\"");

jsonString.append(sp.getPrice());

jsonString.append(",\"type\":\"");

jsonString.append(sp.getType());

jsonString.append("\"}");

dot = ",";

}

??

? jsonString.append("]");

System.out.println(jsonString);*/

StringBuilder html=new StringBuilder ();

html.append("<table border='1'><tr><td>id</td><td>name</td><td>price"

+ "</td><td>type</td></tr>");

for (Object o : list) {

Sp p = (Sp)o;

html.append("<tr><td>"+p.getId()+"</td><td>"+p.getName()+"</td><td>"+p.getPrice()

+ "</td><td>"+p.getType()+"</td></tr>");

}

html.append("</table>");

response.setCharacterEncoding("UTF-8");

//將數(shù)據(jù)傳送到回調(diào)函數(shù)中

response.getWriter().write(html.toString());

//response.getWriter().write(jsonString.toString());

} catch (Exception e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

}

}

package com.SSHC.dao;

import java.lang.reflect.Field;

import java.lang.reflect.Method;

import java.sql.Connection;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.sql.Timestamp;

import java.util.ArrayList;

import java.util.List;

import com.SSHC.util.DbUtil;

//萬(wàn)能Dao

//T不是一個(gè)具體的java類，他是一個(gè)泛型參數(shù)

public class BaseDao<T> {

? ? public<T> List<T>selectAll(Class cls,String SQL) throws Exception{

? ? Connection conn = null;

? ? PreparedStatement pstm = null;

? ? ResultSet rs = null;

? ? List<T>list = new ArrayList<T>();

? ? //通過(guò)反射技術(shù)獲取表的名字，表的名字剛好和bean的名字一樣

? ? //獲取類的類名

? ? String tableName = cls.getSimpleName();

? ? String sql=null;

? ? if(SQL==null){

? ? sql = "select * from " + tableName;}

? ? else if(SQL!=null){

? ? ? ? sql = "select * from " + tableName

? ? ? ? +SQL;}

? ? System.out.println(sql);

? ?

? ? conn = DbUtil.getConn();

? ? pstm = conn.prepareStatement(sql);

? ? rs = pstm.executeQuery();

? ? //獲取bean中的所有屬性名

Field []fs = cls.getDeclaredFields();

? ? while(rs.next()) {

? ? //通過(guò)反射創(chuàng)建出cls對(duì)象的實(shí)例

? ? Object obj = cls.newInstance();

? ? for(int i = 0;i < fs.length;i ++) {

? ? //bean中的屬性名

? ? String fname = fs[i].getName();

? ? //獲取bean中的屬性的類型

? ? Class type = fs[i].getType();

? ? Object o = rs.getObject(fname);

? ? //System.out.println(o);?

? ? //將屬性對(duì)應(yīng)的set方法名拼接出來(lái)

? ? //取出屬性名的首字母,將它變成大寫

? ?String methodName = "set"?

? ? + fname.substring(0,1).toUpperCase()?

? ? + fname.substring(1);

? ? //System.out.println(methodName);

? ? //通過(guò)反射調(diào)用set方法

? Method m = cls.getDeclaredMethod(methodName, type);

? ? System.out.println(m);

? ? m.invoke(obj, o);? ?

? ? }

list.add((T)obj);

? ? }

? ? return list;

? ? }

? ??

? ??

? ??

? ??

? ??

public static Integer countAdd;

? ? public Integer add(T t) throws Exception{

? ? Connection conn = null;

? ? PreparedStatement pstm = null;

Integer count = -1;

? ? String tableName = t.getClass().getSimpleName();

?//System.out.println(tableName);

StringBuilder sql = new StringBuilder("insert into "

?+ tableName + " (");

?//取出t對(duì)象中的所有的屬性名

? ? Field []fs = t.getClass().getDeclaredFields();

? ? String dot = "";

? ? for(int i = 0;i < fs.length;i ++) {

? ? sql.append(dot);

? ? String fname = fs[i].getName();

? ? sql.append(fname);

? ? dot = ",";

? ? }

? ? sql.append(")values(");

? ? String dot1 = "";

? ? for(int i = 0;i < fs.length;i ++) {

? ? sql.append(dot1);

? ? sql.append("?");

? ? dot1 = ",";

? ? }

? ? sql.append(")");

? ? //System.out.println(sql);

? ?

? ? conn = DbUtil.getConn();

? ? pstm = conn.prepareStatement(sql.toString());

? ? //調(diào)用t對(duì)象中所有的get方法

? ? for(int i = 0;i < fs.length;i ++) {

? ? //取出屬性名

? ? String fname = fs[i].getName();

? ? //拼接get方法

String methodName = "get"?

? ? + fname.substring(0,1).toUpperCase()

? ? + fname.substring(1);

? ? //取出需要調(diào)用的方法

Method m = t.getClass().getDeclaredMethod(methodName);

? ? //反射調(diào)用get方法

? ? Object val = m.invoke(t);

? ? System.out.println("新增的數(shù)據(jù)是：" + val);

? ? //設(shè)置占位符

? ? pstm.setObject(i + 1, val);

? ? }

? ? count = pstm.executeUpdate();

? ? countAdd=count;

? ? System.out.println(countAdd);

? ? return count;

? ? }

? ? public static Integer countUpdate;

? ? public Integer update(T t,String SQL) throws Exception{

? ?

? ? System.out.println("這時(shí)傳過(guò)來(lái)的SQL為："+SQL);

? ? Connection conn = null;

PreparedStatement pstm = null;

Integer count = -1;

StringBuilder sql = new StringBuilder("update ");

//獲取表名，就是獲取t對(duì)象的類名

Class cls = t.getClass();

String tableName = cls.getSimpleName();

sql.append(tableName + " set ");

//獲取t對(duì)象的所有屬性名

Field[]fs = cls.getDeclaredFields();

//每個(gè)javabean的第一個(gè)屬性必須是id

//下標(biāo)是從1開始的，也就是排除了id屬性

String dot = "";

//定義一個(gè)List存放所有的修改的值

List<Object>params = new ArrayList<Object>();

for(int i = 0;i < fs.length;i ++) {

Field f = fs[i];

//獲取屬性名

String fname = f.getName();

System.out.println("下標(biāo)為"+i+"的屬性名："+fname);

//調(diào)用getXXX方法來(lái)獲取t中的屬性值

String methodName = "get"?

+ fname.substring(0,1).toUpperCase()

+ fname.substring(1);

System.out.println(methodName);

//通過(guò)反射獲取方法對(duì)象

Method m = cls.getDeclaredMethod(methodName);

//反射調(diào)用getXXX方法

Object obj = m.invoke(t);

? ? ? ? ? ??

//當(dāng)獲取到的值不為空時(shí)，才能進(jìn)行修改

if(obj != null) {

sql.append(dot);

sql.append(fname + " = ? ");

dot = ",";

params.add(obj);

}

}

//將id也放到params容器中去

// Method m1 = cls.getDeclaredMethod("getId");

Method m1 = cls.getDeclaredMethod(

"get"?

+fs[0].getName().substring(0,1)

.toUpperCase()

+ fs[0].getName().substring(1));

Object id = m1.invoke(t);

params.add(id);

//拼接where條件

fs[0].getName();

System.out.println("這個(gè)表的第一列的列名"

+ "(一般都為編號(hào)名)為："+fs[0].getName());

// sql.append("where id = ? ");

if(SQL==null){

sql.append("where "+fs[0].getName()+" = ? ");}

System.out.println(sql);

conn = DbUtil.getConn();

System.out.println("SQL:"+SQL);

if(SQL!=null){

sql.append(SQL);?

}

System.out.println("這時(shí)執(zhí)行的修改語(yǔ)句為："+sql);

pstm = conn.prepareStatement(sql.toString());

//設(shè)置占位符的值

if(SQL==null){

for(int i = 0;i < params.size();i ++) {

pstm.setObject(i + 1, params.get(i));

}}

if(SQL!=null){

pstm.setObject(1, "已支付");

}

System.out.println("這時(shí)執(zhí)行的修改語(yǔ)句為："+sql);

count = pstm.executeUpdate();

countUpdate=count;

? ? return count;

? ? }

//? ? public Integer delete(Integer id){

//? ? return 0;

//? ? }

? //萬(wàn)能Dao刪除方法

? ? public static Integer countDelete;

? ? public Integer delete(Integer id,Class cls)?

? ? throws Exception{

? ? Connection conn = null;

PreparedStatement pstm = null;

Integer count = -1;

String tableName = cls.getSimpleName();

Field[]fs = cls.getDeclaredFields();

for(int i = 0;i < fs.length;i ++) {

Field f = fs[i];

//獲取屬性名:fs[i].getName();

String fname = f.getName();

System.out.println("下標(biāo)為"+i+"的屬性名："+fname);

//調(diào)用getXXX方法來(lái)獲取t中的屬性值

String methodName = "get"?

+ fname.substring(0,1).toUpperCase()

+ fname.substring(1);

System.out.println(methodName);

//通過(guò)反射獲取方法對(duì)象

Method m = cls.getDeclaredMethod(methodName);

//反射調(diào)用getXXX方法

//當(dāng)獲取到的值不為空時(shí)，才能進(jìn)行修改

}

// String sql = "delete from " + tableName

// + " where id = ?";

String sql = "delete from " + tableName

+ " where "+fs[0].getName()+" = ?";

conn = DbUtil.getConn();

pstm = conn.prepareStatement(sql);

pstm.setInt(1, id);

count = pstm.executeUpdate();

countDelete=count;

? ? return count;

? ? }

? ? public static void main(String[] args) throws Exception {

?

? ?

? ? ? ?}

? ? ?

? ? ??

? ? ?

? ?

}

package com.SSHC.dao;

import com.SSHC.bean.Sp;

public class SpDao extends BaseDao<Sp> {}

package com.SSHC.util;

import java.io.IOException;

import java.io.InputStream;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import java.util.Properties;

public class DbUtil {

private static String driverName;

? ? private static String url;

? ? private static String user;

? ? private static String pwd;

? ??

? ? static {

? ? //讀取properties文件

? ? Properties prop = new Properties();

? ? //將db.properties文件讀取到內(nèi)存中去

? ? InputStream is = DbUtil.class.getClassLoader()

? ? .getResourceAsStream("db.properties");

? ? //加載內(nèi)容

? ? try {

prop.load(is);

//讀取內(nèi)容

driverName = prop.getProperty("dn");

url = prop.getProperty("url");

user = prop.getProperty("un");

pwd = prop.getProperty("up");

} catch (IOException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

? ? }

? ??

? ? //獲取數(shù)據(jù)庫(kù)連接對(duì)象的方法

? ? public static Connection getConn(){

? ? Connection conn = null;

? ? try {

Class.forName(driverName);

conn = DriverManager.getConnection(url,user,pwd);

} catch (Exception e) {

// TODO Auto-generated catch block

e.printStackTrace();

}? ?

? ? return conn;

? ? }

? ??

? ? public static void close(ResultSet rs,PreparedStatement pstm

? ? ,Connection conn){

? ? ? ? try {

? ? ? ? if(rs != null) {

? ? ? ? ? ? rs.close();

? ? ? ? ? ? }

? ? ? ? ? ? if(pstm != null) {

? ? ? ? ? ? pstm.close();

? ? ? ? ? ? }

? ? ? ? ? ? if(conn != null) {

? ? ? ? ? ? conn.close();

? ? ? ? ? ? }

? ? ? ? } catch(Exception e) {

? ? ? ? e.printStackTrace();

? ? ? ? }

? ? }

}

dn=com.mysql.jdbc.Driver

url=jdbc:mysql://localhost:3306/firstjsp?useUnicode=true&characterEncoding=UTF-8

un=root

up=root

<%@ page language="java" contentType="text/html; charset=UTF-8"

? ? pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

</head>

? ? ? ?<script type="text/javascript">

? ? ?//頁(yè)面中的所有的Html標(biāo)簽都被解析出來(lái)以后，就會(huì)運(yùn)行下面的函數(shù)

? ? ? ? ? ? ? ? ? ?window.onload = function(){

? ? ? ? ? ? ? ? ? ?//獲取省份下拉框

? ? ? ? ? ? ? ? ? ?var table = document.getElementById('table');

? ? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? ? ?//獲取省份下拉框中的數(shù)據(jù)（我現(xiàn)在執(zhí)行了）

? ? ? ? ? ? ? ? ? ?//從js代碼跳轉(zhuǎn)到j(luò)ava代碼怎么實(shí)現(xiàn)呢？ajax

? ? ? ? ? ? ? ? ? ?var xhr = createXhr();

? ? ? ? ? ? ? ? ? ?if(xhr) {

? ? ? ? ? ? ? ? ? ?//設(shè)置提交方式是POST提交和執(zhí)行的servlet的url路徑

? ? ? ? ? ? ? ? ? ?xhr.open('POST','ListServlet');

? ? ? ? ? ? ? ? ? ?//設(shè)置ajax請(qǐng)求頭

? ? ? ? ? ? ? ? ? ?xhr.setRequestHeader("content-type",?

? ? ? ? ? ? ? ? ? ?"application/x-www-form-urlencoded");

? ? ? ? ? ? ? ? ? ?//設(shè)置回調(diào)函數(shù)

? ? ? ? ? ? ? ? ? ?xhr.onreadystatechange = function(){

? ? ? ? ? ? ?if (xhr.readyState == 4 && xhr.status == 200){

? ? ? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? ? table.innerHTML = xhr.responseText;

? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ? ? ?//提交ajax請(qǐng)求

? ? ? ? ? ? ? ? ? ?xhr.send('pid=0');

? ? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ? ? ?}? ?

? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ?//將創(chuàng)建XMLHttpRequest對(duì)象的方法封裝起來(lái)

? ? ? ? ? ? ? ? ? ?function createXhr(){

? ? ? ? ? ? ? ? ? ?var xhr = null;

? ? ? ?if(window.XMLHttpRequest) {

? ? ? ?//判斷window對(duì)象中是否有XMLHttpRequest屬性

? ? ? ? ? ? ? ? ? ?xhr = new XMLHttpRequest();

? ? ? ? ? ? ? ? ? ?} else {

? ? ? ? ?//如果沒(méi)有XMLHttpRequest屬性，就使用ActiveXObject創(chuàng)建

? ? ? ? ? ? ? ? ? ?xhr = new ActiveXObject("Microsoft.XMLHTTP");

? ? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ? ? ?return xhr;

? ? ? ? ? ? ? ? ? ?}

?

? ? ? ? ? ? </script>

<body>

<div id='table'></div>

</body>

</html>

（2）、用拼接JSON字符串的方法

其余的不變，就是servlet和jsp，Ajax等的部分變了：

package com.SSHC.controller;

import java.io.IOException;

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.SSHC.bean.Sp;

import com.SSHC.dao.SpDao;

/**

?* Servlet implementation class ListServlet

?*/

@WebServlet("/ListServlet")

public class ListServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

? ? ? ?

? ? /**

? ? ?* @see HttpServlet#HttpServlet()

? ? ?*/

? ? public ListServlet() {

? ? ? ? super();

? ? ? ? // TODO Auto-generated constructor stub

? ? }

/**

* @see HttpServlet#doGet(HttpServletRequest request,

*? HttpServletResponse response)

*/

protected void doGet(HttpServletRequest request,

HttpServletResponse response)?

throws ServletException, IOException {

this.doPost(request, response);

}

/**

* @see HttpServlet#doPost(HttpServletRequest request,

*? HttpServletResponse response)

*/

protected void doPost(HttpServletRequest request,

HttpServletResponse response)?

throws ServletException, IOException {

// TODO Auto-generated method stub

SpDao ud = new SpDao();

List<Object> list;

try {

list = ud.selectAll(Sp.class,null);

StringBuilder jsonString = new StringBuilder("[");

String dot = "";

? for(Object o : list) {

Sp sp = (Sp)o;

jsonString.append(dot);

jsonString.append("{\"id\":");

jsonString.append(sp.getId());

jsonString.append(",\"name\":\"");

jsonString.append(sp.getName());

jsonString.append("\",\"price\":");

jsonString.append(sp.getPrice());

jsonString.append(",\"type\":\"");

jsonString.append(sp.getType());

jsonString.append("\"}");

dot = ",";

}

??

? jsonString.append("]");

System.out.println(jsonString);

/*StringBuilder html=new StringBuilder ();

html.append("<table border='1'><tr><td>id</td><td>name</td><td>price"

+ "</td><td>type</td></tr>");

for (Object o : list) {

Sp p = (Sp)o;

html.append("<tr><td>"+p.getId()+"</td><td>"+p.getName()+"</td><td>"

+p.getPrice()

+ "</td><td>"+p.getType()+"</td></tr>");

}

html.append("</table>");*/

response.setCharacterEncoding("UTF-8");

//將數(shù)據(jù)傳送到回調(diào)函數(shù)中

//response.getWriter().write(html.toString());

response.getWriter().write(jsonString.toString());

} catch (Exception e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

}

}

<%@ page language="java" contentType="text/html;?

charset=UTF-8"

? ? pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional

//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;?

charset=UTF-8">

<title>Insert title here</title>

</head>

? ? ? ?<script type="text/javascript">

? ? ?//頁(yè)面中的所有的Html標(biāo)簽都被解析出來(lái)以后，就會(huì)運(yùn)行下面的函數(shù)

? ? ? ? ? ? ? ? ? ?window.onload = function(){

? ? ? ? ? ? ? ? ? ?//獲取省份下拉框

? ? ? ? ? ? ? ? ? ?var table = document.getElementById('table');

? ? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? ? ?//獲取省份下拉框中的數(shù)據(jù)（我現(xiàn)在執(zhí)行了）

? ? ? ? ? ? ? ? ? ?//從js代碼跳轉(zhuǎn)到j(luò)ava代碼怎么實(shí)現(xiàn)呢？ajax

? ? ? ? ? ? ? ? ? ?var xhr = createXhr();

? ? ? ? ? ? ? ? ? ?if(xhr) {

? ? ? ? //設(shè)置提交方式是POST提交和執(zhí)行的servlet的url路徑

? ? ? ? ? ? ? ? ? ?xhr.open('POST','ListServlet');

? ? ? ? ? ? ? ? ? ?//設(shè)置ajax請(qǐng)求頭

? ? ? ? ? ? ? ? ? ?xhr.setRequestHeader("content-type",?

? ? ? ? ? ? ? ? ? ?"application/x-www-form-urlencoded");

? ? ? ? ? ? ? ? ? ?//設(shè)置回調(diào)函數(shù)

? ? ? ? ? ? ? ? ? ?xhr.onreadystatechange = function(){

? ? ? ? ? ? ?if (xhr.readyState == 4 && xhr.status == 200){

? ? ? ?var arr = JSON.parse(xhr.responseText);

? ? ? ?

? ? ? ?var? xhr2="<table border='1'><tr><td>id</td><td>name</td><td>price"

+ "</td><td>type</td></tr>";

? ? for(var i = 0;i < arr.length;i ++) {

? ?

? ? var sp = arr[i];

? ? var id = sp.id;

? ? var name = sp.name;

? ? var price = sp.price;

? ? var type = sp.type;

? ? xhr2=xhr2+"<tr><td>"+id+"</td><td>"

+name+"</td><td>"+price+"</td><td>"+type+"</td></tr>"

? ? }

? ? ? ?

? ? xhr2=xhr2+"</table>";

? ? ? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? ? table.innerHTML = xhr2;

? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ? ? ?//提交ajax請(qǐng)求

? ? ? ? ? ? ? ? ? // xhr.send('pid=0');

? ? ? ? ? ? ? ?xhr.send();

? ? ? ? ? ? ? ? ? // xhr.send(null);

? ? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ? ? ?}? ?

? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ?//將創(chuàng)建XMLHttpRequest對(duì)象的方法封裝起來(lái)

? ? ? ? ? ? ? ? ? ?function createXhr(){

? ? ? ? ? ? ? ? ? ?var xhr = null;

? ? ? ?if(window.XMLHttpRequest) {

? ? ? ?//判斷window對(duì)象中是否有XMLHttpRequest屬性

? ? ? ? ? ? ? ? ? ?xhr = new XMLHttpRequest();

? ? ? ? ? ? ? ? ? ?} else {

? ? ? ? ?//如果沒(méi)有XMLHttpRequest屬性，就使用ActiveXObject創(chuàng)建

? ? ? ? ? ? ? ? ? ?xhr = new ActiveXObject("Microsoft.XMLHTTP");

? ? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ? ? ?return xhr;

? ? ? ? ? ? ? ? ? ?}

?

? ? ? ? ? ? </script>

<body>

<div id='table'></div>

</body>

</html>

2、封裝代碼。

//將創(chuàng)建XMLHttpRequest對(duì)象的方法封裝起來(lái)

? ? ? ? ? ? function createXhr(){

? ? ? ? ? ? var xhr = null;

? ? ? ? ? ? if(window.XMLHttpRequest) {

? ? ? ? ? ? //判斷window對(duì)象中是否有XMLHttpRequest屬性

? ? ? ? ? ? xhr = new XMLHttpRequest();

? ? ? ? ? ? } else {

? ? ? ? ? ? //如果沒(méi)有XMLHttpRequest屬性，就使用ActiveXObject創(chuàng)建

? ? ? ? ? ? xhr = new ActiveXObject("Microsoft.XMLHTTP");

? ? ? ? ? ? }

? ? ? ? ? ? return xhr;

? ? ? ? ? ? }

? ? ? ? ? ? //conf={"pid":0,pwd:1}

? ? ? ? ? ? function ajax(url,conf,fn){

? ? ? ? ? ? var xhr = createXhr();

? ? ? ? ? ? if(xhr) {

? ? ? ? ? ? xhr.open('POST',url);

? ? ? ? ? ? xhr.setRequestHeader("content-type",?

? ? ? ? ? ? ? ? ? ? "application/x-www-form-urlencoded");

? ? ? ? ? ? xhr.onreadystatechange = function(){

if (xhr.readyState == 4 && xhr.status == 200){

? ? ? ? ? ? fn(xhr);

? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? ? var str = '';

? ? ? ? ? ? var dot = '';

? ? ? ? ? ? for(var attr in conf){

? ? ? ? ? ? str += dot;

? ? ? ? ? ? str += attr;

? ? ? ? ? ? str += '=';

? ? ? ? ? ? str += conf[attr];

? ? ? ? ? ? dot = '&';

? ? ? ? ? ? }

? ? ? ? ? ? xhr.send(str);

? ? ? ? ? ? }

? ? ? ? ? ? }