JS的简单用法

JS的简单用法

参考：http://www.w3school.com.cn/js/js_switch.asp

JavaScript 是网络的脚本语言
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

1. 基础知识

1.1 实现

• HTML 中的脚本必须位于 标签之间。
• 脚本可位于 HTML 的 或 部分中，或者同时存在于两个部分中。
• 通常的做法是把函数放入 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
• 在 JavaScript 中，用分号来结束语句是可选的，但强烈推荐放上去。
• JavaScript 对大小写是敏感的。
• JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的：

var name="Hello";
var name = "Hello";

• 对代码行进行折行--使用反斜杠

document.write 
("Hello World!");

document.write("Hello 
World!");

• JavaScript 注释
  单行注释以 // 开头。
  多行注释以/*开始，以*/结尾。
• type="text/javascript"
  那些老旧的实例可能会在<script>标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

<script>
alert("My First JavaScript");
</script>

• JavaScript 标签
  如需标记 JavaScript 语句，请在语句之前加上冒号：

label:
语句

cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}

1.2 变量

一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。
可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：

var name="Gates", age=56, job="CEO";

在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。
重新声明 JavaScript 变量:
如果重新声明 JavaScript 变量，该变量的值不会丢失：
在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：

var carname="Volvo";
var carname;

• JavaScript 拥有动态类型
  这意味着相同的变量可用作不同的类型：

var x                // x 为 undefined
var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串

可以使用单引号或双引号,也可以在字符串中使用引号，只要不匹配包围字符串的引号即可：

var answer="Nice to meet you!";
var answer="He is called 'Bill'";
var answer='He is called "Bill"';

• JavaScript 数组

var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";

或者

var cars=new Array("Audi","BMW","Volvo");

或者

var cars=["Audi","BMW","Volvo"];

数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。

• JavaScript 对象
  对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"Bill", lastname:"Gates", id:5566};

空格和折行无关紧要。声明可横跨多行：

var person={
firstname : "Bill",
lastname  : "Gates",
id        :  5566
};

对象属性有两种寻址方式：

name=person.lastname;
name=person["lastname"];

• Undefined 和 Null
  Undefined 这个值表示变量不含有值。
  可以通过将变量的值设置为 null 来清空变量。

cars=null;
person=null;

1.3 对象

JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。
在 JavaScript 中，对象是拥有属性和方法的数据。

• 字符串对象：

var txt = "Hello";

属性：

txt.length=5

方法：

txt.indexOf()
txt.replace()
txt.search()

在面向对象的语言中，使用 camel-case 标记法的函数是很常见的。经常看到 someMethod() 这样的函数名，而不是 some_method()。

1.4 函数

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function myFunction(var1,var2)
{
这里是要执行的代码;

return x;
}

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。参数和返回值是可选的。

<button onclick="myFunction('Bill Gates','CEO')">点击这里</button>

<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>

var myVar=myFunction();
document.getElementById("demo").innerHTML=myFunction();

局部变量：在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。局部变量会在函数运行以后被删除。
全局变量：在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。全局变量会在页面关闭后被删除。

向未声明的 JavaScript 变量来分配值：如果把值赋给尚未声明的变量，该变量将被自动作为全局变量声明，即使它在函数内执行。

1.5 JavaScript 运算符

• JavaScript 算术运算符：
  +，-，*，/，%求余数，++ 累加，-- 递减

• JavaScript 赋值运算符：
  =，+=，-=，*=，/=，%=

• +可以用于字符串相连

• JavaScript 比较和逻辑运算符
  ，=（全等，值和类型），!=，<,>,<=,>=

• 逻辑运算符
  &&，||，!

• 条件运算符

variablename=(condition)?value1:value2 

1.6 逻辑语句

• If 语句

if (条件)
  {
  只有当条件为 true 时执行的代码
  }

• If...else if...else 语句

if (条件 1)
  {
  当条件 1 为 true 时执行的代码
  }
else if (条件 2)
  {
  当条件 2 为 true 时执行的代码
  }
else
  {
  当条件 1 和 条件 2 都不为 true 时执行的代码
  }

• Switch 语句

switch(n)
{
case 1:
  执行代码块 1
  break;
case 2:
  执行代码块 2
  break;
default:
  n 与 case 1 和 case 2 不同时执行的代码
}

• For 循环

for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}

• For/In 循环遍历对象的属性

var person={fname:"John",lname:"Doe",age:25};

for (x in person)
  {
  txt=txt + person[x];
  }

• while 循环

while (条件)
  {
  需要执行的代码
  }

• do/while 循环

do
  {
  需要执行的代码
  }
while (条件);

• Break 和 Continue 语句
  break 语句用于跳出循环。
  continue 用于跳过循环中的一个迭代。

• Throw、Try 和 Catch
  try 语句测试代码块的错误。
  catch 语句处理错误。
  throw 语句创建自定义错误。

try
  {
  //在这里运行代码
  }
catch(err)
  {
  //在这里处理错误
  }

1.7 表单或邮箱验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有：
用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？

<html>
<head>
<script type="text/javascript">

function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {alert(alerttxt);return false}
  else {return true}
  }
}

function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(email,"Email must be filled out!")==false)
    {email.focus();return false}
  }
}
</script>
</head>

<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

2. JS HTML DOM

通过 HTML DOM（文档对象模型），可访问 JavaScript HTML 文档的所有元素。

查找 HTML 元素

• 通过 id 找到 HTML 元素

var x=document.getElementById("intro");

• 通过标签名找到 HTML 元素

//查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

• 通过name找到 HTML 元素

var x=document.getElementsByName("intro");

改变 HTML 元素的内容

• 改变 HTML 输出流
  在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。但绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

• 改变 HTML 内容

document.getElementById(id).innerHTML=new HTML

• 改变 HTML 属性

document.getElementById(id).attribute=new value

• 改变 CSS

document.getElementById(id).style.property=new style

或者

<h1 id="id1">My Heading 1</h1>

<button type="button" onclick="document.getElementById('id1').style.color='red'">
点击这里
</button>

DOM 事件

• 用户点击鼠标事件

<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击该文本</h1>
</body>
</html>

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

• onload 和 onunload 事件
  onload 和 onunload 事件会在用户进入或离开页面时被触发。
  onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
  onload 和 onunload 事件可用于处理 cookie。

<!DOCTYPE html>
<html>
<body onload="checkCookies()">

<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
	{
	alert("已启用 cookie")
	}
else
	{
	alert("未启用 cookie")
	}
}
</script>

<p>提示框会告诉你，浏览器是否已启用 cookie。</p>
</body>
</html>

• onchange 事件
  onchange 事件常结合对输入字段的验证来使用。

<input type="text" id="fname" onchange="upperCase()">

• onmouseover 和 onmouseout 事件
  onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}

function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>

</body>
</html>

• onmousedown、onmouseup 以及 onclick 事件
  onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

DOM 元素（节点）

• 添加和删除节点（HTML 元素）。
  如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

• 删除已有的 HTML 元素
  如需删除 HTML 元素，您必须首先获得该元素的父元素：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

3. JavaScript 对象

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...
此外，JavaScript 允许自定义对象。
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。

• Number 对象
  JavaScript 只有一种数字类型。
  可以使用也可以不使用小数点来书写数字。
  如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。

var y=0377;
var z=0xFF;

属性：
MAX VALUE
MIN VALUE
NEGATIVE INFINITIVE
POSITIVE INFINITIVE
NaN
prototype
constructor
方法：
toExponential()
toFixed()
toPrecision()
toString()
valueOf()

• 字符串(String)对象
  http://www.w3school.com.cn/jsref/jsref_obj_string.asp

• Array（数组）对象
  http://www.w3school.com.cn/jsref/jsref_obj_array.asp

• RegExp 对象
  http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

4. JavaScript Window - 浏览器对象模型

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。

所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");

与此相同：

document.getElementById("header");

Window 尺寸

浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

其他方法：
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

Window Screen

window.screen 对象包含有关用户屏幕的信息。
window.screen 对象在编写时可以不使用 window 这个前缀。
一些属性：
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

Window Location

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
window.location 对象在编写时可不使用 window 这个前缀。
一些例子：

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
location.href 返回当前页面的 URL。
location.assign() 方法加载新的文档。

Window History

window.history 对象包含浏览器的历史。
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同

JavaScript 消息框

• 警告框
  当警告框出现后，用户需要点击确定按钮才能继续进行操作。

alert("文本")

• 确认框
  当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
  如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

confirm("文本")

• 提示框
  当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
  如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

prompt("文本","默认值")

JavaScript 计时

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

var t=setTimeout("javascript语句",毫秒)

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数。

clearTimeout(setTimeout_variable)

取消setTimeout()

JavaScript Cookies

cookie 用来识别用户。

• 创建和存储 cookie(需要时再看)

5. JavaScript 库

JavaScript 库 - jQuery、Prototype、MooTools。
所有这些框架都提供针对常见 JavaScript 任务的函数，包括动画、DOM 操作以及 Ajax 处理。
jQuery 是目前最受欢迎的 JavaScript 框架。
它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）。
jQuery 同时提供 companion UI（用户界面）和插件。下面进行介绍：

• 向页面添加 jQuery 库

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

jQuery 基础语法

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。

• 基础语法是：$(selector).action()
  美元符号定义 jQuery
  选择符（selector）“查询”和“查找” HTML 元素
  jQuery 的 action() 执行对元素的操作
  比如：

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素

• 文档就绪函数

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。下面是两个具体的例子：
试图隐藏一个不存在的元素
获得未完全加载的图像的大小

jQuery 选择器

选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

• jQuery 元素选择器
  jQuery 使用 CSS 选择器来选取 HTML 元素。
  (("p") 选取 <p> 元素。 )("p.intro") 选取所有 class="intro" 的

  元素。
  $("p#demo") 选取所有 id="demo" 的

  元素。

• jQuery 属性选择器
  jQuery 使用 XPath 表达式来选择带有给定属性的元素。
  (("[href]") 选取所有带有 href 属性的元素。 )("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
  (("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。 )("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

• jQuery CSS 选择器
  jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

$("p").css("background-color","red");

jQuery 事件

jQuery 是为事件处理特别设计的。
单独文件中的函数:如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。

设计原则：

• 把所有 jQuery 代码置于事件处理函数中
• 把所有事件处理函数置于文档就绪事件处理器中
• 把 jQuery 代码置于单独的 .js 文件中
• 如果存在名称冲突，则重命名 jQuery 库

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

jQuery 效果 - 隐藏和显示

• hide() 和 show()
  语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

• toggle()
  使用 toggle() 方法来切换 hide() 和 show() 方法。
  语法：

$(selector).toggle(speed,callback);

例子：

$("button").click(function(){
  $("p").toggle();
});

效果 - 淡入淡出

jQuery 拥有下面四种 fade 方法：

• fadeIn()
  用于淡入已隐藏的元素。
  $(selector).fadeIn(speed,callback);
• fadeOut()
  用于淡出可见元素。
• fadeToggle()
  在 fadeIn() 与 fadeOut() 方法之间进行切换。
• fadeTo()
  允许渐变为给定的不透明度（值介于 0 与 1 之间）。

效果 - 滑动

jQuery 拥有以下滑动方法：

• slideDown()
  方法用于向下滑动元素。
• slideUp()
• slideToggle()

效果 - 动画

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

例子：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    '150px'
  });
}); 

• 使用预定义的值
  甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

• 使用队列功能
  默认地，jQuery 提供针对动画的队列功能。这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
  下面的例子把
  元素移动到右边，然后增加文本的字号：

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

停止动画

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

Chaining--把动作/方法链接起来

Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。这样的话，浏览器就不必多次查找相同的元素。
如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

jQuery操作 HTML 元素和属性

• 获得内容 - text()、html() 以及 val()

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

比如：

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

设置内容

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

• 获取属性 - attr()

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

设置属性

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});

• 添加元素
  append() - 在被选元素的结尾插入内容

$("p").append("Some appended text.");

prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

• 删除元素
  remove() - 删除被选元素（及其子元素）

$("#div1").remove();

empty() - 从被选元素中删除子元素

• 获取并设置 CSS 类
  addClass() - 向被选元素添加一个或多个类

$("button").click(function(){
  $("#div1").addClass("important blue");
});

removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

$("p").css("background-color");
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});

• 尺寸
  width()- 设置或返回元素的宽度（不包括内边距、边框或外边距）。
  height()- 设置或返回元素的高度（不包括内边距、边框或外边距）。

$("button").click(function(){
  var txt="";
  txt+="Width: " + $("#div1").width() + "</br>";
  txt+="Height: " + $("#div1").height();
  $("#div1").html(txt);
});

innerWidth()- 返回元素的宽度（包括内边距）。
innerHeight()- 返回元素的高度（包括内边距）。
outerWidth()
outerHeight()

jQuery 遍历

jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

• 向上遍历 DOM 树
  parent() - 返回被选元素的直接父元素。

$(document).ready(function(){
  $("span").parent();
});

parents()- 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。也可以使用可选参数来过滤对祖先元素的搜索。

$(document).ready(function(){
  $("span").parents("ul");
});

parentsUntil()- 返回介于两个给定元素之间的所有祖先元素。

• 向下遍历 DOM 树
  children()- 返回被选元素的所有直接子元素。
  find()- 返回被选元素的后代元素，一路向下直到最后一个后代。

noConflict() 方法

jQuery 使用 $ 符号作为 jQuery 的简写。如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？
noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。当然，您仍然可以通过全名替代简写的方式来使用 jQuery：

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍在运行！");
  });
});

jQuery - AJAX 简介

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

• AJAX load() 方法
  从服务器加载数据，并把返回的数据放入被选元素中。
  语法：

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。

回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示“外部内容加载成功！”，而如果失败，则显示错误消息：

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功！");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

• jQuery - AJAX get() 和 post() 方法
  jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
  GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
  POST 向指定的资源提交要处理的数据,也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。

$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "
Status: " + status);
  });
});

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "
Status: " + status);
  });
});

6. jQuery - Ajax详解

官网
jQuery 库拥有完整的 Ajax 兼容套件

最核心函数 jQuery.ajax()

ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, (.post 等（我们也只掌握这一种）。).ajax() 返回其创建的 XMLHttpRequest 对象。
语法：

jQuery.ajax( url [, settings ] )

• url request请求的url地址
• settings,
  可选。用于配置 Ajax 请求的键值对集合。
  可以通过 $.ajaxSetup() 设置任何选项的默认值。

jQuery.ajax( [settings ] )

• async
  类型：Boolean，默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
  注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

• beforeSend(XHR)
  类型：Function
  发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。
  XMLHttpRequest 对象是唯一的参数。
  这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。

• cache
  类型：Boolean
  默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。

• complete(XHR, TS)
  类型：Function
  请求完成后回调函数 (请求成功或失败之后均调用)。
  参数： XMLHttpRequest 对象和一个描述请求类型的字符串。
  这是一个 Ajax 事件。

• contentType
  类型：String
  默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
  默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。

• context
  类型：Object
  这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。
  就像这样：

$.ajax({ url: "test.html", context: document.body, success: function(){
        $(this).addClass("done");
      }});

• data
  类型：String
  发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

• dataFilter
  类型：Function
  给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。

• dataType
  类型：String
  预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
  "xml": 返回 XML 文档，可用 jQuery 处理。
  "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
  "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
  "json": 返回 JSON 数据 。
  "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
  "text": 返回纯文本字符串

• error
  类型：Function
  默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
  有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
  如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 "timeout", "error", "notmodified" 和 "parsererror"。
  这是一个 Ajax 事件。

• global
  类型：Boolean
  是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。

• ifModified
  类型：Boolean
  仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中，它也会检查服务器指定的 'etag' 来确定数据没有被修改过。

• jsonp
  类型：String
  在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分，比如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器。

• jsonpCallback
  类型：String
  为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。

• password
  类型：String
  用于响应 HTTP 访问认证请求的密码

• processData
  类型：Boolean
  默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

• scriptCharset
  类型：String
  只有当请求时 dataType 为 "jsonp" 或 "script"，并且 type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。

• success
  类型：Function
  请求成功后的回调函数。
  参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
  这是一个 Ajax 事件。

• traditional
  类型：Boolean
  如果你想要用传统的方式来序列化数据，那么就设置为 true。

• timeout
  类型：Number
  设置请求超时时间（毫秒）。此设置将覆盖全局设置。

• type
  类型：String
  默认值: "GET")。请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

• url
  类型：String
  默认值: 当前页地址。发送请求的地址。

• username
  类型：String
  用于响应 HTTP 访问认证请求的用户名。

• xhr
  类型：Function
  需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。

回调函数
如果要处理 $.ajax() 得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete。
beforeSend
在发送请求之前调用，并且传入一个 XMLHttpRequest 作为参数。
error
在请求出错时调用。传入 XMLHttpRequest 对象，描述错误类型的字符串以及一个异常对象（如果有的话）
dataFilter
在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。并且必须返回新的数据（可能是处理过的）传递给 success 回调函数。
success
当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete
当请求完成之后调用这个函数，无论成功或失败。传入 XMLHttpRequest 对象，以及一个包含成功或错误代码的字符串。

$.ajax()的返回值为 jqXHR对象，因此可以利用 jqXHR对象的方法()
jqXHR.done(function( data, textStatus, jqXHR ) {});
成功回调选项的可选构造器。An alternative construct to the success callback option.

jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});
错误回调选项可选构造器。An alternative construct to the error callback option.

jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { }); (added in jQuery 1.6)
无论成功还是错误，均会执行。An alternative construct to the complete callback option, the .always() method replaces the deprecated .complete() method.

In response to a successful request, the function's arguments are the same as those of .done(): data, textStatus, and the jqXHR object. For failed requests the arguments are the same as those of .fail(): the jqXHR object, textStatus, and errorThrown.

jqXHR.then(function( data, textStatus, jqXHR ) {}, function( jqXHR, textStatus, errorThrown ) {});
Incorporates the functionality of the .done() and .fail() methods, allowing (as of jQuery 1.8) the underlying Promise to be manipulated.

这四个回调函数是官网推荐的，可以取代上面四个回调函数，详细看http://api.jquery.com/jQuery.ajax/
jqXHR对象的属性
readyState
responseXML and/or responseText when the underlying request responded with xml and/or text, respectively
status
statusText
abort( [ statusText ] )
getAllResponseHeaders() as a string
getResponseHeader( name )
overrideMimeType( mimeType )
setRequestHeader( name, value ) which departs from the standard by replacing the old value with the new one rather than concatenating the new value to the old one
statusCode( callbacksByStatusCode )

例子：

1

$.ajax({
   beforeSend: function(){
     // Handle the beforeSend event
   },
   complete: function(){
     // Handle the complete event
   }
   // ......
 });

2

$.ajax({
  url: "http://fiddle.jshell.net/favicon.png",
  beforeSend: function( xhr ) {
    xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
  }
})
  .done(function( data ) {
    if ( console && console.log ) {
      console.log( "Sample of data:", data.slice( 0, 100 ) );
    }
  });

3

// Assign handlers immediately after making the request,
// and remember the jqXHR object for this request
var jqxhr = $.ajax( "example.php" )
  .done(function() {
    alert( "success" );
  }).fail(function() {
    alert( "error" );
  }).always(function() {
    alert( "complete" );
  });
 
// Perform other work here ...
 
// Set another completion function for the request above
jqxhr.always(function() {
  alert( "second complete" );
});

4

var menuId = $( "ul.nav" ).first().attr( "id" );
var request = $.ajax({
  url: "script.php",
  method: "POST",
  data: { id : menuId },
  dataType: "html"
});
 
request.done(function( msg ) {
  $( "#log" ).html( msg );
});
 
request.fail(function( jqXHR, textStatus ) {
  alert( "Request failed: " + textStatus );
});

7. XMLHttpRequest对象

AJAX利用一个构建到所有现代浏览器内部的对象-XMLHttpRequest-来实现发送和接收HTTP请求与响应信息。
XMLHttpRequest 对象用于在后台与服务器交换数据。使用它：

• 在不重新加载页面的情况下更新网页
• 在页面已加载后从服务器请求数据
• 在页面已加载后从服务器接收数据
• 在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象

xmlhttp=new XMLHttpRequest();

一个经由XMLHttpRequest对象发送的HTTP请求并不要求页面中拥有或回寄一个＜form＞元素。AJAX中的"A"代表了"异步"，这意味着XMLHttpRequest对象的send()方法可以立即返回，从而让Web页面上的其它HTML/JavaScript继续其浏览器端处理而由服务器处理HTTP请求并发送响应。尽管缺省情况下请求是异步进行的，但是，你可以选择发送同步请求，这将会暂停其它Web页面的处理，直到该页面接收到服务器的响应为止。

XMLHttpRequest对象的属性和事件

　当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态：一直等待直到请求被处理；然后，它才接收一个响应。
　表格1.XMLHttpRequest对象的ReadyState属性值列表。

ReadyState取值	描述
0	描述一种"未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。
1	描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
2	描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。
3	描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。
4	描述一种"已加载"状态；此时，响应已经被完全接收。

• onreadystatechange事件
  无论readyState值何时发生改变，XMLHttpRequest对象都会激发一个readystatechange事件。其中，onreadystatechange属性接收一个EventListener值-向该方法指示无论readyState值何时发生改变，该对象都将激活。

• responseText属性
  　这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。

• responseXML属性

　　此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应；此时，Content-Type头部指定MIME(媒体)类型为text/xml，application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。无论何时，只要readyState值不为4，那么该responseXML的值也为null。

　　其实，这个responseXML属性值是一个文档接口类型的对象，用来描述被分析的文档。如果文档不能被分析(例如，如果文档不是良构的或不支持文档相应的字符编码)，那么responseXML的值将为null。

• status属性

　　这个status属性描述了HTTP状态代码，而且其类型为short。而且，仅当readyState值为3(正在接收中)或4(已加载)时，这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。

• statusText属性

　　这个statusText属性描述了HTTP状态代码文本；并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。

XMLHttpRequest对象的方法

• abort()方法　
  你可以使用这个abort()方法来暂停与一个XMLHttpRequest对象相联系的HTTP请求，从而把该对象复位到未初始化状态。

• 　open()方法
  你需要调用open(DOMString method，DOMString uri，boolean async，DOMString username，DOMString password)方法初始化一个XMLHttpRequest对象。其中，method参数是必须提供的-用于指定你想用来发送请求的HTTP方法(GET，POST，PUT，DELETE或HEAD)。为了把数据发送到服务器，应该使用POST方法；为了从服务器端检索数据，应该使用GET方法。另外，uri参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URI。借助于window.document.baseURI属性，该uri被解析为一个绝对的URI-换句话说，你可以使用相对的URI-它将使用与浏览器解析相对的URI一样的方式被解析。async参数指定是否请求是异步的-缺省值为true。为了发送一个同步请求，需要把这个参数设置为false。对于要求认证的服务器，你可以提供可选的用户名和口令参数。在调用open()方法后，XMLHttpRequest对象把它的readyState属性设置为1(打开)并且把responseText、responseXML、status和statusText属性复位到它们的初始值。另外，它还复位请求头部。注意，如果你调用open()方法并且此时readyState为4，则XMLHttpRequest对象将复位这些值。

• send()方法
  　在通过调用open()方法准备好一个请求之后，你需要把该请求发送到服务器。仅当readyState值为1时，你才可以调用send()方法；否则的话，XMLHttpRequest对象将引发一个异常。该请求被使用提供给open()方法的参数发送到服务器。当async参数为true时，send()方法立即返回，从而允许其它客户端脚本处理继续。在调用send()方法后，XMLHttpRequest对象把readyState的值设置为2(发送)。当服务器响应时，在接收消息体之前，如果存在任何消息体的话，XMLHttpRequest对象将把readyState设置为3(正在接收中)。当请求完成加载时，它把readyState设置为4(已加载)。对于一个HEAD类型的请求，它将在把readyState值设置为3后再立即把它设置为4。

　send()方法使用一个可选的参数-该参数可以包含可变类型的数据。典型地，你使用它并通过POST方法把数据发送到服务器。另外，你可以显式地使用null参数调用send()方法，这与不用参数调用它一样。对于大多数其它的数据类型，在调用send()方法之前，应该使用setRequestHeader()方法(见后面的解释)先设置Content-Type头部。如果在send(data)方法中的data参数的类型为DOMString，那么，数据将被编码为UTF-8。如果数据是Document类型，那么将使用由data.xmlEncoding指定的编码串行化该数据。

• setRequestHeader()方法

　　该setRequestHeader(DOMString header，DOMString value)方法用来设置请求的头部信息。当readyState值为1时，你可以在调用open()方法后调用这个方法；否则，你将得到一个异常。

• getResponseHeader()方法

　　getResponseHeader(DOMString header，value)方法用于检索响应的头部值。仅当readyState值是3或4(换句话说，在响应头部可用以后)时，才可以调用这个方法；否则，该方法返回一个空字符串。

• getAllResponseHeaders()方法

发送请求
　在AJAX中，许多使用XMLHttpRequest的请求都是从一个HTML事件（例如一个调用JavaScript函数的按钮点击(onclick)或一个按键(onkeypress)）中被初始化的。AJAX支持包括表单校验在内的各种应用程序。有时，在填充表单的其它内容之前要求校验一个唯一的表单域。例如要求使用一个唯一的UserID来注册表单。如果不是使用AJAX技术来校验这个UserID域，那么整个表单都必须被填充和提交。如果该UserID不是有效的，这个表单必须被重新提交。例如，一个相应于一个要求必须在服务器端进行校验的Catalog ID的表单域可能按下列形式指定：

＜form name="validationForm" action="validateForm" method="post"＞
＜table＞
　＜tr＞＜td＞Catalog Id:＜/td＞
　　＜td＞
　　　＜input type="text" size="20" id="catalogId" name="catalogId" autocomplete="off" onkeyup="sendRequest()"＞
　　＜/td＞
　　＜td＞＜div id="validationMessage"＞＜/div＞＜/td＞
　＜/tr＞
＜/table＞＜/form＞ 

　　前面的HTML使用validationMessage div来显示相应于这个输入域Catalog Id的一个校验消息。onkeyup事件调用一个JavaScript sendRequest()函数。这个sendRequest()函数创建一个XMLHttpRequest对象。创建一个XMLHttpRequest对象的过程因浏览器实现的不同而有所区别。如果浏览器支持XMLHttpRequest对象作为一个窗口属性(所有普通的浏览器都是这样的，除了IE 5和IE 6之外)，那么，代码可以调用XMLHttpRequest的构造器。如果浏览器把XMLHttpRequest对象实现为一个ActiveXObject对象(就象在IE 5和IE 6中一样)，那么，代码可以使用ActiveXObject的构造器。下面的函数将调用一个init()函数，它负责检查并决定要使用的适当的创建方法-在创建和返回对象之前。

＜script type="text/javascript"＞
function sendRequest(){
　var xmlHttpReq=init();
　function init(){
　　if (window.XMLHttpRequest) {
　　　return new XMLHttpRequest();
　　} 
　else if (window.ActiveXObject) {
　　return new ActiveXObject("Microsoft.XMLHTTP");
　}
}
＜/script＞ 

　　接下来，你需要使用Open()方法初始化XMLHttpRequest对象-指定HTTP方法和要使用的服务器URL。

var catalogId=encodeURIComponent(document.getElementById("catalogId").value);
xmlHttpReq.open("GET"， "validateForm?catalogId=" + catalogId， true); 

　　默认情况下，使用XMLHttpRequest发送的HTTP请求是异步进行的，但是你可以显式地把async参数设置为true，如上面所展示的。
在这种情况下，对URL validateForm的调用将激活服务器端的一个servlet，但是你应该能够注意到服务器端技术不是根本性的；实际上，该URL可能是一个ASP，ASP.NET或PHP页面或一个Web服务-这无关紧要，只要该页面能够返回一个响应-指示CatalogID值是否是有效的-即可。因为你在作一个异步调用，所以你需要注册一个XMLHttpRequest对象将调用的回调事件处理器-当它的readyState值改变时调用。记住，readyState值的改变将会激发一个readystatechange事件。你可以使用onreadystatechange属性来注册该回调事件处理器。

xmlHttpReq.onreadystatechange=processRequest; 

　　然后，我们需要使用send()方法发送该请求。因为这个请求使用的是HTTP GET方法，所以，你可以在不指定参数或使用null参数的情况下调用send()方法。

xmlHttpReq.send(null); 

处理请求

　　在这个示例中，因为HTTP方法是GET，所以在服务器端的接收servlet将调用一个doGet()方法，该方法将检索在URL中指定的catalogId参数值，并且从一个数据库中检查它的有效性。

　　本文示例中的这个servlet需要构造一个发送到客户端的响应；而且，这个示例返回的是XML类型，因此，它把响应的HTTP内容类型设置为text/xml并且把Cache-Control头部设置为no-cache。设置Cache-Control头部可以阻止浏览器简单地从缓存中重载页面。

public void doGet(HttpServletRequest request， 
HttpServletResponse response)
throws ServletException， IOException {
　...
　...
　response.setContentType("text/xml");
　response.setHeader("Cache-Control"， "no-cache");
} 

　　来自于服务器端的响应是一个XML DOM对象，此对象将创建一个XML字符串-其中包含要在客户端进行处理的指令。另外，该XML字符串必须有一个根元素。

out = response.getOutputStream();
out.println("＜catalogId＞valid＜/catalogId＞"); 

　　【注意】XMLHttpRequest对象的设计目的是为了处理由普通文本或XML组成的响应；但是，一个响应也可能是另外一种类型，如果用户代理(UA)支持这种内容类型的话。

　　当请求状态改变时，XMLHttpRequest对象调用使用onreadystatechange注册的事件处理器。因此，在处理该响应之前，你的事件处理器应该首先检查readyState的值和HTTP状态。当请求完成加载（readyState值为4）并且响应已经完成（HTTP状态为"OK"）时，你就可以调用一个JavaScript函数来处理该响应内容。下列脚本负责在响应完成时检查相应的值并调用一个processResponse()方法。

function processRequest(){
　if(xmlHttpReq.readyState==4){
　　if(xmlHttpReq.status==200){
　　　processResponse();
　　}
　}
} 

　　该processResponse()方法使用XMLHttpRequest对象的responseXML和responseText属性来检索HTTP响应。如上面所解释的，仅当在响应的媒体类型是text/xml，application/xml或以+xml结尾时，这个responseXML才可用。这个responseText属性将以普通文本形式返回响应。对于一个XML响应，你将按如下方式检索内容：

var msg=xmlHttpReq.responseXML; 

　　借助于存储在msg变量中的XML，你可以使用DOM方法getElementsByTagName()来检索该元素的值：

var catalogId=msg.getElementsByTagName("catalogId")[0].firstChild.nodeValue; 

　　最后，通过更新Web页面的validationMessage div中的HTML内容并借助于innerHTML属性，你可以测试该元素值以创建一个要显示的消息：

if(catalogId=="valid"){
　var validationMessage = document.getElementById("validationMessage");
　validationMessage.innerHTML = "Catalog Id is Valid";
}
else
{
　var validationMessage = document.getElementById("validationMessage");
　validationMessage.innerHTML = "Catalog Id is not Valid";
} 

　　该getAllResponseHeaders()方法以一个字符串形式返回所有的响应头部（每一个头部占单独的一行）。如果readyState的值不是3或4，则该方法返回null。

再比如：

<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
  {// code for IE7, Firefox, Opera, etc.
  xmlHttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE6, IE5
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlHttp!=null)
  {
  xmlHttp.open("GET", "note.xml", false);
  xmlHttp.send(null);
  xmlDoc=xmlHttp.responseText;

  xmlHttp.open("POST", "demo_dom_http.asp", false);
  xmlHttp.send(xmlDoc);
  document.write(xmlHttp.responseText);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
</script>
</body>
</html>

当然jQuery.ajax( url [, settings ] )方法可以更简洁的实现上面功能

新增的一些有用对象

参考，有些没有拷贝过来！

FormData对象

利用FormData对象，我们可以通过JavaScript用一些键值对来模拟一系列表单控件，我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”。比起普通的ajax, 使用FormData的最大优点就是我们可以异步上传一个二进制文件。
语法：

 var formdata = new FormData ([可选]HTMLFormElement);

例子1：

<script type="text/javascript">
$(window).load(function() {
    $('#blobSubmit').on('click', function(){
        var img = cropper.getBlob();
        var formdata = new FormData();
        formdata.append("imagefile", img);//Blob格式
        formdata.append("token", "ce509193050ab9c2b0c518c9cb7d9556");
        $.ajax({
            url:"/file/blob/updateHeadPicture.action",
            data: formdata,
            type:"post",
            processData: false,
            contentType: false,
            success: function(oResult) {
                if(oResult.success==1){
                    window.location.href="/image";
                }else{
                    alert(oResult.message);
                }
            }
        })
    })
});
</script>

例子2：
取得form对象，作为参数传入到FormData对象
HTML:

<form name="form1" id="form1">  
<input type="text" name="name" value="fdipzone">  
<input type="text" name="gender" value="male">  
</form>  

JS:

var form = document.getElementById('form1');  
var formdata = new FormData(form);  

例子3：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<html>  
 <head>  
  <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  <title> FormData Demo </title>  
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>  
  
  <script type="text/javascript">  
  <!--  
    function fsubmit(){  
        var data = new FormData($('#form1')[0]);  
        $.ajax({  
            url: 'server.php',  
            type: 'POST',  
            data: data,  
            dataType: 'JSON',  
            cache: false,  
            processData: false,  
            contentType: false  
        }).done(function(ret){  
            if(ret['isSuccess']){  
                var result = '';  
                result += 'name=' + ret['name'] + '<br>';  
                result += 'gender=' + ret['gender'] + '<br>';  
                result += '<img src="' + ret['photo']  + '" width="100">';  
                $('#result').html(result);  
            }else{  
                alert('提交失敗');  
            }  
        });  
        return false;  
    }  
  -->  
  </script>  
  
 </head>  
  
 <body>  
    <form name="form1" id="form1">  
        <p>name:<input type="text" name="name" ></p>  
        <p>gender:<input type="radio" name="gender" value="1">male <input type="radio" name="gender" value="2">female</p>  
        <p>photo:<input type="file" name="photo" id="photo"></p>  
        <p><input type="button" name="b1" value="submit" onclick="fsubmit()"></p>  
    </form>  
    <div id="result"></div>  
 </body>  
</html>  

其中，服务器端返回Json字符串中包含属性isSuccess为true或者false，name等属性，直接转换成jsonString返回。

Blob数据对象

一个Blob对象就是一个包含有只读原始数据的类文件对象。Blob对象中的数据并不一定得是JavaScript中的原生形式。File接口基于Blob, 继承了Blob的功能，并且扩展支持了用户计算机上的本地文件。
创建Blob对象的方法有几种，可以调用Blob构造函数，还可以使用一个已有Blob对象上的slice()方法切出另一个Blob对象，还可以调用canvas对象上的toBlob方法。
实际上，Blob是计算机界通用术语之一，全称写作：BLOB (binary large object)，表示二进制大对象。MySql/Oracle数据库中，就有一种Blob类型，专门存放二进制数据。

在实际Web应用中，Blob更多是图片二进制形式的上传与下载，虽然其可以实现几乎任意文件的二进制传输。

var xhr = new XMLHttpRequest();    
xhr.open("get", "mm1.jpg", true);
xhr.responseType = "blob";
xhr.onload = function() {
    if (this.status == 200) {
        var blob = this.response;  // this.response也就是请求的返回就是Blob对象
        var img = document.createElement("img");
        img.onload = function(e) {
          window.URL.revokeObjectURL(img.src); // 清除释放
        };
        img.src = window.URL.createObjectURL(blob);
        eleAppend.appendChild(img);    
    }
}
xhr.send();

Blob对象有两个属性，参见下表：

属性名	类型	描述
size	unsigned long long(表示可以很大的数值)	Blob对象中所包含数据的大小。字节为单位。 只读。
type	DOMString	一个字符串，表明该Blob对象所包含数据的MIME类型。例如，上demo图片MIME类似就是”image/jpeg“. 如果类型未知，则该值为空字符串。 只读。

构造函数
Blob Blob(
[可选] Array parts,
[可选] BlobPropertyBag properties
);
parts
一个数组，包含了将要添加到Blob对象中的数据。数组元素可以是任意多个的ArrayBuffer, ArrayBufferView(typed array), Blob, 或者DOMString对象。
properties
一个对象，设置Blob对象的一些属性。目前仅支持一个type属性，表示Blob的类型。