JS 之 Ajax

Posted 2021-04-15 诚然如梨所说

一、Ajax 技术与原理

1.1 Ajax 

AJAX = Asynchronous javascript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面的情况下。

1.2 Ajax 包含的技术 

1.使用CSS和Xhtml来表示。

2. 使用DOM模型来交互和动态显示。

3.使用XMLHttpRequest来和服务器进行异步通信。

• 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。

• IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象

4.使用javascript来绑定和调用。

 1.3 Ajax 的工作原理

一、AJAX 引擎：

在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

二、XmlHttpRequest：

通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。

1.4 XmlHttpRequest 对象的属性

 1.onreadystatechange  每次状态改变所触发事件的事件处理程序。

1. xmlHttp.onreadystatechange=function()  

2. {  

3.      // 回调方法

4. }  

  

2.responseText    从服务器进程返回数据的字符串形式。

3.responseXML    从服务器进程返回的DOM兼容的文档数据对象。

4.status              从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）

5.status Text       伴随状态码的字符串信息

6.readyState       对象状态值

1. xmlHttp.onreadystatechange=function()  

2. {  

3. if(xmlHttp.readyState==4)  

4. {  

5. // 从服务器的response获得数据  

6. }  

7. }  

readyState

0（未初始化）	未 open（）
1（初始化）	未 send（）
2（发送数据）
3（数据传送中）	接受部分数据
4（完成）

1.5 XmlHttpRequest 对象的方法

1. open（）方法

• mlHttp.open("GET”,"URL",true);  

• true 即使用异步

2. send（）方法：将请求送往服务器

二、优缺点：

ajax的优点：

1、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。

2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。

3、减轻服务器和带宽的负担，节约空间和宽带租用成本。ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

ajax的缺点：

1、对浏览器后退机制的破坏。

2、安全问题

• 技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

5、违背了url和资源定位的初衷。

6、一些手持设备（如手机、PDA等）现在还不能很好的支持ajax，比如说我们在手机的浏览器上打开采用ajax技术的网站时，它目前是不支持的。 

三、Ajax 同步异步

默认异步（true），如果想同步：

1.async 设置为 false

var html = $.ajax({

    url:”som.php”

    async:false

})

2.在全局设置 Ajax 属性

$.ajaxSetup({

    async:false

})