marui_base

导航

Ajax阅读摘要1

1，Ajax包含：

1>基于XHTML和CSS标准的表示

2>使用Document Object Model进行动态显示和交互

3>使用XML和XSLT进行数据交换和处理

4>使用XML HttpRequest与服务器进行异步通信

5>使用JavaScript绑定一切传统Web模式

2，Ajax分3部分实现

1>获取HttpRequest对象

   1: var xmlHttp = new XMLHttpRequest();

如果是再IE中的话，需要进行修改

   1: var xmlHttp = false;
   2:  
   3: try {
   4:     xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);
   5: } catch(e) {
   6:     try {
   7:         xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
   8:     } catch(e) {
   9:         xmlHttp = false;
  10:     }
  11:     
  12: }

2>向服务器进行请求发送

   1: function callServer() {
   2:     var city = document.getElementById(“city”).value;
   3:     var state = document.getElementById(“state”).value;
   4:     //    create URL
   5:     var url = “/scripts/getZipcode.jsp?city=” + city + ”&state=” + state;
   6:     //    open a connection
   7:     xmlHttp.open("GET", url, true);
   8:     //    Setup a function for the server to run when it's done.
   9:     xmlHttp.onreadystatechange = updatePage;
  10:     //    send the reqeust to the server
  11:     xmlHttp.send(null);
  12: }

3>用回调函数处理服务器返回结果，把查到的邮政编码显示在页面上

   1: function callback() {
   2:     if(xmlHttp.readyState == 4) {
   3:         var response = xmlHttp.responseText;
   4:         document.getElementById("zipcode").value = response;
   5:     }
   6: }

 

3，JavaWeb开发工具：MyEclipse；版本控制工具：CVS,CVSNT（Server），Client：WinCVS，Tortoise CVS

4，HTML是一组标签，负责网页的基本表现形式，JavaScript是在客户端浏览器进行的语言，负责在客户端与用户的互动；CSS是一个样式表，起到美化整个页面的功能

5，<a href=”http://sohu.com” target=”_blank”>Sohu</a>

6，所有JavaScript代码都是以函数（function）的方式存在的，HTML触发的动作对应的就是这里面的方法

7，多个页面用到同样功能，将js代码放在.js文件中，在HTML中以<script src=””></script>格式进行引用，其中src为.js文件位置的相对路径

8，在Browser中得文档对象模型：navigator, screen, document, history, location

9，Ajax简单的示例

   1: <!--
   2: To change this template, choose Tools | Templates
   3: and open the template in the editor.
   4: -->
   5: <!DOCTYPE html>
   6: <html>
   7:     <head>
   8:     <title></title>
   9:     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  10:     <script type="text/javascript">
   1:  
   2:         window.onload = init;
   3:         
   4:         var xmlHttp = new XMLHttpRequest();
   5:         
   6:         function init() {
   7:         document.getElementById("clickme").onclick = clickEvent;
   8:         }
   9:         
  10:         function clickEvent() {
  11:         if(xmlHttp) {
  12:             //    alert("xmlHttp init Success");
  13:             var name = document.getElementById("name").value;
  14:             var url = "/AjaxTest/Name?name=" + name;
  15:             //    alert("url is: " + url);
  16:             xmlHttp.open("GET", url, true);
  17:             xmlHttp.onreadystatechange = function() {
  18:             if(xmlHttp.readyState == 4) {
  19:                 var response = xmlHttp.responseText;
  20:                 //alert("response is: " + response);
  21:                 document.getElementById("result").innerHTML = response;
  22:             }
  23:             }
  24:             xmlHttp.send(null);
  25:         } else {
  26:             alert("ajax will not run");
  27:         }
  28:         }
  29:         
  30:         
  31:     
</script>
  11:     </head>
  12:     <body>
  13:     <div>TODO write content</div>
  14:     <div>
  15:         <form>
  16:         <p><label for="name"><input type="text" id="name" name="name" /></label></p>
  17:         <p><input type="button" value="clickme" id="clickme" name="clickme" /></p>
  18:         <p id="result"></p>
  19:         </form>
  20:         
  21:     </div>
  22:     </body>
  23: </html>

 

   1: /*
   2:  * To change this template, choose Tools | Templates
   3:  * and open the template in the editor.
   4:  */
   5: package com.marui.servlet.name;
   6:  
   7: import java.io.IOException;
   8: import java.io.PrintWriter;
   9: import java.util.Date;
  10: import javax.servlet.ServletException;
  11: import javax.servlet.annotation.WebServlet;
  12: import javax.servlet.http.HttpServlet;
  13: import javax.servlet.http.HttpServletRequest;
  14: import javax.servlet.http.HttpServletResponse;
  15:  
  16: /**
  17:  *
  18:  * @author Administrator
  19:  */
  20: @WebServlet(name = "Name", urlPatterns = {"/Name"})
  21: public class Name extends HttpServlet {
  22:  
  23:     // <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">
  24:     /** 
  25:      * Handles the HTTP <code>GET</code> method.
  26:      * @param request servlet request
  27:      * @param response servlet response
  28:      * @throws ServletException if a servlet-specific error occurs
  29:      * @throws IOException if an I/O error occurs
  30:      */
  31:     @Override
  32:     protected void doGet(HttpServletRequest request, HttpServletResponse response)
  33:         throws ServletException, IOException {
  34:     String name = request.getParameter("name");
  35:     PrintWriter pw = response.getWriter();
  36:     pw.write(new Date().toString() + name);
  37:     }
  38:  
  39:     /** 
  40:      * Returns a short description of the servlet.
  41:      * @return a String containing servlet description
  42:      */
  43:     @Override
  44:     public String getServletInfo() {
  45:     return "Short description";
  46:     }// </editor-fold>
  47: }

posted on 2011-10-30 16:00  marui_base  阅读(202)  评论(0)    收藏  举报