初识ajax

一、浏览器在接收到服务端的数据后两种表现形式

1. 浏览器全局刷新：

服务端返回的数据，将浏览器内存中原有的数据，进行更新。
此时浏览器展示给用户的只能响应的结果无法同时展示请求发送之前页面内容。

2. 浏览器局部刷新

服务端返回的数据，只会对浏览器部分[标签]的内容进行更新，
此时浏览器既可以展示得到相应数据的同时也可以展示发送请求之前绝大部分内容。

二、浏览器接收到服务端数据后，两种表现实现的原因

1. 全局刷新：

如果发送请求时，是由浏览器直接向服务端发送请求，此时服务端
将响应结果也直接推送到浏览器的内存中，导致浏览器内存中原有
的数据，将会被统统覆盖掉。

2. 局部刷新

在发送请求时，并不是由浏览器直接向服务端发送请求，
由浏览器委托一个异步请求对象向服务端发送请求，
此时服务端将响应结果推送给异步请求对象，浏览器
内存中的内容并没有被覆盖掉，最后异步请求对象将
得到的数据更新到浏览器中指定的标签上。

三、[异步请求对象]

1. 该对象存在于所有浏览器中。
2. 是一个由JavaScript技术生成的脚本对象.

四、ajax

1. 是JavaScript的商业封装工具包
2. 管理浏览中[异步请求对象]

五、ajax技术开发步骤【重点】

1. 在浏览器内存中，创建一个异步请求对象。
2. 为异步请求对象设置一个工作状态监听器，来帮助
   浏览器在合适的时机中从异步请求对象读取服务端返回
   的响应数据。
3. 初始化异步请求对象，（请求方式(post/get)，请求地址，同步或异步标识）。
4. 命令异步请求对象去发送请求。
5. 通过[工作状态监听器]，在何时时机得到[工作状态监听器]返回的数据，
   对浏览器指定的标签内容进行更新，从而实现[局部刷新效果]

六、ajax原生js代码实现：

// 1. 创建一个异步请求对象
var xmlHttp = new XMLHttpRequest();
// 2. 设置异步请求对象工作状态监听
xmlHttp.onreadystatechange = function(){
	if(xmlHttp.readyState == 4){
		// 从异步请求对象身上得到服务器返回的响应数据
		var 响应数据 = xmlHttp.rresposeText;
		// 局部刷新效果
		dom对象.value = 响应数据; // 局部刷新
	}
};
// 3. 初始化异步请求对象
xmlHttp.open("get","/myPro/one",true);
// 4. 通知异步请求对象发送请求
xmlHttp.send();

七、异步请求对象的工作状态：5种（面试）

异步请求对象的工作状态保存在readyState属性

值	状态
0	**异步请求对象**已经创建完毕
1	**异步请求对象**已经被初始化完毕
2	**异步请求对象**已经请求发送出去，此时服务端应该正在处理这个请求
3	**异步请求对象**已经接收到了服务端返回的响应数据，**异步请求对象**正在翻译接收的数据
4	**异步请求对象**已经将得到的数据翻译为JavaScript脚本数据，这个数据是可以直接拿来使用

八、异步请求和同步请求的区别

xmlHttp.open("get", "myPro/one", 异步请求/同步请求);

1. 异步请求：
   在异步请求对象工作期间，浏览器出于工作状态，此时浏览器不
   需要再等待异步请求对象返回数据。
   xmlHttp.open(“get”, “myPro/one”, true);
2. 同步请求
   在异步请求对象工作期间，浏览器出于等待状态，此时浏览器
   会等待异步请求对象返回数据后，才会做其他的事情。
   xmlHttp.open(“get”, “myPro/one”, false);

九、局部刷新的好处：

1. 增加服务的质量
2. 由于不需要服务端将整个网页推送到用户的浏览器上，极大的
   减少服务端工作压力

十、JQuery提供ajax的封装函数

1. 标准版 $.ajax()
2. 简化版 $.get() $.post()

十一、$.ajax()的使用

1. 需要得到JSON格式参数对象
2. JSON格式参数对象

$.ajax({
			type:指定请求方式post或get，可以不写默认是get,
			
			url:指定本次请求地址，**必填属性**
			
			data:填写请求参数，可以不写。（可以使字符串形式或者json格式）
			
			datatype:设置服务端返回的数据类型，值可以为"text"或"json"。可以不写，默认是String。
			
			success:指定一个函数，负责将异步请求对象得到的数据进行读取，将数据更新到指定标签中。**必填属性**
			
			error:指定一个函数，在本次响应失败时被调用
});

十二、$.get()参数

	$.get(
		"url",
		"请求参数" /{参数名:值},
		局部刷新函数对象,
		"datatype"
	);

	$.post(
		"url",
		"请求参数" /{参数名:值},
		局部刷新函数对象,
		"datatype"
	);

十三、如何让异步请求对象接收服务器端返回的JSON对象