、 HTTP協議請求報文以及響應報文
2、 JAVA Socket編程 Socket以及ServerSocket
3、 WEB服務器概念 Tomcat服務器目錄結構和基本配置server.xml文件
4、 什么是Servlet? 怎樣實現一個自定義Servlet?
5、 Servlet基本配置
6、 ServletAPI 包括HttpServlet、HttpServletRequest、HttpServletResponse、ServletConfig、ServletContext
7、 service方法以及doGet和doPost方法
8、 servlet生命周期
9、 怎樣獲取網頁提交的參數?
10、 會話HttpSession和Cookie
11、 調用一個已定義好的Servlet有哪些方式
12、 表單提交數據到Servlet 中文亂碼處理
13、 客戶端頁面向服務端servlet傳遞參數有哪些方式
14、 JSP的運行原理以及基本語法
15、 JSP隱式對象
16、 JavaScript基本語法
17、 JavaScript中的對象
18、 JavaScript與AJAX
19、 基于對象的Javascript以及繼承的實現
客戶端/服務器的優勢在于:
服務器和客戶端分攤任務,分別負責部分處理工作;
服務器可以同時為多臺客戶端服務;
多個客戶端可以同時訪問服務器上的相同數據。
IP
網絡ID:網絡ID標識了計算機或網絡設備所在的網段;
主機ID:主機ID標識了特定的主機或網絡設備
特殊IP地址:
0.0.0.0和127.0.0.1就是兩個此類地址,第一個稱為缺省路由,后一個是環回地址;
127.0.0.1被保留用于用戶主機的本地IP話務,它被分配給一個特殊接口,即起到閉合電路作用的環回接口
端口
端口使用一個16位的數字來表示,它的范圍是0~65535,1024以下的端口號保留給預定義的服務,如:http使用80端口;
java.net包
java.net包可以實現Java的網絡功能,
InetAddress:
InetAddress getByName(String host) 在給定主機名的情況下確定主機的 IP 地址
注:host可以是主機名 IP地址 或者域名
InetAddress getLocalHost() 返回本地主機的InetAddress對象
InetAddress[] getAllByName(String host) 在給定主機名的情況下,根據系統上配置的名稱服務返回其 IP 地址所組成的數組可能一個主機名對應多個服務器(負載均衡)
JAVA Socket編程
socket用于描述IP地址和端口,應用程序通過套接字向網絡發出請求或者應答網絡請求;
套接字會因為網絡的連接中斷而失效,所以對它的操作都有可能拋出IOException
Socket以及ServerSocket
客戶端流程:向服務端請求,獲取輸入輸出流,進行收發數據,關閉io流,關閉套接字
服務器流程:創建套接字,獲得客戶端請求,獲得輸入輸出流,收發信息,關閉io流,關閉套接字
包裝以提高效率(用BufferedReader包裝輸入流,用PrintWriter包裝輸出流)
BufferedReader in=new BufferedReader(new InputStreamReader(socket.getInputStream()));
PrintWriter(OutputStream out, boolean autoFlush) 利用現有的OutputStream構造格式打印流,由參數autoFlush指定是否帶自動刷新緩存的功能
進程與線程的區別
進程是指系統中正在運行中的應用程序,它擁有自己獨立的內存空間;
線程是指進程中一個執行流程,一個進程中允許同時啟動多個線程,他們分別執行不同的任務;
線程與進程的主要區別在于:每個進程都需要操作系統為其分配獨立的內存地址空間,而同一進程中的所有線程在同一塊地址空間中,這些線程可以共享數據,因此線程間的通信比較簡單,消耗的系統開銷也相對較小。
在Java中實現線程有兩種方式,分別是:
擴展java.lang.Thread類
實現java.lang.Runnable接口
線程start()調用run()方法,重寫的是run()
線程生命周期
線程狀態:
新建狀態(New):使用new關鍵字創建線程對象,僅僅被分配了內存;
就緒狀態(Ready):線程對象被創建后,等待它的start方法被調用,以獲得CPU的使用權;
運行狀態(Running):執行run方法,此時的線程的對象正占用CPU;
睡眠狀態(Sleeping):調用sleep方法,線程被暫停,睡眠時間結束后,線程回到就緒狀態,睡眠狀態的線程不占用CPU;
死亡狀態(Dead):run方法執行完畢后,線程進入死亡狀態;
阻塞狀態(Blocked):線程由于某些事件(如等待鍵盤輸入)放棄CPU,暫停運行,直到線程重新進入就緒狀態,才有機會轉到運行狀態;
Yield()和join()的不同
HTTP協議
HTTP (HyperText Transfer Protocol)協議即超文本傳輸協議,是基于網絡應用層的協議,它建立在TCP/IP協議的基礎上;
該協議使用可靠的TCP連接,默認端口是80;
HTTP協議基于客戶端/服務器模式,客戶端主動發出HTTP請求,服務器接收HTTP請求,返回HTTP響應結果。
HTTP協議是指超文本傳輸協議,專門用于在Internet上傳輸信息的協議,目前的版本是1.1;
HTTP是應用層的協議,它基于請求/響應模式;
HTTP協議默認使用80端口進行通訊;
HTTP協議是無狀態的的協議。
請求報文實例:
請求報文是指客戶端瀏覽器向網絡服務器請求頁面時,發送到服務器端的字符串,必須符合HTTP協議的格式要求,它可能包含如下組成部分:
GET /index.html HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, …, */*
Accept-Language: zh-cn
UA-CPU: x86
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)
Host: www.163.com:80
Connection: Keep-Alive
<空行>
請求報文中的大部分項目是可選的,只有GET和Host部分是必需的;
GET部分的格式是:
GET<空格>/[請求的URL]<空格>HTTP/協議版本號
如:GET /index.html HTTP/1.1
Host部分的格式是:
Host:<空格>服務器域名或IP地址:端口號
如:Host: www.newer.com.cn:80
換言之,請求報文中只要包含以上兩部分,就可以向網絡站點服務器請求到頁面。
//拼湊請求報文
String strHttp="GET / HTTP/1.1\r\n";
strHttp +="Host: " + hostName + ":" + WEB_PORT + "\r\n";
響應報文實例:
響應報文是指網絡服務器收到來自客戶端的請求后,發回到客戶端的字符串,它用來告訴客服端:服務器已經接受請求,隨后跟隨的是被請求的網頁內容;
響應報文可能包含如下組成部分:
HTTP/1.1 200 OK
Date: Sat, 11 Aug 2007 11:58:37 GMT
Server: Apache/1.3.37(Unix)
Accept-Ranges: bytes
Content-Length: 11503
Content-Type: text/html
<空行>
響應報文中也有兩部分是必需的:
HTTP/協議版本號<空格>狀態碼<空格>OK
狀態碼是一個3位整數,用來表示不同的狀態,200表示響應成功,
如:HTTP/1.1 200 OK
狀態碼的具體描述請參閱本課件最后的附表。
Content-Type:<空格>text/html;<空格>charset=字符集編碼
用來描述服務器發回響應的文件類型以及字符集編碼,text/html說明是文本文件或超文本文件,
如:Content-Type: text/html; charset=GB2312
模擬:
out.println("Http/1.1 200 OK");
out.println("Content-Type:text/html; charset=GB2312");
狀態碼:
Web應用的優勢
相對于傳統的C/S結構(Client客戶端/Server服務器)的應用程序而言,B/S結構的Web應用程序具備以下優勢:
集中部署,無需安裝客戶端程序;
集中管理,業務邏輯在服務端進行維護;
數據共享,所有客戶端訪問同一服務器的數據;
覆蓋面廣,只要有Internet覆蓋的區域都可通過瀏覽器享受服務;
更強的平臺無關性,不必關心客戶端的軟硬件平臺,只要遵循HTTP協議,都可獲得支持。
WEB服務器概念
Web服務器可以解析(handles)HTTP協議。當Web服務器接收到一個HTTP請求(request),會返回一個HTTP響應(response),例如送回一個HTML頁面。為了處理一個請求(request),Web服務器可以響應(response)一個靜態頁面或圖片,進行頁面跳轉(redirect),或者把動態響應(dynamic response)的產生委托(delegate)給一些其它的程序例如CGI腳本,JSP(JavaServer Pages)腳本,servlets,ASP(Active Server Pages)腳本,服務器端(server-side)JavaScript,或者一些其它的服務器端(server-side)技術。無論它們(譯者注:腳本)的目的如何,這些服務器端(server-side)的程序通常產生一個HTML的響應(response)來讓瀏覽器可以瀏覽。
Tomcat服務器目錄結構和基本配置server.xml文件
博客http://blog.csdn.net/mycomein/article/details/45798161
tomcat環境變量的設置:
首先添加TOMCAT_HOME的環境變量,值為d:\Program Files\tomcat7。
添加CATALINA_HOME環境變量,值為%TOMCAT_HOME%,
添加CATALINA_BASE環境變量,值為%TOMCAT_HOME%。
Tomcat是以面向對象的方式運作的;在執行期間,它會基于配置文件的設定動態地組建其對象結構。
Server.xml文件中的每個主要元素都會創建軟件“對象”、排序及進程管道中設置的這些元素嵌套方,讓您能執行過濾、分組等工作。
什么是Servlet? 怎樣實現一個自定義Servlet?
Servlet是用Java語言編寫的程序,它運行在Web服務器上,用以處理來自客戶端的請求;
它一般會把處理的結果以為HTML的形式返回,在客戶端形成動態網頁
Servlet的優點
Servlet運行在Web服務器中,可以擴展服務器的功能;
Servlet可以和其他資源交互,從而生成返回給客戶端響應的內容,即動態網頁;
使用Java編寫,所以能夠跨平臺;
Java的所有優點都可以在Servlet中體現;
Servlet很安全,因為訪問Servlet的唯一途徑是通過服務器;
只要符合Servlet規范的Servlet容器都可以運行Servlet。
自定義servlet
一個類繼承HttpServlet,重寫doGet()和doPost()方法,如果需要看到創建和銷毀的過程,可以重寫init()和destroy()方法。
Servlet基本配置
在web.xml中加入servlet的配置:
<servlet>
<servlet-name>LoginServlet</servlet-name>
<servlet-class>com.tkclm.servlet.LoginServlet</servlet-class>
</servlet
<servlet-mapping>
<servlet-name>LoginServlet</servlet-name>
<url-pattern>/login</url-pattern>
</servlet-mapping>將action與class對應起來
ServletAPI 包括HttpServlet、HttpServletRequest、HttpServletResponse、ServletConfig、ServletContext
HttpServletRequest
HttpServletResponse
Javaweb容器的四種作用域
幾乎所有web應用容器都提供了四種類似Map的結構:application session request page,Jsp或者Servlet通過向著這四個對象放入數據,從而實現Jsp和Servlet之間數據的共享。
application:整個應用 對應servlet中ServletContext
session:會話 對應servlet中HttpSession
request:一次請求 對應servlet中的HttpServletRequest
page:當前頁面
ServletConfig:此接口定義Servlet配置對象,以便于容器將信息傳遞給Servlet。
ServletContext:此接口定義了一組方法,用于Servlet與容器進行通信。
service方法以及doGet和doPost方法、
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
service方法是接口中的方法,servlet容器把所有請求發送到該方法,該方法默認行為是轉發http請求到doXXX方法中,如果你重載了該方法,默認操作被覆蓋,不再進行轉發操作!此方法用來調度客戶端的請求,API文檔中明確規定,請勿重寫該方法。
servlet生命周期
怎樣獲取網頁提交的參數?
①String str=request.getParameter("參數名稱")方法可以獲得參數值。
對于復選框類的數據,可以通過
②String[] str=request.getParameterValues("參數名稱")方法獲得。
會話HttpSession和Cookie
Cookie通過在客戶端記錄信息確定用戶身份,Session通過在服務器端記錄信息確定用戶身份。Cookie由服務器產生,給客戶端頒發的通行證,每一個Cookie只能保存一個變量,
若需要修改(包括刪除)需要服務器重新頒發Cookie。
會話對象(它主要解決了HTTP協議是無狀態的問題。)
所謂的會話是指:在一段時間內,某客戶端與服務器之間的一連串的請求與響應;
會話對象可以使用戶訪問一個站點的多個頁面時共享信息;
javax.servlet.http.HttpSession接口用來提供會話對象,如果我們在程序中需要操作會話,就可以使用它;
可以通過HttpServletRequest的getSession方法獲得(或創建)HttpSession對象。
調用一個已定義好的Servlet有哪些方式
發送請求(包括表單() a標簽 js的)重定向(重定向跟轉發)
重定向:response.sendRedirect("success.jsp");
r轉發:equest.getRequestDispatcher("success.jsp").forward(request,response);
1.轉發在服務器端完成的;重定向是在客戶端完成的
2.轉發的速度快;重定向速度慢
3.轉發的是同一次請求;重定向是兩次不同請求
★4.轉發不會執行轉發后的代碼;重定向會執行重定向之后的代碼
★5.轉發地址欄沒有變化;重定向地址欄有變化
6.轉發必須是在同一臺服務器下完成;重定向可以在不同的服務器下完成
表單提交數據到Servlet 中文亂碼處理
可以通過字符集轉碼來解決此問題:
對于get
new String(request.getParameter("name").getBytes("ISO-8859-1"), "UTF-8");
對于post
request.setCharacterEncoding("UTF-8");
客戶端頁面向服務端servlet傳遞參數有哪些方式
表單
a標簽
Ajax即js
<jsp:param>
<%setAttributr();%>
JSP的運行原理以及基本語法
Jsp執行過程:
JSP 頁面內容
JSP元素包括JSP腳本元素(包括注釋,聲明,表達式,scriptlet),指令元素(page,include,taglib),動作元素。
Jsp聲明:
需求:某系統計算的金額中有兩種形式,一種是帶有兩位小數的,另一種是整數,現在要求你在JSP頁面將不帶小數的金額轉換為帶兩位小數的金額。
<%
String trans(String money){
Int index=money.indexOf(“.”);
If(index==-1){
Money=money +”.00”;
}
Retrun money;
}
%>
<%=trans(money)%>
Jsp注釋<%-- comment--%>>不會顯示在網頁上,html<!-- comment-->注釋會顯示在網頁中
Jsp指令包括 page,include,taglib
例:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ include file="../jsp/Header.jsp"%>
格式:<%@ 指令名稱 屬性1="屬性值1" 屬性2="屬性值2" … 屬性n="屬性值n"%>
l page 指令用于設置JSP 頁面的屬性,這個屬性將被用于和容器通信
<%@ page %>指令作用于整個JSP頁面,同樣包括靜態的包含文件。
無論你把<% @ page %>指令放在JSP的文件的哪個地方,它的作用范圍都是整個JSP頁面。
[ language=“java” ]
主要指定JSP容器要用什么語言來編譯JSP的元素
[ import=“{package.class | package.*}, ...” ]
JSP程序可以使用哪些包
[pageEncoding=“UTF-8”]
Jsp程序用什么編碼格式編碼
l include指令
用來在JSP文件被編譯時導入一個指定的文件,語法形式
<%@ include file=”relativeURLspec” %>
include 指令告訴編譯器在編譯當前的JSP程序時,將由relativeURLspec所指定的外部文件代碼插入到include編譯指令所在的位置,并把它作為當前JSP程序的一部分編譯.如果被嵌入文件在包含它們的主JSP程序被裝載到內存之后被修改,那么主JSP程序連同被嵌入的文件將在下一次請求產生時被重新編譯.
這個包含的過程是靜態的,而包含的文件可以是HTML文件、JSP頁面、文本文件或是一段java程序
l Taglib指令
taglib 指令允許用戶創建自定義標簽 jstl
總結:
JSP 腳本由三個元素組成,即 JSP 表達式、JSP Scriptlet 和 JSP 指令
JSP 表達式包括在 <%=%>內; Scriptlet 包含在<% %>內;聲明包含在<%! %>內
JSP 指令共有三種類型,即 page、include 和 taglib。JSP 指令包括在 <%@ 和 %>內
page 指令用于設置 JSP 頁面的屬性;include 指令用于在 JSP 頁面嵌入其他文件
JSP隱式對象
l request表示客戶端對網頁的請求
l response實現 javax.servlet.http.HttpServletResponse 接口使用 HTTP 協議將響應發送給客戶端
l out表示輸出流
l Session
l Application 表示 JSP 頁面所屬的應用程序
l pageContext使用戶可以訪問頁面作用域中定義的所有隱式對象它的作用范圍是在同一頁面
l Page使用 page 對象可以訪問 Servlet 類的所有變量和方法
l config實現javax.servlet.ServletConfig接口,表示Servlet 的配置,其常用方法有:
getInitParameter() 獲取初始化的參數
getServletContext() 獲取環境
getServletName() 獲取Servlet名字
l exception對象用于處理 JSP 頁面中的錯誤
JavaScript基本語法
Js特點:腳本語言,基于對象,事件驅動,平臺無關
將JavaScript嵌入網頁(三種方式):
1.使用 <script>…</script> 標簽將語句嵌入文檔
2.將 外部JavaScript 源文件鏈接到 html 文檔中
<script src="test.js"></script>
可使多個網頁共享一個腳本文件內的代碼
一般在其中定義一系列在多個網頁中都可能要用到的函數
3.作為網頁元素的事件處理程序,當事件觸發時自動運行
<marquee onmouseover=“this.stop()”>
JavaScript基本語法部分:
語句:一條由計算機完成的、幫助你達到某種目的的指令,JavaScript中的每一行都可認為是一條語句
變量:一個代表某個值的名字就是變量
表達式:A-1+B 就是表達式
函數:具有一定功能的程序段
數據類型:
變量
JS是弱類型的語言,即聲明變量時不需指定數據類型,為它賦值時其類型才確定,而且再次為其賦值可改變它的數據類型.
變量的命名: 只能包含數字,字母,下劃線("_"),但不能以數字開頭,不能是保留字(關鍵字)
JS區分大小寫
用var聲明變量
函數的聲明與調用
方式一、
function 函數名([參數[,參數...]]){
<語句組>
[return <表達式>;]
}
方式二、
函數名=function ([參數[,參數...]]) {
…
}
方式三、(較不常用)
Function類
函數名=new Function ([“參數名”[,“參數名”...]],“函數體”)
arguments對象
1:arguments是收到的實參副本
在詞法分析中, 首先按形參形成AO的屬性,值為undefined
當實參傳來時, 再修改AO的相應屬性.
2:并把所有收到實參收集起來,放到一個arguments對象里
t(a,b,c){},
調用時: t(1,2,3,4,5) 5個參數
此時 , AO屬性只有a,bc,3個屬性, arguments里有1,2,3,4,5, 所有的值
對于超出形參個數之外的實參, 可以通過arguments來獲得
3:arguments 的索引 從 0, 1,2,....遞增,與實參逐個對應
4:arguments.length 屬性代表實參的個數
5:arguments一定不是數組, 是長的比較像數組的一個對象,雖然也有length屬性
6:arguments每個函數都會有,因此,arguemnts只會在內部找自身的arguments,
無法引用到外層的arguments
<script type="text/javascript">
// 求圓形面積,矩形面積, 三角形面積
function area () {
if(arguments.length==1) {
alert(3.14 * arguments[0] * arguments[0]);
} else if(arguments.length==2) {
alert(arguments[0] * arguments[1]);
} else if(arguments.length==3) {
alert(arguments[0] + arguments[1] + arguments[2]);
} else {
return null;
}
}
area(10,20,30);
</script>
內部函數
function a( d){
var i=0;
Function c(){
//....
}
function b(){
c();
alert(++i);
}
return b;
}
var c=a();
c();
閉包:允許使用內部函數--即函數定義和函數表達式位于另一個函數的函數體內。而且,這些內部函數可以訪問它們所在的外部函數中聲明的所有局部變量、參數和聲明的其他內部函數。
類型轉換
強制類型轉換,ECMAScript中可用的3種強制類型轉換:
Boolean(value);
Number(value);
String(value);
NaN --- 不是一個數字類型
NaN 值非常特殊,因為它“不是數字”,所以任何數跟它都不相等,甚至 NaN 本身也不等于 NaN 。
isNaN(testValue) 計算一個參數,檢查它是否為數值。
var iNum=10;
var snum=iNum.toString(8); 12 進制
var iNum1=parseInt("12.6"); 12
var iNum2=parseInt("hello"); NaN
var iNum3=parseInt("123world");123
var fNum4=parseFloat("25.12.6");25.12
var b1=Boolean("");false
var b2=Boolean(undefined);false
var b3=Boolean(0);false
var iNum=Number("25.12.6");NaN
var bl=isNaN(Number("13f"))true
JavaScript中的對象
本地對象
Object Function Array String Boolean Number Date RegExp Error EvalError RangeError TypeError ReferenceError SyntaxError URIError
內置對象
Global Math
宿主對象(自定義對象)
對象是用關鍵字new后跟要實例化的類的名字創建,例如:
var oObj=new Object();
如果構造 函數無參數,括號可省略
var oObj=new Object;
Object 對象:
可以對object對象增加函數屬性
判斷對象是否有某個屬性:
alert(oPerson.hasOwnProperty(“age”));
字符串對象 String
屬性:length
數組對象 Array
創建數組對象
myArr=new Array(); myArr [10]=“array”; //MyArray數組的長度為10
myArr=new Array(3); //可存放三個元素
myArr=new Array(“a”,”c”,”d”);//存放了三個元素的數組
myArr=[“a”,”b”,”c”]; //存放了三個元素的數組
下標從0開始編號
數學對象 Math
max(,,,,)方法:返回各個參數中最大的數
min(,,,)方法:返回各個參數中最小的數
abs()方法:返回絕對值
sin()方法:返回參數的正弦值,參數為弧度
sqrt()方法:求輸入參數的平方根
round():四舍五入為整數
random():返回0-1的隨機小數
返回 n 到 m之間的隨機整數:
var iNum=Math.floor(Math.random() * (m-n+1) +n);
floor():取整,返回比參數小的最大整數
ceil():返回大于或等于參數的最近整數
Grobal對象:對象從不直接使用,并且不能用 new 運算符創建。它在 Scripting 引擎被初始化時創建,并立即使其方法和屬性可用。
日期時間對象Date
日期對象的創建:
mydate=new Date()
創建代表當前日期時間的日期對象
mydate=new Date(“October 1,2005,12:00:00”)
創建代表2005年國慶午時的日期對象
Mydate=new Date(2005, 9, 1)
創建代表2005年10月1日的日期對象
日期對象以系統內存中以數值表示,以1970年1月1日0時0分0秒0毫秒為起始點,每過一毫秒增加一.
get方法組à從日期對象中分解出它所處的年月日,星期幾,時分秒,毫秒值
getYear()à返回年份數
getMonth()à返回月份數:0-11,應加上1.
getDate()à返回當前Date對象的日期數:1-31
getDay()à返回星期幾:0-6, 0代表星期日
getHours()à返回小時數:0-23
getMinutes()à返回分鐘數:0-59
getSeconds()à返回秒數:0-59
getTime()à返回毫秒數:自起始時刻開始
set方法組à設置(改變)日期對象的某一部分
setYear()à設置年份數
setMonth()à設置月份數:參數0-11
setDate()à設置日期數:參數1-31
setHours()à設置小時數:參數0-23
setMinutes()à設置分鐘數:參數0-59
setSeconds()à設置秒數:參數0-59
JavaScript與AJAX
1.1XMLHttpRequst對象的概述
在使用XMLHttpRequest對象發送請求和處理響應之前,必須先調用JavaScript創建一個XMLHttpRequest對象。由于XMLHttpRequest不是一個W3C標準,所以可以采用很多JavaScript方法來創建XMLHttpRequest的實例,IE把XMLHttpRequest實現為一個ActiveX對象,其他瀏覽器則把它實現為一個本地的JavaScript對象,由于存在這些差別,JavaScript必須包含有關的邏輯,從而使用ActiveX技術與使用本地的JavaScript對象技術創建XMLHttpRequst的一個實例。
很多人可能還記得從前的那段日子,那時不同瀏覽器上的JavaScript與DOM簡直千差萬別,聽了這段話后有人可能不寒而栗。幸運的是,在這里為了明確該如何創建XMLHttpRequst對象的實例,并不需要那么詳細的編寫代碼來區別瀏覽器的類型。你要做的只是檢查瀏覽器是否提供對ActiveX對象的支持。如果瀏覽器支持ActiveX對象,就可以使用ActiveX對象來創建XMLHttpRequest對象。否則,就要使用本地的JavaScript對象技術來創建。下面的代碼展示了編寫跨瀏覽器的JavaScript代碼來創建XMLHttpRequst是多么的簡單。
創建XMLHttpRequest的一個實例:
var xmlHttp; function createXMLHttpRequst(){ if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }
else if(window.XMLHttpRequst){
xmlHttp=new XMLHttpRequest();
} }
可以看到,創建一個XMLHttpRequest相當容易。首先,要創建一個全局作用域變量xmlHttp來保存這個對象的引用。createXMLHttpRequst方法完成創建XMLHttpRequst對象的具體工作。這個方法中只有簡單的分支邏輯(選擇邏輯)來確定如何創建對象。對window.ActiveXObject的調用會返回一個對象,也可能返回一個null,if語句會把調用返回的結果看作是true或false(如果返回對象則為true,返回null則為false),以此指示瀏覽器是否支持ActiveX控件,相應地得知瀏覽器是不是IE,如果確實是,則通過實例化一個ActiveX的一個新實例來創建XMLHttpRequst對象,并傳入一個串指令指示要創建何種類型的ActiveX對象
。在這個例子中為構造函數提供的字符串是Microsoft。XMLHTTP,這說明你想創建一個XMLHttpRequst的一個實例。
如果window.ActiveXObjec調用失敗(返回null),JavaScript就會轉到else語句的分支確定瀏覽器是否把XMLHttpRequst實現為一個本地的JavaScript對象。如果存在window.XMLHttpRequest,就會創建XMLHttpRequst的一個實例。
由于ajax具有動態類型特性,而且XMLHttpRequst在不同瀏覽器上的實現是兼容的,所以可以用同樣的方式訪問XMLHttpRequst實例的屬性和方法,而不論這個實例創建的方法是什么。這就大大地簡化了開發過程,而且在JavaScript中也不必編寫特定于瀏覽器的邏輯。
1.2方法和屬性
abort() 停止當前請求;
getAllResponseHeaders() 把HTTP請求的所有響應首部作為鍵值對返回;
getResponseHeader("header") 返回指定首部的串值;
open("method","url") 建立對服務器的調用。method參數可以使GET POST 或PUT。url可以使相對url或絕對url,這個方法還包括三個可選的參數;
send(content) 向服務器發送請求;
setRequstHeader("header","value") 把指定首部設置為所提供的值。在設置任何首部之前必須先調用open();
下面來更詳細地討論這些方法。
void open(string method, string url, boolean asynch ,string usename ,string password); 這個方法會建立對服務器的調用。這是初始化一個請求的純腳本方法。它有兩個必要的參數三個可選的參數。要提供調用的特定方法(get/post/put),還要提供所調用資源的url。另外還可以傳遞一個Boolean值,這是這個調用是異步的還是同步的。默認值為true,表示本質上是異步的,如果這個參數為false,處理就會等待,知道服務器返回響應為止。由于異步調用是ajax主要優勢之一,所以倘若這個參數設為false,從某種程度上講與使用XMLHttpRequst對象的初衷不太相符。不過在某些情況下見這個參數設為fals也是有用的,比如持久存儲頁面之前可以先驗證用戶的輸入。最后兩個參數不說自明,允許你指定一個特定的用戶名和密碼。
void send(content) 這個方法具體向服務器發送請求。如果請求聲明為異步的,這個方法就會立即返回,否則它會等到直到接收到響應為止。可選參數可以是DOM對象的實例、輸入流,或串。傳入這個方法的內容會作為一個請求體的一部分發送。
void setRequstHeader(string header,string value);這個方法為為HTTP請求中一個給定的首部設置值,它有兩個參數,第一個串表示要設置的首部,第二個串表示要在首部中放置的值。注意,這個方法必須在調用opend()之后才能調用。
在所有的這些方法中,最有可能用到的就是opend()和send()。XMLHttpRequest對象還有很多屬性,在設計Ajax交互時這些屬性非常有用。
void abort() 顧名思義,這個方法就是要停止請求。
string getAllResponseHeaders() 這個方法的核心功能對開發人員應該很熟悉,它返回一個串,其中包含HTTP請求的所有響應首部,首部包括Content-Length/Data和URI
string getReponseHeader(string header) 這個方法與getAllResponseHeaders()是對應的,不過它有一個參數表示您希望的指定收不到的值,并把這個值作為串返回。除了這些標準方法,處理XMLHttpRequst可以大量使用這些屬性。
onreadystatechange 每個狀態改變時都會觸發這個事件處理器,通常會調用一個javacript函數;
readyState 請求狀態。有5個可取的值:0:=未初始化,1=正在加載,2=已加載,3=交互中,4=完成;
responseText服務器的響應,表示為一個串;
responseXML服務器的響應,表示為XML,這個對象可解釋為DOM對象;
status服務器HTTP狀態碼(200對應Ok 404對應 not found ,等)
statusText HTTP狀態碼的相應文本(ok或not found等)
1.3AJAX交互設計
1.一個客戶端事件觸發一個Ajax事件。從簡單的onchange事件到某個特定的用戶動作,很多這樣的事都可以觸發Ajax事件。
<input type="text" d="email" name="email" onblur="validateEmail()"/>
2.創建XMLHttpRequst對象的一個實例。使用open()方法建立調用,并調用url及所希望的HTTP方法(通常是post/get)。請求實際上是通過一個send()方法調用觸發,代碼如下:
var xmlHttp; function validateEmail(){ var email=document.getElementById("email");
var url="validate?email="+escape(email.value);
if(window.ActiveObject){
xmlHttp=new ActiveObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequst){
xmlHttp=new XMLHttpRequst();
}
xmlHttp.open("get",url);
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);
}
3.向服務器做出請求。可能調用servlet、CGI腳本,或者任何服務器端技術。
4.服務器可以做你想做的事情,包括訪問時數據庫,甚至訪問另一個系統。
5.請求返回到瀏覽器。content-type設置為text/xml ,XMLHttpRequst的對象只能處理text/html類型的結果。在另外一些更復雜的示例中
6.在這個demo中,XMLHttpRequst對象配置為處理返回結果時要調用callback()函數,這個函數會檢查XMLHttpRequst對象的readyState屬性,然后查看服務器返回的狀態碼。如果一切正常,callback()函數就會在客戶端做一些有意思的工作。一下就是一個典型的回調方法:
function callback(){ if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
//do something interesting here
}
} }
可以看到,正常的請求/響應模式有所不同,但對于web開發人員來說,并不是完全陌生的。顯然,在創建和建立XMLHttpRequst對象時還可以做些事情,另外當“回調”函數完成狀態檢查之后也可以有所作為。一般的,你會把這些標準調用包裝在一個庫中,一便在整個應用中使用,或者可以使用web上提供的庫
基于對象的Javascript以及繼承的實現
關鍵字this
指向調用該方法的“當前”對象
this使用的幾種場合:
用在對象的方法中
構造函數
事件處理函數
原型-prototype
objectName.prototype
objectName 是對象的名稱。
objectName.prototype本身也是對象
用 prototype 屬性提供對象的類的一組基本功能。 對象的新實例“繼承”賦予該對象原型的操作。
prototype 對象是個模板,要實例化的對象都以這個為基礎。
prototype 對象的任何屬性和方法都被傳遞給那個類的所有實例
利用prototype修改本地對象
個本地對象也有prototype屬性
通過prototype屬性創建新方法
通過prototype屬性重定義已有方法
var books=new Array("java","C","VB"); Array.prototype.hasItem=function(oItem){ for(i=0; i<books.length; i++){ if(oItem==books[i]){ return true; } } return false;}
var books=new Array("java","C","VB");
Array.prototype.pop=function(){
return "pop object";
}
var o=books.pop(); //原本為VB -à 重載后 pop object
自定義對象的4種方式
1.通過工廠方式創建
此工廠創建的對象各屬性都一樣
function createPerson(){
var oPerson=new Object();
oPerson.name="張三";
oPerson.age=22;
oPerson.showAge=function(){
alert(this.age);
}
return oPerson;
}
var oPerson1=createPerson();
var oPerson2=createPerson();
此工廠根據傳參的不同 創建不同的屬性
function createPerson(sName, iAge){
var oPerson=new Object();
oPerson.name=sName;
oPerson.age=iAge;
oPerson.showAge=function(){ //或者函數外定義
alert(this.age);
}
return oPerson;
}
var oPerson1=createPerson("張三",22);
var oPerson2=createPerson("李四", 20);
oPerson1.showAge();
oPerson2.showAge();
2.通過構造函數方式創建
function Person(sName, iAge){
this.name=sName;
this.age=iAge;
this.showAge=function(){ //或者函數外定義
alert(this.age);
}
}
var oPerson1=new Person("張三",22);
var oPerson2=new Person("李四", 20);
oPerson1.showAge();
oPerson2.showAge();
3.通過原型方式創建
function Person(){
}
Person.prototype.name="張三";
Person.prototype.age=22;
Person.prototype.showAge=function(){
alert(this.age);
}
var oPerson1=new Person();
var oPerson2=new Person();
function Person(){
}
Person.prototype.name="張三";
Person.prototype.age=22;
Person.prototype.books=new Array("java","C");
Person.prototype.showAge=function(){
alert(this.age);
}
var oPerson1=new Person();
var oPerson2=new Person();
oPerson1.books.push("VB");
alert(oPerson1.books); // java,C,VB
alert(oPerson2.books); // java,C,VB
4.混合的構造函數/原型方式創建
function Car(sColor, iDoors, iMpg) {
this.color=sColor;
this.doors=iDoors;
this.mpg=iMpg;
this.drivers=new Array("Mike", "Sue");
}
Car.prototype.showColor=function () {
alert(this.color);
};
var oCar1=new Car("red", 4, 23);
var oCar2=new Car("blue", 3, 25);
oCar1.drivers.push("Matt");
alert(oCar1.drivers); //outputs "Mike,Sue,Matt"
alert(oCar2.drivers); //outputs "Mike,Sue"
原型(prototype)鏈
prototype類似于模板,要實例化的對象都以這個模板為基礎, prototype對象的任何屬性和方法都被傳遞給類的所有實例。
所有 JavaScript 內部類的 prototype 屬性都是只讀的,所以:不能更改內部對象的 prototype ,只能為內部對象的原型添加或重載屬性和方法
自定義對象可以更改其prototype ,即:
子類類名.prototype=父類對象實例;
1、創建基類
function Polygon(iSides){ //多邊形
this.iSides=iSides;
}
Polygon.prototype.getArea=function(){
return 0;
}
2、創建子類
function Triangle(iBase,iHeight){ //三角形對象
this.iBase=iBase;
this.iHeight=iHeight;
}
Triangle.prototype=new Polygon(3);
Triangle.prototype.getArea=function(){
return 0.5 * this.iBase * this.iHeight;
}
function Rectangle(iLength,iWidth){ //矩形對象
this.iLength=iLength;
this.iWidth=iWidth;
}
Rectangle.prototype=new Polygon(4);
Rectangle.prototype.getArea=function(){
return this.iLength * this.iWidth;
}
3、測試
var triangle=new Triangle(10,4);
var rectangle=new Rectangle(8,4);
alert(triangle.iSides);
alert(rectangle.iSides);
alert(triangle.getArea());
alert(rectangle.getArea());
基本概念
HTML 是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息,可以包含文字、圖片、視頻等。
CSS 樣式是表現。比如,標題字體、顏色變化,或為標題加入背景圖片、邊框等,所有這些用來改變內容外觀的東西稱之為表現。
JavaScript 是用來實現網頁上的特效效果。如:鼠標滑過彈出下拉菜單,或鼠標滑過表格的背景顏色改變,還有焦點新聞(新聞圖片)的輪換。有動畫的,有交互的一般都是用 JavaScript 來實現的。
2.常用標簽
強調語氣:<em>是斜體,<strong>是加粗
引用:<q>短文本引用,<blockquote>長文本引用
換行 <br />
水平橫線 <hr />
空格
表格 <table><tbody>
加上后表格內容全部下載完才會顯示
行 <tr>
列 <td>
表格表頭 <th>
標題 <caption>
超鏈 <a>
例子:<a href="目標網址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>
新標簽打開:target="_blank"
圖片 <img>,圖像可以是 GIF,PNG,JPEG 格式的圖像文件
例子:<img src="圖片地址" alt="下載失敗時的替換文本" title="提示文本">
表單 <form>
文本域 <textarea>
例子 <textarea rows="行數" cols="列數">文本</textarea>
cols 多行輸入域的列數;rows 多行輸入域的行數。這兩個屬性可用 CSS 樣式的 width 和 height 來代替:col 用 width、row 用 height 來代替
輸入框 <input type="text/password" name="名稱" value="文本" />
當 type=”text” 時,輸入框為文本輸入框
當 type=”password” 時, 輸入框為密碼輸入框
單/復選框 <input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
當 type=”radio” 時,控件為單選框,同一組單選框 name 命名要一致
當 type=”checkbox” 時,控件為復選框
提交按鈕 <input type="submit" value="提交">
重置按鈕 <input type="reset" value="重置">
下拉列表框 ` `
value <option value="提交值">選項</option>
選中 selected="selected"
多選 multiple="multiple"
標簽 <label for="控件id名稱">,標簽的 for 屬性中的值應當與相關控件的 id 屬性 值一定要相同
基本知識
CSS 樣式由選擇符和聲明組成,而聲明又由屬性和值組成。
選擇符:又稱選擇器,指明網頁中要應用樣式規則的元素。
聲明:在英文大括號{}中的的就是聲明,屬性和值之間用英文冒號{}分隔。當有多條聲明時,中間可以英文分號;分隔。
從CSS 樣式代碼插入的形式來看基本可以分為以下3種:內聯式、嵌入式和外部式三種。優先級遵循就近原則,一般來說,內聯式 > 嵌入式 > 外部式。
內聯式
例子 <p style="color:red;font-size:12px">這里文字是紅色。</p>
嵌入式
外部式
例子:<link href="base.css" rel="stylesheet" type="text/css" />
CSS 選擇器
常見的類選擇器類型有如下幾種:
標簽選擇器,.標簽選擇器名稱{css樣式代碼;}
類選擇器,.類選器名稱{css樣式代碼;}
ID 選擇器,#類選器名稱{css樣式代碼;}
子選擇器,即大于符號(>),用于選擇指定標簽元素的第一代子元素
包含選擇器,即加入空格 ,用于選擇指定標簽元素下的后輩元素
通用選擇器,匹配html中所有標簽元素,* {css樣式代碼;}類選擇器和ID選擇器都可以應用于任何元素,但 ID 選擇器只能在文檔中使用一次,可以使用類選擇器詞列表方法為一個元素同時設置多個樣式,ID 選擇器是不可以的。
子選擇器和包含選擇器區別:>作用于元素的第一代后代,空格作用于元素的所有后代。
另外還有兩種選擇符:
偽類選擇符,允許給 HTML 不存在的標簽(標簽的某種狀態)設置樣式。常用的有 a:hover{color:red;}
分組選擇符,為 HTML 中多個標簽元素設置同一個樣式時,可以使用分組選擇符,
。例如h1,span{color:red;}
CSS 的繼承、層疊和特殊性
CSS 的某些樣式是具有繼承性的,繼承是一種規則,它允許樣式不僅應用于某個特定 HTML 標簽元素,而且應用于其后代。
特殊性:不同選擇器具有不同權值,標簽的權值為 1,類選擇符的權值為 10,ID選擇符的權值最高為 100。
層疊 就是在 HTML 文件中對于同一個元素可以有多個 CSS 樣式存在,當有相同權重的樣式存在時,會根據這些 CSS 樣式的前后順序來決定,處于最后面的 CSS 樣式會被應用。
CSS 格式化排版
文字排版
字體,body{font-family:"Microsoft Yahei";}
字號、顏色,body{font-size:12px;color:#666}
粗體,body{font-weight:bold;}
斜體,body{font-style:italic;}
下劃線,body{font-style:italic;}
刪除線,body{text-decoration:line-through;}
段落排版
縮進,p{text-indent:2em;}
行間距(行高),p{line-height:1.5em;}
中文字間距、字母間距,letter-spacing:50px;和word-spacing:50px;
對齊,div{text-align:center;}
CSS 盒模型
元素分類
在 CSS 中,HTML 中的標簽元素大體被分為三種不同的類型:塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。
常用的塊狀元素有:
塊級元素特點:
每個塊級元素都從新的一行開始,并且其后的元素也另起一行。
元素的高度、寬度、行高以及頂和底邊距都可設置。
元素寬度在不設置的情況下,是它本身父容器的 100%(和父元素的寬度一致),除非設定一個寬度。
設置 display:block就是將元素顯示為塊級元素,從而使元素具有塊狀元素特點。
注:img 標簽與 div 層之間會有空隙的解決方法是:使用 display:block 就可以消除間隙。
常用的內聯元素有:
內聯元素特點:
和其他元素都在一行上;
元素的高度、寬度及頂部和底部邊距不可設置;
元素的寬度就是它包含的文字或圖片的寬度,不可改變。
塊狀元素也可以通過代碼 display:inline將元素設置為內聯元素。
常用的內聯塊狀元素有:
inline-block 元素特點:
和其他元素都在一行上;
元素的高度、寬度、行高以及頂和底邊距都可設置。
內聯塊狀元素(inline-block)就是同時具備內聯元素、塊狀元素的特點,代碼 display:inline-block就是將元素設置為內聯塊狀元素。
盒模型
邊框
盒子模型的邊框就是圍繞著內容及補白的線,這條線你可以設置它的粗細、樣式和顏色(邊框三個屬性)。
單獨設置下邊框的例子 div{border-bottom:1px solid red;}
寬度和高度
CSS 內定義的寬(width)和高(height),指的是 填充以里的內容范圍。一個元素實際寬度(盒子的寬度)=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。
W3C 的標準 Box Model:
所以有時會設置 box-sizing: border-box;來避免計算內部元素大小
填充(padding)
元素內容與邊框之間是可以設置距離的,稱之為“填充”。填充也可分為上、右、下、左(順時針)。
例子:
邊界(margin)
元素與其它元素之間的距離可以使用邊界(margin)來設置,順序和填充一樣是上,右,下,左。padding 在邊框里,margin 在邊框外。
CSS 布局模型
CSS 包含 3 種基本的布局模型,用英文概括為:Flow、Layer 和 Float。 在網頁中,元素有三種布局模型:
流動模型(Flow)
浮動模型 (Float)
層模型(Layer)
流動模型
流動模型,流動(Flow)是默認的網頁布局模式。
流動布局模型具有2個比較典型的特征:
塊狀元素 都會在所處的包含元素內自上而下按順序垂直延伸分布,因為在默認狀態下,塊狀元素的寬度都為 100%。實際上,塊狀元素都會以行的形式占據位置。
在流動模型下,內聯元素 都會在所處的包含元素內從左到右水平分布顯示。
浮動模型
任何元素在默認情況下是不能浮動的,但可以用 CSS 定義為浮動。例子:#div1{float:left;}
層模型
CSS 定義了一組定位(positioning)屬性來支持層布局模型。
層模型有三種形式:
絕對定位(position: absolute)
相對定位(position: relative)
固定定位(position: fixed)
絕對定位(position: absolute)
如果想為元素設置層模型中的絕對定位,需要設置 position:absolute(表示絕對定位),這條語句的作用將元素從文檔流中拖出來,然后使用 left、right、top、bottom 屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊,則相對于 body 元素,即相對于瀏覽器窗口。
相對定位(position: relative)
如果想為元素設置層模型中的相對定位,需要設置 position:relative(表示相對定位),它通過 left、right、top、bottom 屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按 static(float) 方式生成一個元素(并且元素像層一樣浮動了起來),然后相對于以前的位置移動,移動的方向和幅度由left、right、top、bottom屬性確定,偏移前的位置保留不動。
簡單來說,就是相對元素原來的位置進行移動,元素本身所占的位置會保留。
固定定位(position: fixed)
設置 position:fixed;。fixed:表示固定定位,與 absolute 定位類型類似,但它的相對移動的坐標是視圖(屏幕內的網頁窗口)本身。由于視圖本身是固定的,它不會隨瀏覽器窗口的滾動條滾動而變化,除非你在屏幕中移動瀏覽器窗口的屏幕位置,或改變瀏覽器窗口的顯示大小,因此固定定位的元素會始終位于瀏覽器窗口內視圖的某個位置,不會受文檔流動影響,這與 background-attachment:fixed; 屬性功能相同。
Relative 與 Absolute 組合使用,必須遵守下面規范:
參照定位的元素必須是相對定位元素的前輩元素
參照定位的元素必須加入 position:relative;
定位元素加入 position:absolute,便可以使用 top、bottom、left、right 來進行偏移定位了
例子(HTML 和 CSS 代碼分別為):
顏色和長度
設置顏色的方法也有很多種:
英文命令顏色,p{color:red;}
RGB顏色,p{color:rgb(133,45,200);} 和 p{color:rgb(20%,33%,25%);}
十六進制顏色, 這種顏色設置方法是現在比較普遍使用的方法,其原理其實也是 RGB 設置,但是其每一項的值由 0-255 變成了十六進制 00-ff。p{color:#00ffff;}(當你設置的顏色是 16 進制的色彩值時,如果每兩位的值相同,可以縮寫一半,#0ff)RGB 配色表參考 RGB顏色對照表 - 在線工具 - 開源中國 或者 RGB 配色表長度單位總結一下,目前比較常用到px(像素)、em、% 百分比,要注意其實這三種單位都是相對單位。
像素
em,就是本元素給定字體的 font-size 值
% 百分比
設置小技巧
水平居中設置
行內元素。如果被設置元素為文本、圖片等行內元素時,水平居中是通過給父元素設置 text-align:center來實現的。
定寬塊狀元素(塊狀元素的寬度 width 為固定值)。滿足定寬和塊狀兩個條件的元素是可以通過設置“左右 margin”值為 auto 來實現居中的。
不定寬塊狀元素。
加入 table 標簽(包括 <tbody>、<tr>、<td>),為這個 table 設置“左右 margin 居中”
設置 display: inline方法:與第一種類似,顯示類型設為 行內元素,然后使用 text-align:center來實現居中效果,進行不定寬元素的屬性設置。
給父元素設置 float 和 position:relative; left:50%,子元素設置 position:relative 和left: -50% 來實現水平居中。
垂直居中設置
父元素高度確定的單行文本。通過設置父元素的 height 和 line-height 高度一致來實現的。(height: 該元素的高度;line-height: 顧名思義,行高(行間距),指在文本中,行與行之間的 基線間的距離 )。
父元素高度確定的多行文本。使用插入 table (包括 tbody、tr、td)標簽,同時設置 vertical-align:middle。
另外,為元素設置以下兩個屬性之一會隱形改變 display 類型,元素的display顯示類型就會自動變為以display:inline-block(塊狀元素)的方式顯示,當然就可以設置元素的 width 和 height 了,且默認寬度不占滿父元素。
position: absolute
float: left 或 float:right
*請認真填寫需求信息,我們會在24小時內與您取得聯系。