通俗易懂之Ajax

什么是Ajax（异步数据交互）

  在网页加载的时候，加载的都是静态的资源,你写的每一句话，每一个结构都是固定的，比如在哪个区域显示哪张图片，页面渲染之后都无法在改变，想要改变就只有改代码，然后在刷新页面。而Ajax可以让我们在代码执行的时候，去请求其他地方的资源或者接口，然后把请求来的数据图片，根据我们写好的方法渲染到页面上，多次进行Ajax请求，我们就可以实现动态的页面，从而可以根据用户的操作，来进行更方便的交互。

Ajax优缺点

Ajax优点

1. 不需要刷新页面就可以更新数据。
   使用了Ajax的页面可以做到页面的局部刷新,而不需要进行整个页面的重新加载,提高了用户体验。
2. 异步与服务器通信
   Ajax使用异步的方式和服务器通信,不需要打断用户的操作，具有更加迅速的响应能力,优化了Browser和Server的沟通,减少不必要的数据传输、时间及降低网络上的数据流量。
3. 前端和后端负载平衡。
   Ajax可以把一些服务器的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。
4. 使用范围广
   Ajax基于标准化的并被广泛支持的技术,不需要下载浏览器插件或者小程序,只要能运行js就可以执行。同时随着技术的发展,越来越多简化Ajax的使用方法的程序库也相继问世

Ajax缺点

1.Ajax由于机制的原因,导致浏览器页面在动态更新的前提下,没办法通过后退按钮来回到上一个页面状态,因为一个已经加载好的静态页面和一个动态更新的页面的差别是很微妙的,浏览器没办法把每一次用户在页面上的操作都写入历史记录，所以用户无法通过后退来撤回自己的上一步操作,这个问题虽然可以解决，但是只能治标不能治本，因为这属于Ajax的机制问题。
2.安全问题，在页面上使用Ajax技术相当于在页面和企业的数据库之间建立了一个通道，这个通道可能会被黑客攻击，从而盗取数据库上的某些信息。
3.Ajax不能很好地支持移动设备(手机、平板电脑之类的)。
4.编写复杂，冗余过多，这背离了web的初衷。

Ajax的使用场景

1.对某些数据进行分类过滤和操作。
2.深层次的树状导航（树形图）。
3.投票选项之类的对整体页面无关痛痒的部分。
4.普通的文本提示等。

Ajax原生写法

虽然现在网络上已经有各种各样方便使用的ajax工具，但是它的原生写法还是需要掌握的，这方便我们去了解它。

1.创建对象
	var xhr=new XMLHttpRequest()    
2.连接后台
	xhr.open(type,url,true)    /*open方法有三个参数
										type	请求方式(GET/POST)
										url		请求地址(接口地址)
										true/false   true代表异步请求
													 false代表同步请求 使用false的话浏览器会警报；
										不建议在主线程上使用同步XMLHttpRequest,因为会破坏用户体验*/
3.发送
	xhr.send();
4.事件	
	xhr.onreadystatechange=function(){      //onreadystatechange	监听状态（一共可以监听4个状态，如果要监听状态1，那么得把事件放在open之前）
		if(xhr.readyState==4&&xhr.status==200){			//当readyState状态是4并且status网络状态码等于200时说明请求成功
			console.log(xhr.responseText)						//xhr.responseText是请求回来的结果 是字符串格式
														//responseText:获得字符串形式的数据
														  responsXML:获得XML形式的数据
														  status和statusText:以数字和文本形式返回HTTP状态码
														  				xhr.status 是网络状态码
																				http的状态码有很多
																				1xx 表示消息
																				2xx 请求成功
																				3xx 重定向 301 永久定向 302 临时重定向
																				4xx 客户端错误
																				5xx 服务器错误
																				6xx -扩展

																				着重关注 200 3xx 404 5xx
														  getAllResponseHeader():获取所有的响应报头
														  getResponseHeader():查询响应中的某个字段的值
														  readyState:响应返回成功的时候得到通知	
														  				0:请求未初始化,open还没调用
																		1:服务器连接已建立,open已调用
																		2:请求已接受,接收到头信息
																		3:请求处理中,接收到响应主体
																		4:请求完成,响应完成
		}
	}