ajax基礎知識01

honghu79 12年前發布 | 59K 次閱讀 Arduino Property Binder 酸橙派 google應用商城 CodeBunk

一、我們應該如何理解struts1.x整個框架是怎么弄得?

1、首先是前端控制器ActionServlet
2、配置對象---解析配置文件
   3、Action
4、ActionForm

這4個之間是怎么協同工作的
1、首先在應用程序啟動的時候，最先實例化是AS（啟動加載）
   （1）配置對象實例化；具體就是將配置文件導入到配置對象里面（加載到內存中）（SAX,DOM，digest都可以）
   從此以后看這個配置文件怎么寫的，直接看配置對象就行了。
   配置對象包含ActionForward，ActionMapping，ActionMappings，FormBean，FormBeans，StrutsConfig，MessageResources
   （2）AS就等著接收請求，請求來之后，AS解析請求，并根據請求前面的字符串比較配置文件里面的信息
  與哪一個action對應，看看配置文件里面的信息有沒有與某一個form關聯。如果有的話就做一個form對象，
  并把用戶提交的表單信息填充到form中，并把該信息放到request或者session.
  ***只要看配置文件的信息
2、調用action的執行方法，會有一個String返回值。會通過字符串再通過配置文件再找到一個地址；或者進行重定向
  或者進行轉發。

二、復習JSP的重點

jsp里面的很多內容都不用了
常用的
  <%%>
  <%=%>
  <%@page import=""%>
  <%@page pageEncoding=""%>
  <%@include file=""%>
  <%@taglib uri="" prefix=""%>
常用內建對象
pageContext     功能：1setAttribute 2getAttribute 3獲得其他內建對象
request
response
session
application
out輸出頁面

EL表達式

${1+2}
${pageScope.msg}
${requestScope.msg}
${sessionScope.msg}
${applicationScope.msg}

${sessionScope.user.name}
${sessionScope.user.salary gt 10000}

JSTL
<c:if test="">
</c:if>

<c:choose>
  <c:when test="${}">
  </c:when
  <c:otherwise test="">
  </c:otherwise>
</c:choose>

<c:forEach items="${...}" var="">

</c:forEach>

無body的TagLib

三、javascripts
寫在jsp里面的javascripts是原封不動地送到客戶端的瀏覽器來使用，但還要與服務器進行一個連接
這是web編程里面的關鍵技術

javascripts是重點
要盡量的往里鉆

1、JavaScript 操作HTML 必須很熟練
2、JavaScript訪問服務器Ajax,必須會的技術
3、JavaScript面向對象的一些知識
4、JavaScript框架

function f(a,b){

}

在js中，function本身就是一個對象。
在這個對象中有一個arguments參數屬性（數組）
alert(argument.length)
argument數組，有多個元素構成
.length屬性返回長度
頁面中JS
<script type="text/javascript">
function f(){
//f();可以不傳遞參數也可以傳遞參數；如果方法設計了參數：只是為了給參數起一個別名
//比如f（a，b）的意思是argument[0]別名為a，argument[1]別名為b
//與JAV語言中的方法是不同的。java中方法是用來傳遞參數的
alert(argument.length);
var sum=0;
for (i=0;i<arguments.length;i++){
sum+=arguments[i];
//window.open表示瀏覽器的內建對象
//window.setInterval(function(){
// alert("hahahha");//方法是用來每秒鐘執行個操作
//},1000);

}

}
</script>

以前我們打開瀏覽器，輸入相應地址，瀏覽器會與服務器進行通信。
現在呢，我們是希望我們開發的js腳本能直接與服務器進行通信。
js發請求，并拿到服務器的響應，并來處理這個結果。

比如在提交表單時，可以不用更新整個頁面，而只是刷新部分小的部件
主要是為了能考慮性能
常用場景：
登錄頁面
注冊頁面：驗證碼等的問題；保證用戶名唯一性和驗證碼符合性
不是通過瀏覽器來發送請求而是由js來發送請求，服務器給出對應的響應
我們可以通過JS來控制驗證碼不對的話就不能去提交，這樣的話：用戶體驗好；性能好
比如
鼠標一離開用戶名文本框，就提示用戶名已經使用請更換其他用戶名
鼠標一離開電子郵件框體，則提示格式不對等

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>1</title>

  <script type="text/javascript">
   function f(){
    //此函數沒有形參,有無形參都可以,有也僅是說明傳過來的參數有個別名而已
    var sum=0;
    //定義變量用js
    alert(arguments.length);
    //arguments是一個數組；length屬性代表數組的元素個數
    // for (i=0;i<arguments.length;i++){
     // sum+=arguments[i];
     // alert(sum);
    // }
    // alert(sum);
    var taskid=window.setInterval(function(){
     //windows代表瀏覽器；
     //每隔100000秒執行一次這個函數
     alert("hahahhahaha")},100000);
    window.setTimeout(function(){},20000);
    //多長時間之后執行function()
    window.clearInterval(taskid);
    //通過這句可以將taskid的定時函數關閉

    //
   }


   function d(){
    var taskid1=window.setInterval(function(){
     alert("hehehehehe")},1000);

    window.setTimeout(function(){
     window.clearInterval(taskid1);
    },10000)

    //function d()以上代碼的意思是，每秒執行一次代碼，執行10次后結束程序

   }

四、XMLHttpRequest
    function testAjax(){

    var xmlHttpRequest = null;

    //初始化xmlHttpRequest對象
    //不同的瀏覽器初始化的方式不一樣
    //js里面只有對象沒有類
                if ((typeof XMLHttpRequest) != 'undefined') {
     // FF(ie的最新版本已經支持以下方式)
                    xmlHttpRequest = new XMLHttpRequest();
                }
                else {
     // IE
                    xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp');
                }

                //創建和服務器的連接
                //arg0: get或post方式
                //arg1: 要連接的地址
                //arg2: 是否是異步的方式連接

                var userValue = document.getElementById('user').value;
                var url = 'some?user='+userValue;
                //地址
                xmlHttpRequest.open('GET', url, true);
                //參數的意思:get請求還是post請求；url地址；true采用的是異步方式；


                // 給onreadystatechange屬性賦值了一個函數
                // 注冊了一個‘狀態監聽器’，當xmlHttpRequest的狀態
                // 一改變，該函數就調用
                xmlHttpRequest.onreadystatechange = function(){
                    //xmlHttpRequest.readyState屬性表示當前的狀態碼
                    if (xmlHttpRequest.readyState == 4) {
                        //responseText返回文本方式的響應內容
                        var respTxt = xmlHttpRequest.responseText;
                        var d1 = document.getElementById('msg');
                        d1.innerHTML = respTxt;

                    }else {
                       var d1 = document.getElementById('msg');
                          d1.innerHTML = 'loading...';
                    }

                };

                //向服務器發出請求！！！
                // xmlHttpRequest在和服務器交互的過程中
                // 經歷5個狀態
                // 0 連接還沒有建立
                // 1 連接已經建立，但是還沒有發請求
                // 2 請求已經發送
                // 3 正在和服務器正交互
                // 4 響應結束

                // 每當狀態發生改變的時候，就會調用
                //onreadystatechange所指定的函數
                //也就是會調用4次這個函數
                xmlHttpRequest.send(null);
                //發出請求
                //如果是get請求，這里就是null；如果是post請求，這里就是http提交的表單數據

            }



  </script>
  <meta name="author" content="songxl" />
  
</head>
<body>

  <input type="button" onclick="f(1,2,3);" value="click me"/>

</body>
</html>

tomcat配置文件的含義
tomcat ---conf----web.xml文件

請求是發給servlet不是發給jsp

在js里面，任何html元素都被當作對象
document.getElementById("")
d1.innerHTML

<input type="text" id="user" name="user" value="" onblur=""/>
解釋：id是了ajax使用的id
   name是提交表單的別名
   兩者最好一樣
   可以減少接收請求的servlet的代碼減少

servlet
SomeServlet.java web.xml其路徑為/some

package org.whatisjava.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class SomeServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  response.setContentType("text/html");
  String user=request.getParameter("user");
  if ("whatisjava".equals(user)){
   System.out.println("ok");
  }else{
   System.out.println("Error");
  }


  response.setContentType("text/html");
  PrintWriter out = response.getWriter();
  out.write("<html><body>hello</body></html>");
}

}

五、json技術
使用ajax的場景，不要亂用：只刷新頁面的很小的局部數據時
在網絡上傳輸數據一般情況為txt，如果只是字符串的話，相當容易
如果返回的是多個字符串，可能還有排序等時，最好是返回的xml格式的文件（結構化的文本）
<list>
<item>Java....</item>
<item>Java....</item>
<item></item>
</list>

怎么把這個xml文件解析成可識別的項呢？

xml結構化文件可以表達任何數據

js---->訪問服務器---->返回xml---->js需要解析xml文件
這樣的話對js的要求就太高了。
----
從而JSON出現，大量用JSON
JSON也是一種簡單的文本,在ajax場合中，json中應用比xml要多

  AJAX
  AJAS


JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。易于人閱讀和編寫。同時也易于機器解析和生成。
它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一個子集。 JSON采用
完全獨立于語言的文本格式，但是也使用了類似于C語言家族的習慣（包括C, C++, C#, Java, JavaScript, Perl, Python等）。
這些特性使JSON成為理想的數據交換語言。

JSON建構于兩種結構：

“名稱/值”對的集合（A collection of name/value pairs）。不同的語言中，它被理解為對象（object），紀錄（record），
結構（struct），字典（dictionary），哈希表（hash table），有鍵列表（keyed list），或者關聯數組（associative array）。
值的有序列表（An ordered list of values）。在大部分語言中，它被理解為數組（array）。
這些都是常見的數據結構。事實上大部分現代計算機語言都以某種形式支持它們。這使得一種數據格式在同樣基于這些結構
的編程語言之間交換成為可能

</script>

通過js為表格添加一行

function addRow(obj,className){
var tb=$('tb');

var row=tb.insertRow(tb.rows.length);//表格插入一行，從哪里開始插入，返回值是剛剛插入tr對象
var id=row.insertCell(row.cells.length);//在tr里面插入單元格，返回值是剛剛插入td的對象
var name=row.insertCell(row.cells.length);
var sex=row.insertCell(row.cells.length);
var age=row.insertCell(row.cells.length);
id.innerHTML=obj.id;

}

js_object.jsp

<%@page pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript" src="js/prototype-1.6.0.3.js">

  //導入js代碼
  //必須是一個專門的script
  </script>
  <script type="text/javascript">
   //var point = {x:100,y:200};//這個對象只有屬性沒有方法，是一種特殊的語法格式；
   //alert(point.x + point.y);

   //var someObj = {v1:100,v2:{x:100,y:200}};//這個對象包含一個屬性v1還有一個對象v2
   //alert(someObj.v2.x);//可以通過這種方式來訪問其子對象


   //var str = "{'x':100,'y':200}";//如果js傳給服務器是這樣的字符串的話，就可以解釋成js對象
   //JSON字符串


   //var obj = str.evalJSON();//通過evalJSON可以把字符串轉換成對象；但是字符串必須按照設定的格式寫
   //alert(obj.x);
    //prototype,js文件里面的方法
    //添加這個組件后，str里面增加了evaJSON方法；這種擴展方式在java中是不可能的；但在js中是可能的

   //用一個json框架：prototype原型（定義了好多函數）


   function testJSON() {
    var listStr = "[{'id':100,name:'java'},{'id':200, name:'php'}]";
    //以上是數組，有2個元素；
    //最外層如果是[]的話，表示是一個數組
    //如果是{}，表示是一個對象

    var empList = listStr.evalJSON();
    //prototype,js文件里面的方法
    //添加這個組件后，str里面增加了evaJSON方法；這種擴展方式在java中是不可能的；但在js中是可能的


    clearTb($('tb'));//清空表格，調用方法

    for(i=0;i<empList.length;i++) {
     //document.getElementById('tb');//通過表格的id（‘tb’）獲取表格對象
     var tb = $('tb');//與上行代碼等價

     var tr = tb.insertRow(tb.rows.length);

     var td1 = tr.insertCell(tr.cells.length);
     var td2 = tr.insertCell(tr.cells.length);

     td1.innerHTML = empList[i].id;
     td2.innerHTML = empList[i].name;
    }
   }
   //清空表格的方法
   //可變對象必須采用這樣的方法來做
   function clearTb(tb) {
    for(i=tb.rows.length-1; i>=1; i--) {
     tb.deleteRow(i);
    }
   }
  </script>


</head>

org.whatisjava.servlet
org.whatisjava.domain
org.whatisjava.test

struts1：對ajax的支持
     由于struts1主要是通過action來進行對頁面的轉發和重定向的
     而ajax是通過js請求發送給服務器的。
    比如validate.action請求到ActionServlet之后，經過Action的處理在這里返回的是null而非success和fail
    如果返回null的話，則不將其進行轉發或者重定向了，可以在action用其他代碼來完成工作
    由于action里面包含request和response；也沒有必要往request里面去存放數據

本文由用戶 honghu79 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/blog/5035947045355992893.html

Arduino Property Binder 酸橙派 google應用商城 CodeBunk