、 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小时内与您取得联系。