一个简单实现ajax的实例

 Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。
Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的缩写。 
Ajax 做 什么 ？
Ajax 尝试建立桌面应用程序的功能和交互性，与不断更新的 Web 应用程序之间的桥梁。可以使用像桌面应用程序中常见的动态用户界面和漂亮的控件，不过是在 Web 应用程序中。

 

1 创建新的 XMLHttpRequest 对象 
	以支持多种浏览器的方式创建 XMLHttpRequest 对象 

function createXmlHttpRequest(){
	var xmlHttp = false;
	try { 
		xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 
	} catch (e){
		try {     
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
		} catch (e2){     
			xmlHttp = false; 
		} 
	}
	if (!xmlHttp && typeof XMLHttpRequest != 'undefined'){ 
		xmlHttp = new XMLHttpRequest(); 
	}
}

 

 Ajax 世界中的请求/响应
发出请求
Ajax 应用程序中基本都雷同的流程：
 1、从 Web 表单中获取需要的数据。
 2、建立要连接的 URL。
 3、打开到服务器的连接。
 4、设置服务器在完成后要运行的函数。
 5、发送请求。

XMLHttpRequest 对象 详解
·open()：建立到服务器的新请求。
·send()：向服务器发送请求。
·abort()：退出当前请求。
·readyState：提供当前 HTML 的就绪状态。
·responseText：服务器返回的请求响应文本。

HTTP 就绪状态
·0：请求没有发出（在调用 open() 之前）。
·1：请求已经建立但还没有发出（调用 send() 之前）。
·2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。
·3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。
·4：响应已完成，可以访问服务器响应并使用它。
<--
您也许期望任务就绪状态从 0 到 1、2、3 再到 4，但实际上很少是这种情况。
一些浏览器从不报告 0 或 1 而直接从 2 开始，然后是 3 和 4。其他浏览器则报告所有的状态。
还有一些则多次报告就绪状态 1。在上一节中看到，服务器多次调用 updatePage()，
每次调用都会弹出警告框 —— 可能和预期的不同！

-->

HTTP 状态代码

401：未经授权
403：禁止
404：没找到
200：一切正常
301：永久移动
302：找到（请求被重新定向到另外一个 URL/URI 上）
305：使用代理（请求必须使用一个代理来访问所请求的资源）

利用 DOM 进行 Web 响应
El.innerText
El. innerHTML

DWR: Easy Ajax to Java

Direct Web Remoting
DWR allows Javascript in a browser to interact with Java on a server and helps you manipulate web pages with the results.
DWR consists of two main parts:
1 A Java Servlet running on the server that processes requests and sends responses back to the browser.
2 JavaScript running in the browser that sends requests and can dynamically update the webpage.

下面来看一看一个简单的的ajax实例吧：

ajax 有两个方法。一个是处理方法。一个是回调的方法，也就是用来处理html页面用的。

我用的是一个带jar包的ajax 的实例：

说到带jar包那是做之前不用说你 也知道。加上一个dwr的jar包吗？加jar包和struts一样把jar 包放在WEB-INF/lib/就可以了。说了和struts 一样。那一定也要有一个xml文 件了。在WEB-INF/加一个dwr.xml文件。

这个文件了一定要在web.xml中配了。也配一个.怎么配呢？说了和struts一样了。那就是配一个servlet了吗。

<servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>

    <!-- This should NEVER be present in live -->
    <init-param>
      <param-name>debug</param-name>
      <param-value>true</param-value>
    </init-param>
  </servlet>

  <servlet-mapping>
    <servlet-name>dwr-invoker</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
  </servlet-mapping>

 接下来就是就要使用dwr.xml.文件了。

先通过配一个java类吧来学一学这个文件吧。

就像struts中的action 方式一样。如下：

<create creator="new" javascript="User">
      <param name="class" value="com.dwr.User"/>
</create>

 creator：方式

javascript：引用的对象名

class：是普通类》（可以是servlet.action）

value：类的路径

简单的一个类:

public class User {
	public String getUser(String userId){
		StringBuffer user=new StringBuffer();
		
		Connection conn=DBManager.getConnection();
		String sql="select * from orderitem where itemId=?";
		try {
			PreparedStatement ps=conn.prepareStatement(sql);
			ps.setInt(1, Integer.parseInt(userId));
			ResultSet rs=ps.executeQuery();
			if(rs.next()){
				user.append("{item_id:'");
				user.append(rs.getInt("itemId"));
				user.append("',item_name:'");
				user.append(rs.getString("itemName"));
				user.append("',unit_num:'");
				user.append(rs.getInt("unitNum"));
				user.append("',unit_price:'");
				user.append(rs.getDouble("unitPrice"));
				user.append("',sum:'");
				user.append(rs.getDouble("sum"));
				user.append("',order_id:'");
				user.append(rs.getInt("orderId"));
				user.append("'}");
			}else{
				user=new StringBuffer("{item_id:null,item_name:null,unit_num:0,unit_price:0,sum:0.0,order_id:null}");
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		System.out.println(user.toString());
		return user.toString();
	}
}

 现在就测试一下这个类有没有注册成功：

打开火福。在地址栏上输入： http://localhost:8080/工程名/dwr

注册成功就会在这个页面上显示这个类了。

Classes known to DWR:

• User (com.dwr.User)

然后点击打开这个类。打两个javascript 地址连接copy到jsp页面去就可以通过javascript访问java类了。

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Methods For: User (com.dwr.User)

To use this class in your javascript you will need the following script includes:

  <script type='text/javascript' src='/ajax_struts_javascript/dwr/interface/User.js'></script>
  <script type='text/javascript' src='/ajax_struts_javascript/dwr/engine.js'></script>

In addition there is an optional utility script:

  <script type='text/javascript' src='/ajax_struts_javascript/dwr/util.js'></script>

Replies from DWR are shown with a yellow background if they are simple or in an alert box otherwise.
The inputs are evaluated as Javascript so strings must be quoted before execution.

There are 10 declared methods:

• getUser( ); <script type="text/javascript"></script>
• wait( ); <script type="text/javascript"></script>
  

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

把上面红色字。copy天jsp页面就可以使用了。如下红色两行

 <head>
    <title>My JSP 'index.jsp' starting page</title>
	<script type='text/javascript' src='/ajax_struts_javascript/dwr/interface/User.js'></script>
  	<script type='text/javascript' src='/ajax_struts_javascript/dwr/engine.js'></script>
	<script type="text/javascript" src="<%=path%>/js/index.js"></script>
  </head>

 

下面就写一个简单的js代码调用了。

前面已经说过了。就两个方法。一个是触发方法，另一个是回调方法；

function getUser(id){
	User.getUser(id,updatdPage);
}
function updatdPage(userInfo){
	var userO=eval("("+userInfo+")");
	document.getElementById("item_id").value=userO.item_id;
	document.getElementById("item_name").value=userO.item_name;
	document.getElementById("unit_num").value=userO.unit_num;
	document.getElementById("unit_price").value=userO.unit_price;
	document.getElementById("sum").value=userO.sum;
	
}

 getUser(id)是一个业务处理方法，而下面的一个updatdPage(userInfo)则是加调方法对jsp页面时行处理的。

在这里有人可能会迷惑updatdPage(userInfo)中的userInfo是从哪儿来的呢。干么的呢。你调业务处理类时返的数据就会被userInfo获取到。就可以对数据进行操作了。

这就是一个简单的实例。可能说的不好。还是自己看实例吧