Download presentation
Presentation is loading. Please wait.
1
AJAX基础
2
课程目标 掌握AJAX基础 AJAX原理 AJAX的WEB开发
3
基于标准的表示技术，使用XHTML与CSS
动态显示和交互技术，使用Document Object Model(文档对象模型) 数据互换和操作技术，使用XML与 XSLT 异步数据获取技术，使用XMLHttpRequest JavaScript 将以上的一切都结合在一起
4
在Ajax应用程序中，XMLHttpRequest对象负责将用户信息以异步通信地发送到服务器端，并接收服务器响应信息和数据。
需要注意的是JavaScript本身并不具有向服务器发送请求的能力，要么使用window.open()方法重新打开一个页面，要么使用XMLHttpRequest对象发送请求，不同的是，前者是普通的即同步交互模式，而后者是异步交互模式。
5
XMLHTTP http_request = new ActiveXObject("Msxml2.XMLHTTP");//新版本IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");//旧版本IE http_request = new XMLHttpRequest(); //Netscope浏览器
6
onreadystatechange:指定当readyState属性改变时的事件处理句柄，属性只写。
7
readyState：返回当前请求的状态，属性只读。 这些状态用长度为４的整形数据表示，其属性的状态含义如下： 0：未初始化（对象已经建立，但是未初始化，即尚未调用open方法创建http请求） 1：初始化（对象已经建立，但是未调用send方法发送http请求） 2：发送数据（send方法已经被调用，但是当前的状态以及http头未知） 3：数据传送中（已经接收部分数据，因为响应及http头不全，这时通过response系统方法获取部分数据会出现错误） 4：传送完成（数据完毕，此时可以通过response系统方法获取完整的回应数据） responseBody:将回应信息正文以unsigned byte 数组形式返回，属性只读。 responseText:以字符串的形式返回服务器响应信息，属性只读。 responseXML:将响应信息格式化为XML Document对象返回，属性只读。
8
XMLHttpRequest对象的方法以及含义如下：
abort：取消当前请求； 语法：http_request.abort();调用此方法，当前请求返回uninitialized状态。 getAllResourceHeaders:获取相应的全部http头信息；像JSP中的HttpServletRequest对象一样，获取http请求的 请求头信息，语法：headers = http_request.getAllResourceHeaders(); getResourceHeader:从响应信息中获取指定的http头信息。 语法：head = http_request.getResourceHeader("header-name"); open:创建一个新的http请求，并指定此请求的方法，URL，以及验证信息（用户名/密码）。 语法：http_request.open(method,url,async,user,password); async为布尔值，指定请求是否异步方式，默认为true;如果为真，当state状态改变时会调用onreadystatechange属性指向的回调函数。如果服务器需要验证，则应该指定用户名和密码 。
9
send:发送请求到http服务器并接收回应。创建http请求后，就可以向服务器发送http请求，send方法被调用 语法：http_request.send(varBody); 参数varBody为要发送给服务器的内容。如果没有内容要发送，varBody参数可以省略,但最好写为null,因为如果省略不写在Firfox中会 报错，所以就为http_request.send(null);。此方法的同步或异步方式取决于open方法中的async参数。 setRequestHeader:单独设定请求的某个头。 status:返回当前HTTP请求的状态码，属性只读。如：404＝“文件未找到”，200＝“成功” statusText:返回当前HTTP请求的状态行，属性只读
10
例子 <SCRIPT LANGUAGE="JavaScript">
var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); xmlHttp.open("GET", " true); xmlHttp.onreadystatechange=function() { if (xmlHttp.readyState==4) { alert(xmlHttp.responseText); } xmlHttp.send(); </SCRIPT>
11
public class ajaxServlet extends HttpServlet{
private static final String CONTENT_TYPE="text/xml; charset=gb2312"; public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{ response.setContentType(CONTENT_TYPE); PrintWriter out=response.getWriter(); String action=request.getParameter("action"); if(("send").equals(action)){ StringBuffer sb=new StringBuffer(""); sb.append("<type_name>AA</type_name>"); sb.append("<type_name>BB</type_name>"); sb.append("<type_name>CC</type_name>"); sb.append("<type_name>DD</type_name>"); sb.append("</type>"); out.write(sb.toString()); out.close(); }
12
<body onLoad="getResult()"> <table width="80%" border="0" cellspacing="0" cellpadding="0"> <tr><td id="td"> </td></tr> </table> </body>
13
function getResult(){
var url = "/Test/ajaxServlet?action=send"; if (window.XMLHttpRequest) { req = new XMLHttpRequest(); }else if (window.ActiveXObject){ req = new ActiveXObject("Microsoft.XMLHTTP"); } if(req){ req.open("GET",url, true); req.onreadystatechange = complete; req.send(null); }} /* 分析返回的XML文档*/ function complete(){ if (req.readyState == 4){ if (req.status == 200) { var type = req.responseXML.getElementsByTagName("type_name"); var str=new Array(); for(var i=0;i< type.length;i++){ str[i]=type[i].firstChild.data; document.all['td'].innerHTML+=str[i];
14
dwr DWR是一个可以允许你去创建AJAX WEB站点的JAVA开源库。它可以让你在浏览器中的Javascript代码调用Web服务器上的Java代码，就像在Java代码就在浏览器中一样。 DWR工作原理是通过动态把Java类生成为Javascript。它的代码就像Ajax魔法一样，你感觉调用就像发生在浏览器端，但是实际上代码调用发生在服务器端，DWR负责数据的传递和转换。这种从Java到JavaScript的远程调用功能的方式使DWR用起来有种非常像RMI或者SOAP的常规RPC机制，而且DWR的优点在于不需要任何的网页浏览器插件就能运行在网页上。 Java从根本上讲是同步机制，然而AJAX却是异步的。
15
一个运行在服务器端的Java Servlet，它处理请求并且向浏览器发回响应。
运行在浏览器端的JavaScript，它发送请求而且还能动态更新网页。
16
<dwr> <!-- 仅当需要扩展DWR时才需要 --> <init> <creator id="..." class="..." /> <converter id="..." class="..." /> </init> <!-- 没有它DWR什么也做不了 --> <allow> <create creator="..." javascript="..." /> <convert converter="..." match="..." /> </allow> <!-- 有必要告诉DWR方法签名 --> <signatures>...</signatures> </dwr>
17
Creator是创建这个对象所使用的构建器，如果你希望使用传统的new方法就写成new，如果你希望使用spring来创建则写成spring。
非常有用的参数是exclude和include，exclude可以禁止页面调用后台的某个或某些方法，具体的写法是在create中加入： <exclude method="createDepartment"/>
18
<convert match="com. htxx. demo. datasource1. model
<convert match="com.htxx.demo.datasource1.model.Department" javascript="Department" converter="hibernate3"/> math属性 javascript属性
Similar presentations
