前端工程师的一生之敌ajax

Ajax的技术与原理

Ajax的简介

• AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
• AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
• AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
  原理
• 通过 XMLHttpRequest 与服务器交换数据
• 服务数据通过json 或者 xml格式返回
• 浏览器端通过js+ccs渲染展示数据
  原生ajax
  get请求：

btn.onclick = function(){ //按钮单击事件
			// 01 创建xhr
			var xhr = new XMLHttpRequest();
			// 02 open打开连接
	xhr.open("GET",'./be.txt',false);		
		
			// 03 监听readystate  readyState 4准备状态完毕
			//  status 状态码200 响应成功
			xhr.onreadystatechange=function(){
				if(xhr.status==200&&xhr.readyState==4){
					content.innerHTML= xhr.responseText;
					 
					// responseText 返回的文本
				}
			}
			// 04 send 发送
			xhr.send();
			// 05 实现渲染	
			}

post请求：

// 01 创建xhr对象
				var xhr = new XMLHttpRequest();
				// 02 获取数据
				var name = document.getElementById("name").value;
				var age =  document.getElementById("age").value;
				// 03 建立连接
				xhr.open("POST","http://localhost/echo.php",false);
				// 04 监听
				xhr.onreadystatechange = function(){
					if(xhr.status==200&&xhr.readyState==4){
						content.innerHTML = xhr.responseText;
					}
				}
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				//设置编码形式
				xhr.send(`name=${name}&age=${age}`);
				//发送
			}

jquery中ajax
第一层：$.ajax()
第二层： $.get() $.post()
回调函数
$.get(url,function(data,status,xhr){})
.done()
.fail()
.always()
.then()
.catch()
$.post(url,data,function(data,status,xhr))
第三层
$.getJSON()
$.getScript()
load()
GET和POST 的区别，何时使用POST ？
GET：一般用于信息获取，使用 URL 传递参数，对所发送信息的数量也有限制，一般在2000 个字符，有的浏览器是 8000 个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制
在以下情况中，请使用 POST 请求：

ajax的优点

<1>.无刷新更新数据。
AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
<2>.异步与服务器通信。
AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。
<3>.前端和后端负载平衡。
AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
<4>.基于标准被广泛支持。
AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。
<5>.界面与应用分离。
Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

AJAX的缺点

<1>.AJAX干掉了Back和History功能，即对浏览器机制的破坏。
在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现
<2>.AJAX的安全问题。
AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。
<3>.对搜索引擎支持较弱。
对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能.
<4>.破坏程序的异常处理机制。
至少从目前看来，像Ajax.dll，Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制的。关于这个问题，曾在开发过程中遇到过，但是查了一下网上几乎没有相关的介绍。后来做了一次试验，分别采用Ajax和传统的form提交的模式来删除一条数据……给我们的调试带来了很大的困难。
<5>.违背URL和资源定位的初衷。
例如，我给你一个URL地址，如果采用了Ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
<6>.AJAX不能很好支持移动设备。
一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax，比如说我们在手机的浏览器上打开采用Ajax技术的网站时，它目前是不支持的。
<7>.客户端过肥，太多客户端代码造成开发上的成本。
编写复杂、容易出错 ；冗余代码比较多（层层包含js文件是AJAX的通病，再加上以往的很多服务端代码现在放到了客户端）；破坏了Web的原有标准。
Ajax适用场景

• <1>.表单驱动的交互
• <2>.深层次的树的导航
• <3>.快速的用户与用户间的交流响应
• <4>.类似投票、yes/no等无关痛痒的场景
• <5>.对数据进行过滤和操纵相关数据的场景
• <6>.普通的文本输入提示和自动完成的场景
  Ajax不适用场景
• <1>.部分简单的表单
• <2>.搜索
• <3>.基本的导航
• <4>.替换大量的文本
• <5>.对呈现的操纵
  浏览器同源策略
• 当浏览器去访问服务器资源（ajax） 要求服务器的地址与浏览器同源
• 协议，域名，子域名，端口号要一致

跨域

**绕过浏览器的同源策略，请求到数据**
**跨域方式**

• 1.服务器响应头信息跨域:Access-Control-Allow-Origin: *
• 2.jsonp跨域
• 3.服务器代理（开发）
  异步和同步的区别： 同步阻塞代码执行