Ajax学习第一天

什么是Ajax

Ajax被认为是（Asynchronous JavaScript and XML的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都叫做Ajax。

不用刷新整个页面就能与服务器通讯的方法：

Flash
java applet
框架：如果使用了一组框架构造了一个网页，可以只更新其中的一个框架，而不必惊动整个页面
隐藏的iframe
**XMLHttpRequest:**该对象是对JavaScript的一个扩展，可使网页与服务器进行通信。是创建Ajax应用的最佳选择。
实际上通常把Ajax当成是XMLHTTPRequest对象的代名词。

XMLHttpRequest的方法

abort()停止当前请求
getAllResponseHeaders()把HTTP请求的所有响应首部作为键值对返回。
getResponseHeader(“header”)返回指定首部的串值。
open(“method”,“url”)建立对服务器的调用。Method参数可以是GET,POST或PUT.url参数可以是相对URL或绝对URL。
send(content)向服务器发送请求
setRequestHeader(“header”,“value”)

XMLHttpRequest的属性

onreadystatechange:每个状态的改变都会触发这个事件触发器,通常会调用一个javaScript函数
readyState:请求的状态，有5个可取值:0=未初始化、1=正在加载、2=已经加载、3=交互中、4=完成。
responseText:服务器的响应，表示为一个串
responseXML：服务器的响应，表示为XML。这个对象可以解析为dom对象。
status：服务器的HTTP状态码
statusText：HTTP状态码对应文本

//1.获取a节点，为其添加onclick响应函数
document.getElementsByTagName("a")[0].onclick = function(){

//3.创建一个XMLHttpRequest对象
var request = new XMLHttpRequest();
//4.准备发送请求的数据:url
var url = this.href + "?time=" + new Date();//加上时间戳
var method = "GET";
//5.调用XMLHttpRequest对象的open方法
request.open(method,url);
//6.调用XMLHttpRequest对象的send方法
request.send(null);
//7.为XMLHttpRequest对象添加onreadystatechange响应函数
request.onreadystatechange = function(){
	//8.判断响应是否完成：XMLHttpRequest对象的readyState属性值为4
	if(request.readyState == 4){
		//9.再判断响应是否可用：XMLHttpRequest对象的status属性值为200
		if(request.status == 200||request.status == 304){
			//10.打印响应结果：responseText
			alert(request.responseText);
		}
	}
}
//2.取消a结点的默认行为
return false;
}

发送请求

利用XMLHttpRequest实例与服务器进行通信包含以下三个关键部分：

onreadystatechange 事件处理函数：

(该事件处理函数由服务器触发，而不是用户
在Ajax执行的过程中，服务器会通知客户端当前的通信状态。这依靠更新XMLHttpRequest 对象的readyState来实现。改变readystate属性是服务器对客户端连接操作的一种方式。每次 readyState属性的改变都会触发readystatechange事件。
）

open方法：

（XMLHttpRequest对象的open方法允许程序员用一个Ajax调用服务器发送请求。
method:请求类型，类似"GET"或"POST"的字符串。若只想从服务器检索一个文件，而不需要发送任何数据，使用GET（可以在GET请求里通过附加在URL上的查询字符来发送数据，不过数据大小限制为2000个字符）。若需要向服务器发送数据，用post。
在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存到同一个URL。如果对每个请求的响应不同，就会带来不好的消息。在此将时间戳追加到URL的最后，就能确保URL的唯一性，从而避免浏览器缓存的结果。
url:路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。
asynch：表示请求是否要异步传输，默认值为true。指定true，在读取后面的脚本之前，不需要等待服务器的响应。指定false，当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续执行。

）

send（data）方法：

open方法定义了Ajax请求的一些细节。send方法可为已经待命的请求发送指令。
data:将要传递给服务器的字符串。
若选用的是GET请求，则不会发送任何数据，给send方法传递null即可：request.send(null);
当向send()方法提供参数时，要确保open()中指定的方法是POST，如果没有数据作为请求体的一部分发送，则使用null。
完整的Ajax的GET请求示例：
var request = getHTTPObject();
if(request){
request.onreadystatechange = doSomeThing;
request.open(“GET”,“file.txt”,true);
request.send(null);
}

接收请求

用XMLHttpRequest的方法可向服务器发送请求。在Ajax处理过程中，XMLHttpRequest的如下属性可被服务器更改：

readyState:

表示Ajax请求的当前状态。它的值用数字代表。
0代表未初始化。还没有调用open方法
1代表正在加载。open方法已被调用，但send方法还没有被调用。
2代表已加载完毕。send已被调用。请求已经开始。
3代表交互中。服务器正在发送响应。
4代表完成。响应发送完毕。
每次readyState值的改变，都会触发readystatechange事件。如果把onreadystatechange事件处理函数赋给一个函数，那么每次readyState值的变化都会引起该函数的执行。
readystate值的变化都会因为浏览器的不同而有差异，但是，当请求结束的时候，每个浏览器都会吧readyState的值统一设为4。

status

服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息，而且属于超文本传输协议中的一部分。
常用状态码及其含义：
404没找到页面
403禁止访问
500内部服务器出错
200一切正常
304没有被修改
在XMLHttpRequest对象中，服务器发送的状态码都保存在status属性中。通过把这个值和200或304比较，可以确保服务器是否发送了一个成功的响应。

responseText

XMLHttpRequest的responseText属性包含了从服务器发送的数据。它是一个HTML，XML或普通文本，这取决于服务器发送的内容。
当readyState属性值变为4时，responseText属性才可用，表明Ajax请求已经结束。
function doSomeThing（）{
if(request.readyState == 4){
if(request.status == 200||request.status == 304){
alert(request.responseText);
}
}
}

responseXML

如果服务器返回的是XML，那么数据将储存在responseXML属性中。
只有服务器发送了带有正确首部信息的数据时，responseXML属性才是可用的。MIME类型必须为text/xml

数据格式提要

在服务器端Ajax是一门与语言无关的技术，在业务逻辑层使用何种服务器端语言都可以。
从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下3种格式返回数据：
XML
JSON
HTML

解析HTML

HTML由一些普通的文本组成。如果服务器通过XMLHttpRequest发送HTML，文本将存储在responseText属性中。
不必从responseText属性中读取数据。它已经是希望的格式，可以直接将它插入到页面中。
插入html代码最简单的方法就是更新这个元素的innerHTML属性。

<script type = "text/javascript">
	window.onload = function(){
		var aNodes = document.getElementsByTagName("a");
		for(var i = 0;i<aNodes.length;i++){
			aNodes[i].onclick = function(){
				var request = new XMLHTTPRequest();
				var method = "GET";
				var url = this.href;
				
				request.open(method,url);
				request.send(null);

				request.onreadystatechange = function(){
					if(request.readyState == 4){
						if(request.status == 200|| request.status == 304){
								document.getElementById("details").innerHTML = request.responseText ;
						}
					}
				}
			}
		}
	}
</script>

优点：从服务器端发送的HTML代码在浏览器端不需要用javaScript进行解析。
HTML的可读性好。HTML代码块与innerHTML属性搭配，效率高。
缺点：若需要通过Ajax更新一篇文档的多个部分，HTML不合适（对文档里东西进行拆分就不黄爽）。
innerHTNM并非DOM标准。

解析XML

<script type = "text/javascript">
	window.onload = function(){
		var aNodes = document.getElementsByTagName("a");
		for(var i = 0;i<aNodes.length;i++){
			aNodes[i].onclick = function(){
				var request = new XMLHTTPRequest();
				var method = "GET";
				var url = this.href;
				
				request.open(method,url);
				request.send(null);

				request.onreadystatechange = function(){
					if(request.readyState == 4){
						if(request.status == 200|| request.status == 304){
								//1.结果为XML格式，所以需要使用requestXML来获取
								var result = request.responseXML;
								//2.结果不能直接使用，必须先创建对应的节点，再把节点加入到#details中
								var name = result.getElementByTagName("name")[0].firstChild.nodeValue;
								
								var aNode = document.createElement("a");
								aNode.appendChild(document.createTextNode(name));
								aNode.href = "mailto" + email;

								
						}
					}
				}
			}
		}
	}
</script>

JSON

json（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“：”(冒号)；“‘ 名称/值’对 ”之间使用“，”（逗号）分割。

<script type="text/javascript">
	var jsonObject = {
		"name":"atguigu",
		"age":12,
		"address":{"city":"Beijing","school":"尚硅谷"},
		"teaching":function(){
			alert("JavaEE,Android...");
		}
	};
	alert(jsonObject.name);
	alert(jsonObject.address.city);
	jsonObject.teaching();

	//使用eval()方法
	var testStr = "alert('hello eval')";
	//alert(testStr);
	//eval可以把一个字符串转为本地的JS代码来执行
	eval(testStr);

	//把JSON字符串转为JSON对象
	var testObject = eval("("+jsonStr+")");
	alert(testObject.name);
	
</script>

JSON用冒号来赋值。每一条赋值语句用逗号分开。整个对象用大括号封装起来。可用大括号分级嵌套数据。
对象描述中存储的数据可以是字符串，数字或者布尔值。对象描述也可存储函数，那就是对象的方法。

解析代码

<script type = "text/javascript">
	window.onload = function(){
		var aNodes = document.getElementsByTagName("a");
		for(var i = 0;i<aNodes.length;i++){
			aNodes[i].onclick = function(){
				var request = new XMLHTTPRequest();
				var method = "GET";
				var url = this.href;
				
				request.open(method,url);
				request.send(null);

				request.onreadystatechange = function(){
					if(request.readyState == 4){
						if(request.status == 200|| request.status == 304){
								//1.结果为XML格式，所以需要使用requestXML来获取
								var result = request.responseText;
								var object = eval("("+result+")");
								
								//2.结果不能直接使用，必须先创建对应的节点，再把节点加入到			   #details中
								var name = result.object.person.name;
								//var website ..........
								
								var aNode = document.createElement("a");
								aNode.appendChild(document.createTextNode(name));
								aNode.href = "mailto" + email;

								
						}
					}
				}
			}
		}
	}
</script>

JSON小结
优点：
作为一种数据传输格式，JSON与XML很相似，但是它更加灵巧。
JSON不需要从服务端发送含有特定内容类型的首部信息。
缺点：
代码过于严谨
代码不易读
eval函数存在风险（把恶意代码用字符串形式写出）

对比小结

若应用程序不需要与其他应用程序共享数据的时候，使用HTML片段来返回数据时最简单。
如果数据需要重用，JSON文件是个不错的选择，其在性能和文件大小方面有优势。
当远程应用程序未知时，XML文档是首选，因为XML是web服务领域的“世界语”。

JQuery中的Ajax

jQuery对Ajax操作进行了封装，在jQuery中最底层的方法时$.ajax(),第二层是load(),$.get()和$.post(),第三层是$.getScript()和$.getJSON()，

load()方法

load()方法时jQuery中最为简单和常用的Ajax方法，能载入远程*的HTML代码*并插入DOM中，它的结构是：load(url[,data],[,callback]])
参数 类型 说明
url String 请求HTML页面的URL地址
data(可选) Object 发送到服务器的key/value数据
callback(可选) Function 请求完成时的回调函数，无论请求成功或失败

程序员只需要使用jQuery选择器为HTML片段指定目标位置，然后将要加载的文件的url做为参数传递给load()方法即可。

细节：
如果只需要加载目标的HTML页面内的某些元素，则可以通过load()方法的URL参数来达到目的。通过URL参数指定选择符，就可以方便的从加载过来的HTML文档中选出所需要的内容。load（）方法的URL参数的语法结构为：“url selector”(注意：url和选择器之间有一个空格)
传递方式：load()方法的传递参数根据参数data来自动自定。如果没有参数传递，采用GET方式传递，否则采用POST方式。
对于必须在加载完成才能继续的操作，load()方法提供了回调函数，该函数有三个参数：代表请求返回内容的data；代表请求状态的textStatus对象和XMLHttpRequest对象。