5.jQueryAjax

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 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

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状态的变化如下：