AJAX总结

前言：之前学习.net的时候就听过一些AJAX的理论内容，这次通过对于AJAX的实践，对于AJAX有了更进一步的了解，上一篇博客和大家分享了和AJAX相关的内容，下面和大家分析一些AJAX的内容。
（一）AJAX

	1、名词解释
		（1）同步
			在一段时间内，只能做一个事情
			同步访问：在访问服务器时，客户端只能等待服务器的响应，不能做其它事情。用户体验非常的差
			代表场合：
				1、输入网址访问页面
				2、a标记的默认跳转
				3、submit按钮的表单提交 
	（2）异步
			在一段时间内，可以同时干多个事情
			异步访问：在向服务器发送请求时，不耽误用户在网页上做其它的操作
			代表场合：
				1、用户名的重复性验证
				2、聊天室
				3、股票走势图
				4、搜索建议(百度，京东，淘宝 的搜索框)
	（3）什么是AJAX
		Asynchronous Javascript And Xml
		异步的       JS         和  Xml

		本质：使用 JS 提供的 XMLHttpRequest 对象 异步的向服务器发送请求，并接受响应数据（格式是 xml(已过时)）
		AJAX中，服务器响应回来的是部分的数据而不是完整的页面，并且可以以无刷新的效果来更改页面中的局部内容


	2、获取 AJAX核心对象 - XMLHttpRequest
		标准创建:var xhr=new XMLHttpRequest();
		IE8以下 : 
			var xhr=new ActiveXObject("Microsoft.XMLHttp");
		
		允许通过 window.XMLHttpRequest 判断浏览器是否支持 XMLHttpRequest()。如果 window.XMLHttpRequest的值是null的话，说明需要通过 ActiveXObject()创建，否则 需要通过 XMLHttpRequest() 来创建

		var xhr; 
		//判断浏览器是否支持 XMLHttpRequest
		if(window.XMLHttpRequest){
			xhr = new XMLHttpRequest();
		}else{
			//浏览器不支持 XMLHttpRequest
			xhr = new ActiveXObject("Microsoft.XMLHttp");
		}
		
	3、XHR 的常用属性 和 方法(难点)
		（1）open() - 方法
			作用：创建请求
			语法：open(method,url,isAsyn)
				1、method
					string 类型
					请求方式 ：get,post,... ...
				2、url
					string 类型
					请求地址
				3、isAsyn
					boolean 类型
					指定采用同步(false)还是异步(true)的方式发送请求
	（2）readyState - 属性
			作用：表示 xhr 对象的 请求状态
			值：由 0 - 4 表示 5个状态
				0 : 请求尚未初始化
				1 : 已经打开到WEB服务器的连接，正在向服务器发送请求
				2 : 请求完成
				3 : 正在接收服务器端的响应
				4 : 接收响应数据成功
				注意：当 readyState的值为4的时候，表示所有的响应都已经接收完毕。
	（4）status - 属性
			作用：服务器的响应状态码
			值：
				只记住一个即可 200
				当 status 的值是 200的时候，表示服务器已经正确的给出所有的响应
	（5）onreadystatechange - 事件
			作用：当 xhr 的readyState 属性值发生改变的时候，要自动激发的操作。
			语法：
				xhr.onreadystatechange = function(){
					//每当xhr.readyState的值，发生变化时，要执行的操作。

					//判断 xhr.readyState 为4的时候 并且 xhr.status 为 200的时候，才能获取正常的响应数据
					if(xhr.readyState == 4 && xhr.status == 200){
						//可以接收响应回来的数据 
						//responseText 属性，表示服务器响应回来的文本
						var resText=xhr.responseText;
					}

				}
	（6）send() - 方法
			作用：发送\提交请求
			语法：send(body);
				body : 是请求主体
				没有请求主体的提交方式，body位置处，要写 null
				有请求主体的提交方式，body位置处，编写的就是请求主体的数据
				
4、发送异步请求的步骤
		1、创建 / 获取 XHR 对象
		2、创建请求 ：xhr.open()
		3、设置 xhr 的 onreadystatechange 事件
			判断readyState 以及 status 的值，并接收响应
			xhr.onreadystatechange=function(){
				if(xhr.readyState==4&&xhr.status==200){
					xhr.responseText;
				}
			}
		4、发送请求:xhr.send();
		
5、使用GET提交方式，发送请求数据
		在请求地址后，拼接请求参数(查询字符串)
		...
		xhr.open("get","xx.php?name=value&name1=value1",true);
		...

		ex:
		xhr.open("get","check.php?uname=zs&upwd=123",true);
		在 check.php 中，如何获取 uname 和 upwd 值?
		$uname=$_REQUEST["uname"];
		$upwd=$_REQUEST["upwd"];

(二)JSON

1、使用 POST 方式发送请求
	(1)提交的请求数据
		提交的请求数据需要按照指定的格式拼好，放在 send() 中传递
		xhr.send("name1=value1 & name2=value2");
	(2)设置一个请求消息头
		POST 提交方式，必须将 Content-Type 的请求消息头更改为 application/x-www-form-urlencoded

		在发送请求之前：
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
2、JSON
	(1)什么是JSON
		JavaScript Object Notation
		JS 对象表示法,即以JS对象的方式来表现出来的字符串
	(2)JS对象
		var fbb = [];

		fbb["yuwen"] = 121;
		fbb["shuxue"] = 73;
		fbb["yingyu"] = 116;

		var fbb = {
			yuwen:121,
			shuxue:73,
			yingyu:116
		}

		console.log(fbb.yunwen);
			
		(3)、JSON语法：
			
				1、用一对 {} 来表示一个对象
				2、对象的属性名称，必须用 "" 引起来，值如果也是字符串，也必须用 "" 引起来
				3、属性 与 值，用 : 连接
				4、多对属性 与 值之间，用 , 分开
			ex:
				var ym = '{"height":175,"weight":50}';
		(4)JSON数组
			1、普通数组表现 ：'["杨幂","范冰冰","凤姐"]'
			2、对象的数组 :
				'[
					{
						"height":170,
						"weight":55,
						"gender":"女"
					},
					{
						"height":180,
						"weight":60,
						"gender":"女"
					}
				]'
	(5)JSON文件
			创建一个文件，以 ***.json 作为后缀
			该文件中的数据必须是符合JSON格式的字符串
	(6)将JSON字符串 转成 JS对象/数组
			var p = '{"name":"sf.z","age":25}';
			1、使用 eval()
				var obj = eval("("+p+")");
			2、使用JSON.parse() 来解析JSON字符串得到JS对象
				var obj = JSON.parse(p);
		
	(7)在Php中，可以直接将数组(一维，二维，关联) 转换成JSON格式的字符串	
			php中通过 : json_encode() 将数组转换为JSON字符串
			语法：$str = json_encode($array);
		
			注意：如果服务器端响应回来的数据时JSON格式的，需要增加响应消息头
				header("Content-Type:application/json");

总结：AJAX对于用户真的是非常友好，同时学习AJAX又不仅仅是学习AJAX，还是对JSON，
HTML等内容的复习和综合应用，通过不断地学习，让学到的内容更加丰富。