5.jQuery&Ajax
1.jQuery
什么是 jQuery ？
jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。包含以下功能：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
引用：
<head> <script src="jquery-1.10.2.min.js"></script> </head>
jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p .test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
文档就绪事件
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：
$(document).ready(function(){ // 开始写 jQuery 代码... }); 或是 $(function(){ // 开始写 jQuery 代码... });
jQuery 基本选择器
//元素选择器 $(document).ready(function(){ $("button").click(function(){ $("p").hide(); //选择P标签 }); }); //#ID选择器 $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); //.class 选择器 $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); }); //
jQeury基本操作
//addClass()方法给元素加class $(".text-primary").addClass("animated shake"); //删除HTML元素的class $("#target2").removeClass("btn-default"); //改变HTML元素的CSS样式 $("#target1").css("color", "blue"); //注意此处属性和值都是“” //设置元素不可用 $("button").prop("disabled", true); //改变元素中的文本 $("h3").html("<em>jQuery Playground</em>"); //删除一个HTML元素 $("#target4").remove(); //使用appendTo()移动HTML元素 $("#target4").appendTo("#left-well"); //使用clone()方法复制元素 $("#target2").clone().appendTo("#right-well"); //使用parent()操作父级元素 $("#left-well").parent().css("background-color", "blue") //使用parent()操作子级元素 $("#left-well").children().css("color", "blue") //使用target:nth-child(n) CSS选择器获取子元素 $(".target:nth-child(3)").addClass("animated bounce"); //使用选择器操作偶数索引元素，因为索引0对应的是第一个元素，所以奇数索引，偶数元素， $(".target:odd").addClass("animated shake");偶数 $(".target:even").addClass("animated shake");奇数
2.Ajax
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","/statics/demosource/ajax_info.txt",true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div> <button type="button" onclick="loadXMLDoc()">修改内容</button> </body> </html>
AJAX - 创建 XMLHttpRequest 对象
XMLHttpRequest 是 AJAX 的基础。XmlHttpRequest 术语缩写为XHR，中文可以解释为可扩展超文本传输请求。
XMLHttpRequest 对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。
构建代码：
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
XHR 请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
open(method,url,async)：
-
method：请求的类型；GET 或 POST
-
url：文件在服务器上的位置
-
async：true（异步）或 false（同步）
send(string)：将请求发送到服务器。
-
string：仅用于 POST 请求
GET请求 ：
xmlhttp.open("GET","demo_get2.html?fname=Henry&name=Ford",true);
xmlhttp.send();
POST请求：
xmlhttp.open("POST","ajax_test.html",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford");
XHR 响应
获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
- responseText：获得字符串形式的响应数据。
- responseXML：获得 XML 形式的响应数据。
<!--responseText --> document.getElementById("myDiv").innerHTML=xmlhttp.responseText; <!--responseXML --> xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br>"; } document.getElementById("myDiv").innerHTML=txt;
当发送一个请求后，客户端需要确定这个请求什么时候会完成，因此，XMLHttpRequest对象提供了 onreadystatechange 事件机制来捕获请求的状态，继而实现响应。
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
XHR.readyState状态的变化如下：
- 0：请求未初始化，还没有调用 open()。
- 1：请求已经建立，但是还没有发送，还没有调用 send()。
- 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
- 3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。
- 4：响应已完成；您可以获取并使用服务器的响应了。
