JS的简单用法

2023-08-26 12:58:34

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;width: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',

    width:'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 + "\nStatus: " + 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 + "\nStatus: " + 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 )

例子：

$.ajax({

   beforeSend: function(){

     // Handle the beforeSend event

   },

   complete: function(){

     // Handle the complete event

   }

   // ......

 });

$.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 ) );

    }

  });

// 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" );

});

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();

JS的简单用法

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的类型。

码农公寓

JS的简单用法

1. 基础知识

1.1 实现

1.2 变量

1.3 对象

1.4 函数

1.5 JavaScript 运算符

1.6 逻辑语句

1.7 表单或邮箱验证

2. JS HTML DOM

查找 HTML 元素

改变 HTML 元素的内容

DOM 事件

DOM 元素（节点）

3. JavaScript 对象

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

Window 尺寸

Window Screen

Window Location

Window History

JavaScript 消息框

JavaScript 计时

JavaScript Cookies

5. JavaScript 库

jQuery 基础语法

jQuery 选择器

jQuery 事件

jQuery 效果 - 隐藏和显示

效果 - 淡入淡出

效果 - 滑动

效果 - 动画

停止动画

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

jQuery操作 HTML 元素和属性

jQuery 遍历

noConflict() 方法

jQuery - AJAX 简介

6. jQuery - Ajax详解

最核心函数 jQuery.ajax()

jQuery.ajax( [settings ] )

7. XMLHttpRequest对象

创建 XMLHttpRequest 对象

XMLHttpRequest对象的属性和事件

新增的一些有用对象

FormData对象

Blob数据对象

相关文章