JavaWeb——JavaScript语法学习总结

一.JavaScript 基础加强

JavaScript 是在浏览器内容运行，无需编译、解释执行动态脚本语言，是一种弱类型语言，所有变量使用 var 定义。
JavaScript 的 3 个组成部分分别为：核心(ECMAScript)、文档对象模型(DOM)、浏览器对象模型(BOM)

1.js学习顺序：

JavaScript 依次从 变量 (标示符、关键字)，运算符，程序结构(if while for)，以及函数来进行学习。
(1)所有的变量使用 var 来定义，是弱类型变量，不代表没有类型，变量本身还是有类型的。
【var a=10，var b=1.5；他们分别为整数以及浮点数类型】
(2)每行结尾分号可有可无，建议编写。
(3)注释和 Java 类似，支持单行注释(//)和多行注释(/* */)

2.js数据类型

• JavaScript 分为原始数据类型和引用数据类型，分别存储于栈和堆中。
  原始数据类型 ：number、string、boolean、null 和 undefined
  引用数据类型 ：存在很多种，每种都是 object 对象
  可以使用 typeof 查看数据类型，使用 instanceof 判断变量数据类型
• null 和 和 undefined 的区分
  null：对象不存在；
  undefined：对象存在，访问属性或者方法不存在(对象未初始化)
• ECMAScript 对象
  ECMAScript 常用的有 7 个对象，依次为 String、Number、Boolean、Math、Date、Array 以及 Regxp。
• String 类型常用属性方法
  这里需要注意的为length属性以及match方法
  charAt()、concat()、indexOf()、lastIndexOf()、match()、replace()、split()、substr()、substring()、toLowerCase()、toUpperCase()
  Java中提供matches方法
  例如：“1234”.matches("\d+") ---- 返回true
  JavaScript 与 matches方法等价的那个方法，是 RegExp 对象提供test方法
  例如：/^\d+KaTeX parse error: Undefined control sequence: \d at position 29: …) --- 返回true /^\̲d̲+/ 等价于 new RegExp("^\d+KaTeX parse error: Got function '\newline' with no arguments as superscript at position 1: \̲n̲e̲w̲l̲i̲n̲e̲") 返回是匹配正则表达式内容，而不是布尔值，等价于/^\d+$/.exec(“1234”)
• Math 常 用属性和方法
  PI 属性
  round(x) 把数四舍五入为最接近的整数
  random() 返回 0 ~ 1 之间的随机数
  pow(x,y) 次幂
  sqrt(x) 平方根
• Date 常用属性和方法
  toLocaleString() 返回当地本地化日期格式 2012年12月12日 11:07:52
  getTime() 返回从1970年1月1日到目前为止毫秒值
• Array 常用属性方法
  push() 加入元素到数组
  pop() 从数组移除最后一个元素
  reverse()反转
  join() 连接数组元素 通过特定内容 返回字符串
  sort() 排序
  slice() 截取数组中指定元素 从start到end

3.ECMAScript 核心语法——函数

• 函数定义的三种方式
  注 意： 第二种方式使用越来越多，第三种不常用，第一种常用

<script type= "text/javascript" >
// 方式一
function add(a,b){ // 没有返回值，形参不需要声明类型
	return a+b; // 可以返回
}
// alert(add(1,2));
// 方式二 function 匿名函数， sub成为函数名称
var sub = function(a,b){
	return a-b;
}
// alert(sub(10,8));
// 方式三 使用Function对象 定义函数
// 语法 new Funtion(arg1,arg2 ... , body)
var mul = new Function("a","b","return a*b;"); // 不常用
// alert(mul(10,20));
// 所有函数 都是Function实例
	alert(mul instanceof Function);// true
</script>

• JavaScript 全局函数(内置函数)
  一组与编码解码相关的函数
  encodeURI()&decodeURI()
  encodeURIComponent()&decodeURIComponent()
  escape()&unescape()

4.ECMAScript 核心——JavaScript 面向对象编程

Java 是面向对象，写 Java 程序，写类和对象。JavaScript 是基于对象，写 Js，不用创建类，使用 Js 内部已经定义好的对象。
①： 定义 JavaScript
方式一：使用已经存在的对象，通过关键字进行创建

var s = new String("aaaa");
var o = new Object();
var date = new Date();
// alert(date instanceof Object);// true
// JS对象 类似一个map结构
var arr = new Array(3);
arr[0] = 100;// 使用数组下标 为数组元素赋值
arr['aaa'] = 1000; // 定义对象属性
// alert(arr['aaa']);
arr.showInfo = function(){// 定义对象方法
alert(arr.join(","));
};
// arr.showInfo(); //100, 

Js 其实就是一个类似 map 结构，key 为属性名和方法名，value 为属性值和方法定义
方式二：通过{} 创建

var obj = {
	name : '张三',
	age : 20,
	getName : function(){
// 访问对象属性 通过关键字 this
	return this.name;
}
};
// 访问对象 属性 [] 和 .
// alert(obj.name);
// alert(obj["age"]);
	alert(obj.getName());
// 添加一个方法到 obj对象
	obj.getAge = function(){
	return this.age;
}
	alert(obj.getAge());
	
// 定义类 结构
var Product = function(name,price){
this.name = name; // 保存name的值 到对象属性中
this.price = price;
}
// 基于类结构创建对象，使用new 关键字
var p1 = new Product("冰箱",1000);
var p2 = new Product("洗衣机",1500);
// alert(p1.name);
// alert(p1.price);

JavaScript 中的对象是通过 new function 创建的，在 Js 中 function 等同于一个类结构
function 本身代表一个函数，JavaScript 对象通过 new function 来获得的，理解function 就是对象构造函数
②： Object 和 和 function 的关系

JavaScript 中所有引用类型都是对象 Object 实例 ------- Function instanceOf Object //true
JavaScript 中所有对象都是通过 new Function 实例(function) 获得 ------
Object instance Function //true
JavaScript 所有对象构造函数都是 function 实例；JavaScript 所有对象都是object 实例，function 也是 object 实例。

A：function 是用来定义一个函数，所有函数实例都是 Function 对象
B：JavaScript 中，所有对象都是通过 new function 得到的

Var Object = function(){...}
Var String = function(){...}
Var Array = function(){...}
Var Date = function(){...}
结论：所有对象构造器都是 Function 实例

C：创建一个对象，需要使用 new function

Var s = new String()
Var o = new Object()
Var arr = new Array()
Var date = new Date()
结论：JavaScript 中，一切对象都是 object 实例

var f = new Function(); // 实例化Function对象
var o = new Object(); // 实例化Object对象

③： function 原型属性
JavaScript 所有对象都由 function 构造函数得来的 ，通过修改 function 构造函数 prototype 属性，动态修改对象属性和方法。
④： 继承
A：使用原型链完成 JavaScript 单继承

var A = function(){
this.name = 'xxx';
}
var B = function(){
this.age = 20;
}
// 方式一 可以通过 prototype 原型完成单继承 B 的原型指向 A
B.prototype = new A(); // 从A实例中，继承所有属性
var b = new B();
alert(b.name);
// 练习：通过prototype为String类添加一个trim方法
String.prototype.trim = function(){
return this.replace(/(^\s*)(\s*$)/g, "");
}

B：对象冒充完成多继承
var C = function(){
this.info = 'c';
}
var D = function(){
this.msg = 'd';
}
var E = function(){
// 同时继承C和D
this.methodC = C;
this.methodC();
delete this.methodC;
this.methodD = D;
this.methodD();
delete this.methodD;
this.desc = 'e';
}
var e = new E();
// alert(e.info);
// alert(e.msg);
// alert(e.desc);

⑤： 动态方法调用
可以改变 this 的指向，可以完成对象多继承

// 定义函数
function printInfo(){
alert(this.name);
}
// 属性name 值 张三
var o = {name: '张三'};
// o.printInfo();// 函数不属于对象o
// JS提供动态方法调用两个方法，允许一个对象调用不是属于它自己的方法(call apply)
// printInfo.call(o);
// printInfo.apply(o);
function add(a,b){
this.sum = a+b;
}
// call传 多个参数
// add.call(o,8,10);
// apply 传递参数数组
add.apply(o,new Array(8,10));
// alert(o.sum);
// 动态方法调用 ，实现多重继承，原理就是对象冒充
var A = function(){
this.info = 'a';
}
var B = function(){
// 动态方法调用继承
A.call(this);
}
var b = new B();
alert(b.info);

二、JavaScript 浏览器对象 BOM

DOM Window 代表窗体
DOM History 历史记录
DOM Location 浏览器导航
DOM Navigator 浏览器信息 不讲
DOM Screen 屏幕 不讲
重点：window、history、location ，最重要的是 window 对象
1.window 对象
Window 对象表示浏览器中打开的窗口，如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象
window.frames 返回窗口中所有命名的框架
parent 是父窗口（如果窗口是顶级窗口，那么 parentselftop）
top 是最顶级父窗口（有的窗口中套了好几层 frameset 或者 iframe）
self 是当前窗口（等价 window）
opener 是用 open 方法打开当前窗口的那个窗口
①： 父子窗体之间的通讯
在页面内嵌入一个 iframe，在 iframe 中提供一个输入项，输入后，在 iframe 外面窗口中显示内容

实现思路如下：
子窗体：2.html

<head>
<meta http-equiv= "Content-Type" content= "text/html; charset=gbk" >
<title>Untitled Document</title>
<script type= "text/javascript" >
	function showOutter(){
	// 获得输入内容
	var content = document.getElementById("content").value;
	// 将输入的内容显示到主窗体info 中
	window.parent.document.getElementById("info").innerHTML = 	content;
	} 
	</script>
</head>
<body>
	<h1>子窗体</h1>
	<input type= "text" id= "content" />
	<input type= "button" value= "显示到主窗体" οnclick="showOutter();"/>
</body>

主窗体：1.html

<head>
	<meta http-equiv= "Content-Type" content= "text/html; 		charset=gbk" >
	<title>父子窗体通信</title>
	<script type= "text/javascript" >
	function showContent(){
// 用主窗体读取子窗体内容
	var  content  =
	window.frames[0].document.getElementById("content").value;
alert(content);
}
	</script>
</head>
<body>
	<h1>主窗体</h1>
	<div id= "info" ></div>
<!-- 在主窗体中获得子窗体内容 -->
	<input type= "button" value= "获取子窗体输入内容" οnclick="showContent();"
	/>
	<iframe src= "2.html" ></iframe>
</body>

②：window 的 的 open close

<head>
<title>打开关闭窗体</title>
<meta http-equiv= "content-type" content= "text/html; charset=gbk" >
<script type= "text/javascript" >
//用一个变量记录打开的网页
	var openNew;
	function openWindow(){
		openNew = window.open("http://www.itcast.cn");
}
//关闭的时候需要注意关闭的是打开的网页，而不是本身
	function closeWindow(){
		openNew.close();
	}
	</script>
</head>
<body>
	<input type= "button" value= "打开传智播客网页" οnclick="openWindow()">
	<input type= "button" value= "关闭传智播客网页" οnclick="closeWindow()">
</body>

③： window 弹出对话框相关的 3
alert()警告框
confirm()确认框
prompt()输入框

<script type= "text/javascript" >
	alert("这是警告框！")
	var con = confirm("你想好了吗？");
	alert(con);
	var msg = prompt("请输入姓名","张三");
	alert(msg);
</script>

④： 定时操作 setInterval & setTimeout
setInterval：定时任务会重复执行
setTimeout：定时任务只执行一次

在页面动态显示当前时间:

<script type= "text/javascript" >
	window.onload = function(){
	var date = new Date();
		document.getElementById("time1").innerHTML 	=date.toLocaleString();
		document.getElementById("time2").innerHTML =date.toLocaleString();
		setInterval("show1();",1000); //间隔1秒后重复执行
		setTimeout("show2();",1000); //1秒后执行，执行1次
	}
	function show1(){
		var date = new Date();
		document.getElementById("time1").innerHTML 		=date.toLocaleString();
	}
	function show2(){
		var date = new Date();
		document.getElementById("time2").innerHTML =date.toLocaleString();
		setTimeout("show2();",1000);//不终止
}
</script>
<body>
	<div id= "time1" ></div>
	<div id= "time2" ></div>
</body>

2.history 对象
代表历史记录，常用来制作页面中返回按钮

<input type="button" value="返回" onclick="history.back();" />
<input type="button" value="返回" onclick="history.go(-1);" />

3.Location 对象
代表浏览器导航 在js函数中发起href链接效果
location.href=‘跳转后url’ ; 等价于

三、JavaScript 文档对象模型DOM

<html>
	<head>
<meta http-equiv= "Content-Type" content= "text/html; charset=gbk" >
		<title>History和Location使用</title>
	</head>
	<body>
		<input type= "button" value= "返回" οnclick="history.back();" />
		</body>
</html>

DOM 解析模型，将文档加载到 内存，形成一个树形结构 就是根节点，每个标
签会成为一个元素节点、标签的属性成为属性节点，标签内部的文本内容成为文本节点
注意 ：属性节点，它不属于 DOM 树形结构，不属于任何节点父节点，也不属于任何节点
的子节点 ，属性节点依附于元素节点上 一种附加节点
【上面代码 产生 6 个元素节点，5 个属性节点，9 个文本节点】
HTML 本身也是 XML，所有可以使用 XML DOM API 规范
DOM Element
DOM Attr
DOM Text
DOM Document
HTML DOM 是对 XML DOM 的扩展， HTML DOM 比 XML DOM 开发 JS 来说更加简单方便！
HTML DOM 最优秀的地方是，操作 form 对象和 table 数据
1.BOM 和 HTML DOM 关系图

学习 DOM 编程，从 Document 对象开始，document 代表当前 HTML 网页文档对象，是
window 对象一个属性，可以直接使用 ，所有 HTML DOM 对象都是 Document 子对象
2.DOM 编程开发
window.document 代表整个 HTML 文档
①： 通过 document 获得 Node 节点对象
document.forms 获得页面中所有 form 元素集合
document.body 访问页面中 元素
document.cookie 用 JS 操作网页 cookie 信息
全局检索提供了三个重要的方法：
document.getElementById():通过 id 属性检索，获得 Node 节点（Element 元素）
document.getElementsByName 通过 name 属性检索 ，获得NodeList
document.getElementsByTagName 通过标签元素名称 获得 NodeList
其中 NodeList 可以作为数组进行操作
Demo:在每一个 h1 标签后追加 itcast

<script type= "text/javascript" >
	//在每一个h1标签内追加一个itcast
	window.onload = function(){
		var nodeList = document.getElementsByTagName("h1");
		for(var i=0; i<nodeList.length;i++){
			// var h1 = nodeList[i];
			var h1 = nodeList.item(i);
			alert(h1.innerHTML);
			h1.innerHTML += "itcast";
		}
	} 
</script>
<body>
	<h1>AAA</h1>
	<h1>BBB</h1>
	<h1>CCC</h1>
	<h1>DDD</h1>
</body>

②： 获得 node 后
如果 node 是元素，去操作里面的文本内容 innerHTML (HTML 页面内所有元素，一定
是 HTML 元素，innerHTML 是所有 HTML 元素通用属性 )
XML 取得一个元素内部文本内容 element.firstChild.nodeValue
③： 通过节点 Node 相对位置关系访问元素
childNodes
firstChild
lastChild
nextSibling
parentNode
previousSibling

用 2 种方式打印——明天休息

<h1 id= "h1" >明天休息</h1> <br>
	var h1 = document.getElementById("h1");
	alert(h1.innerHTML);//方式一
	alert(h1.firstChild.nodeValue);//方式二

3.DOM 元素常见操作
DOM 获取节点 ：节点查询 参上
DOM 改变节点： 元素属性修改 setAttribute(name,value)
内部文本元素的修改 innerHTML
DOM 删除节点： removeChild 删除子元素 、removeAttribute(name)删除节点指定属性

• 要删除节点 o o.parentNode.removeChild(o)
  DOM 替换节点 ：replaceChild：父节点.replaceChild(新节点,被替换节点) ;
  如果对于一个已经存在节点，执行 appendChild、 replaceChild 都会造成该节点一个
  移动效果，可以采取先克隆再复制来消除此效果。
  DOM 创建节点： document 对象提供 createElement() 创建元素、createAttribute(name)
  创建属性、createTextNode() 创建文本节点
  DOM 添加节点 appendChild 父元素.appendChild(新的子节点) ;
  insertBefore 父节点.insertBefore(新子节点, 已经存在子节点)
  DOM 克隆节点 源节点.cloneNode(true); 该方法可以返回一个节点的克隆节点， 克隆
  隆节点包含原节点的属性和子元素

四、JavaScript 事件

事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。事件是基于对
象存在，事件通常可以修饰多种对象。

• 1.为对象添加事件的 2 种方式
  ①：在 HTML 元素中添加对象的事件

<head>
	<title>事件</title>
	<meta http-equiv= "content-type" content= "text/html; 		charset=gbk" >
	<script type= "text/javascript" >
		function overtest(){
			alert("移动到图片上方");
		}
	</script>
</head>
<body>
	<img src= "1.jpg" width= "200" height= "300" onmouseover = "overtest()";/>
</body>

②：在 JS 代码中为元素添加事件

<head>
	<title>事件</title>
	<meta http-equiv= "content-type" content= "text/html; charset=gbk" >
<script type= "text/javascript" >
	function overtest(){
	alert("移动到图片上方");
}
	window.onload = function(){
		document.getElementById("myimg").onmouseover = overtest;
		}
	</script>
</head>
<body>
	<img src= "1.jpg" width= "200" height= "300" id= "myimg" ;/>
</body>

总结：优先使用第二种，将 js 代码与 HTML 元素代码分离开，更加方便统一管理维护。
问题：HTML 元素添加事件， 与 与 JS 添加事件是否可以完全等价？
在实际开发中，如果传参数，使用 HTML 元素绑定事件，如果不传参数，使用 JS 绑定
事件。传参数也可以使用与 JS 绑定事件【 使用匿名函数 】。
示例代码如下：

<head>
	<title>HTML事件绑定与JS绑定</title>
	<meta http-equiv= "content-type" content= "text/html; charset=gbk" >
	<script type= "text/javascript" >
		function clicktest(o){
			alert(o);
		}
		window.onload = function(){
		document.getElementById("mybutton").onclick =
		function(){
clicktest('次奥');
			}
		}
	</script>
</head>
<body>
	<input type= "button" id= "mybutton" value= "点击我！" >
	<input type= "button" value= "别碰我！" onclick = "clicktest('次奥')"/>
</body>

• 2.鼠标移动事件
  Mousemove ： 鼠标移动时触发事件 鼠标跟随效果
  Mouseover ： 鼠标从元素外，移动元素之上，信息提示、字体变色
  Mouseout ： 鼠标从元素上，移出元素范围，和 mouseover 一起使用
• 3.鼠标点击事件（左键相关事件）
  click 鼠标单击事件
  dbclick 鼠标双击事件
  mousedown/mouseup 鼠标按下、按键弹起 click = mousedown + mouseup;
  oncontextmenu 鼠标右键菜单事件 （不是浏览器兼容事件）
• 4.聚焦离焦事件
  focus 聚焦 页面焦点定位到目标元素
  blur 离焦 页面焦点由目标元素移开
  Demo:

<script type= "text/javascript" >
	window.onload= function(){
		//页面加载后，在输入框加入默认值，并以灰色显示
		document.getElementById("username").value= "用户名";
		document.getElementById("username").style.color="gray";
		//聚焦事件
		document.getElementById("username").onfocus= function(){
		document.getElementById("username").value="";
		document.getElementById("username").style.color="black";
	}
	//离焦事件
	document.getElementById("username").onblur=function(){
		var name = document.getElementById("username").value;
		if(name==""){
			document.getElementById("username").value="张三";
		   	document.getElementById("username").style.color="gray";
		}
	}
}
</script>
</head>
<body>
	请输入用户名：<input type= "text" id= "username" ><br/>
</body>

显示效果截图如下：

• 5.键盘事件
  使用场景：没有提交按钮，我们一般采用回车进行提交

<script type= "text/javascript" >
	window.onload = function(){
	document.getElementById("message").onkeypress = function(e){
	// 判断用户 按键是否为 回车键
	if(e && e.which){
	// 火狐浏览器
	if(e.which == 13){
		alert("提交")
	}
}else{
// IE浏览器
	if(window.event.keyCode ==13 ){
		alert("提交")
		}
	}
	}
}
</script>
<body>
	发送消息 <input type= "text" name= "message" id= "message" />
</body>

IE 中 window 对象，提供 event 属性，所以在 IE 中可以直接使用 event 对象
火狐没有全局 event 对象，必须在发生事件时，产生一个 event 对象 ，传递默认方法

• 6.form 的提交、重置事件
  submit/reset
  onsubmit = “return validateForm” 对表单进行校验
• 7.改变事件
  onchange 制作 select 联动效果 ---- 省市联动
  重点 ： onclick 、onchange 、onblur 、 onsubmit
• 8.默认事件的阻止和传播阻止
  使用场景极为常见，超链接用户点击后，取消了不发生跳转。

<script type= "text/javascript" >
	// 阻止默认事件发生
	function confirmDel(e){
	var isConfirm = window.confirm("确认删除吗？");
	if(!isConfirm){// 用户选择了取消
		// 阻止默认事件
		if(e && e.preventDefault){
			// 火狐
			e.preventDefault();
		}else{
			// IE
			window.event.returnValue = false;
			}
		}
	}
	// 阻止事件冒泡
	function aclick(e){
		alert("a");
		if(e && e.stopPropagation){
			// 火狐浏览器
			e.stopPropagation();
		}else{
			// IE 浏览器
			window.event.cancelBubble = true;
		}
	}
	function divclick(){
		alert("div");
	}
</script>
<body>
	<h1>默认事件</h1>
	<!-- 删除时，询问用户是否删除，然后再跳转-->
	<a href= "del?id=1" onclick="confirmDel(event);">这是一个链接	</a>
	<h1>事件传播</h1>
	<!-- 事件冒泡传播 -->
	<div onclick="divclick();"><a href= "#" 		onclick="aclick(event);">这个链接 会触发两个事件执行</a></div>
</body>

HTML DOM Event 对象
提供 preventDefault()用于阻止默认事件的发生， 该方法 IE 不支持 ，在 IE 中使
用 returnValue
提供 stopPropagation()用与阻止事件传播，该方法 IE 不支持，在 IE 中
cancelBubble

五、Ajax 编程入门

1.web 交互的 2 种模式对比
①： 2 种交互模式的流程

②： 2 种交互模式用户体验
同步交互模式 ：客户端提交请求，等待，在响应回到客户端前，客户端无法进行其他操作
异步交互模型 ：客户端将请求提交给 Ajax 引擎，客户端可以继续操作，由 Ajax 引擎来完
成与服务武器端通信，当响应回来后，Ajax 引擎会更新客户页面，在客户端提交请求后，
用户可以继续操作，而无需等待 。
2.Ajax 快速入门
①： 开发步骤
1).创建 XMLHttpRequest 对象
2).将状态触发器绑定到一个函数
3).使用 open 方法建立与服务器的连接
4).向服务器端发送数据
5).在回调函数中对返回数据进行处理
Demo ：

<script type= "text/javascript" >
	// 第一步 创建XMLHttpRequest
	function createXMLHttpRequest(){
		try {
			xmlHttp = new XMLHttpRequest();
		}catch (tryMS) {
			try {
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			}catch (otherMS) {
			try {
				xmlHttp = new 	ActiveXObject("Microsoft.XMLHTTP");
				}catch (failed) {
				xmlHttp = null;
				// 这里可以报一个错误，无法获得 XMLHttpRequest对象
			}
		}
	}
		return xmlHttp;
	}
	var xmlHttp = createXMLHttpRequest();
	// 第二步 响应从服务器返回后，Ajax引擎需要更新页面，绑定一个 回调函数
	xmlHttp.onreadystatechange = function(){
		// 第五步，响应返回后执行
		// 状态依次 是 0 - 4
		// 0 未初始化 1 正在加载 2 已经加载 3 交互中 4 响应完成
		if(xmlHttp.readyState == 4){
			// 判断数据是否正确
			if(xmlHttp.status == 200){
				// 响应有效
					alert("响应返回了..." + xmlHttp.responseText);
			}
		}
};
		// 第三步 建立与服务器连接
		//xmlHttp.open("GET","helloworld?name=张三");			//helloworld代表 Servlet
URL
	xmlHttp.open("POST","helloworld");
	// 第四步 发送数据
	// xmlHttp.send(null);
	xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
	xmlHttp.send("name=李四");
</script>

②： XMLHttpRequest 对象的属性及方法
属性：
1)onreadystateonchange：状态回调函数
2)readystate：对象状态
3)status：服务器返回的 http 状态码
4)reqsponseText/responseXML：服务器响应的字符串
5)statusText：服务器返回的 http 状态信息
方法：
1)open:
2)send:
③： 客户端向服务器提交数据
1)get 方式发送数据
xmlHttp.open(“GET”,“url?key=value”); // 参数已经在 url 上
xmlHttp.send(null);
2)post 方式发送数据
xmlHttp.open(“POST”,“url”); // 不需要写参数
xmlHttp.setRequestHeader(“CONTENT-TYPE”,“application/x-www-form-
urlencoded”); // post 发送参数前，需要设置编码格式
xmlHttp.send(“name=xxx&pwd=xxx”); // 发送 post 数据
④： Ajax 编程图解
说明：查看时，请将文档放到为 180%较为合适！

3.三种不同服务器响应数据类型编程
常见的服务器响应数据类型：html 片段、JSON 格式数据、xml 格式数据
①： HTML 片段的数据处理
练习1 ：验证用户名是否有效
通过 xmlhttp.responseText 获得返回数据
通过 Dom 查找获得元素
调用元素的 innerHTML 进行操作
④： XML 格式数据处理
练习 3：select 完成省级联动

1. XStream 的使用
   问题：服务器端如何将 java 对象，生成 XML 格式数据？需要第三方类库支持 XStream
   XStream is a simple library to serialize objects to XML and back again.
   XStream 主要完成 Java 对象的序列化(xstream-1.3.1.jar)以及解析(xpp3_min-
   1.1.4c.jar)
2. XStream 的核心方法
    xStream.toXML(obj)：将对象序列化 XML
    xStream.fromXML(inputStream/xml 片段)：将 xml 信息解析成对象
    xStream.alias(String name,Class)：将类型解析或者序列化时，取一个别名
   代码案例：( 序列化 ）
   解析 xml 时，要注意别名的命名规则要与序列化时保持一致！
3. XStream 注解
   在 在 Javabean 中进行注解
   把某属性的名称取别名为 city：@XStreamAlias(value=“city”)
   注解生效： xStream.autodetectAnnotations(true);
   @XStreamAsAttribute 设置变量生成属性
   @XStreamOmitField 设置变量不生成到 XML
   @XStreamImplicit(itemFieldName = “hobbies”) 设置集合类型变量别名

六、jQuery

jQuery 1.4 是企业主流版本，从 jQuery1.6 开始引入大量新特性。最新版本 2.1.1，
这里讲解以 1.8.3 为主(新版本主要是浏览器兼容问题以及新特性)
jQuery 提供 jquery-1.8.3.js 和 jquery-1.8.3.min.js
jquery-1.8.3.js jQuery 框架源码，没有被精简，体积较大 （主要用来研究 jQuery
源码），企业开发时，需要导入 jquery-1.8.3.min.js （精简过）
1.jQuery 程序快速入门
window.onload = function() {…}
等价于$(document).ready(function(){…});
①： jQuery

传统Js写法：
<script type="text/javascript">
	window.onload = function(){
		alert("传统JS，Ok");
}
</script>

jQuery写法：
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		$(function(){
			alert("ok");
		});
	$(document).ready(function(){
		alert("OK");
	});
</script>

②： jQuery 核心函数
1)jQuery(callback) // 页面 onload 函数
2)jQuery(expression, [context]) // 查找指定对象 ------ 九种选择器
3)jQuery(elements) // 将 dom 对象转换为 jQuery 对象

• document 是 DOM 对象 jQuery(document) 成为了 jQuery 对象
  4)jQuery(html, [ownerDocument]) // 将 html 转换 jQuery 对象
• jQuery(“

  hello

  ”) ----- 得到 jQuery 对象