1 / 18

AJAX 基础

AJAX 基础. 课程目标. 掌握 AJAX 基础 AJAX 原理 AJAX 的 WEB 开发. 基于标准的表示技术，使用 XHTML 与 CSS  动态显示和交互技术，使用 Document Object Model( 文档对象模型 )  数据互换和操作技术，使用 XML 与 XSLT  异步数据获取技术，使用 XMLHttpRequest  JavaScript 将以上的一切都结合在一起. 在 Ajax 应用程序中， XMLHttpRequest 对象负责将用户信息以异步通信地发送到服务器端，并接收服务器响应信息和数据。

mura
Télécharger la présentation

AJAX 基础

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. AJAX基础

  2. 课程目标 • 掌握AJAX基础 • AJAX原理 • AJAX的WEB开发

  3. 基于标准的表示技术，使用XHTML与CSS •  动态显示和交互技术，使用Document Object Model(文档对象模型) •  数据互换和操作技术，使用XML与 XSLT •  异步数据获取技术，使用XMLHttpRequest •  JavaScript 将以上的一切都结合在一起

  4. 在Ajax应用程序中，XMLHttpRequest对象负责将用户信息以异步通信地发送到服务器端，并接收服务器响应信息和数据。在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", "http://localhost:8080/index.html", 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">&nbsp;</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。Creator是创建这个对象所使用的构建器，如果你希望使用传统的new方法就写成new，如果你希望使用spring来创建则写成spring。 • 非常有用的参数是exclude和include，exclude可以禁止页面调用后台的某个或某些方法，具体的写法是在create中加入： <exclude method="createDepartment"/>  

  18. <convert  match="com.htxx.demo.datasource1.model.Department"  javascript="Department" converter="hibernate3"/> • math属性 • javascript属性

More Related