Ajax学习笔记

1.什么是Ajax?

不用刷新页面，但可以和服务器端进行通信的方式。使用 Ajax 的主要方式是 XMLHttpRequest 对象。

2.使用 XMLHttpRequest 对象实现 Ajax .

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

	//3. 创建一个 XMLHttpRequest 对象
	var request = new XMLHttpRequest();
	//4. 准备发送请求的数据 ：url
	var url = this.href;
	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 对象 state 属性值为 200
			if (request.status == 200 || request.status == 304) {
				//10. 打印响应结果： responseText
				alert(request.responseText);
			}

		}

	}

	//2. 取消 a 节点的默认行为
	return false;

}

3. Ajax 传输数据的 3 种方式：

1). XML: 笨重，解析困难。 但XML 是通用的数据交换格式。 

2). HTML : 不需要解析可以直接放到文档中。若仅更新一部分区域可以使用，但传输的数据不是很方便，且HTML 代码需要拼装完成。

3).Json: 小巧，有面向对象的特征，且有很多第三方的 jar 包可以把 java 对象或集合转为 JSON 字符串。

4. 使用jQuery 完成 Ajax 操作

1). load 方法： 可以用于HTML 文档的元素节点，把结果直接加为节点的子元素。通常而言，load 方法加载后的数据是一个个HTML 片段。

var $obj = ...

var url = ...

var args = {key, value, ...};

$obj.load(url, args);

2). $.get, $.post, $.getJSON: 更加灵活。出去使用 load 方法的情况，大部分时候都使用这 3 个方法

I. 基本的使用

//url： Ajax 请求的目标 URL

//args： 传递的参数 ：JSON 类型

//data：Ajax 响应成功后的数据。 可能是 XML, HTML, JSON

$.get(url, args, function(data){

});

II.  请求 JSON 数据

$.get(url, args, function(data){

}, "JSON");

$.post(url, args, function(data){

});

$.getJSON(url, args, function(data){

});