什么是AJAX？

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【什么是AJAX？ 】

大家好，我是IT修真院北京总院第24期的学员，一枚正直纯洁善良的web程序员

今天给大家分享一下，修真院官网js任务5，深度思考中的知识点——什么是AJAX？

1.背景介绍

什么是Ajax？

Ajax的全称是Asynchronous JavaScript and XML 中文名称定义为异步的JavaScript和XML。

Ajax的概念由杰西·詹姆士·贾瑞特所提出，该技术的出现改变了古老的，用户请求——等待——响应这种web交互模式。

Ajax是Web2.0技术的核心。由多种技术集合而成，使用Ajax技术不必刷新整个页面，只需对页面的局部进行更新，可以节省网络带宽，提高页面的加载速度，从而缩短用户等待时间，改善用户体验

2.知识剖析

传统的请求方式

传统的web应用程序中，用户向服务器发送一个请求，然后等待，服务器接受到用户的请求然后响应。在这段时间内，用户会傻乎乎的盯着一个空白页面看。这是因为以往的传输方式为同步处理方式。长久以来我们对这种web交互模式已经习惯了，并且以使用者的角度来讲已经觉得是理所当然的事情了。

Ajax的工作方式

和传统的web应用不同，Ajax采取了异步交互避免了用户请求-等待-应答交互方式的缺点。

Ajax在应用程序和服务器中引入了一个中间层---Ajax引擎，它是用Javascript编写的，在一个隐藏的框架中运行。Ajax引擎负责呈现用户界面,以及代表用户和服务器进行交互。Ajax引擎允许用户和服务器进行异步的交互。用户无需傻乎乎的盯着空白页面。

3.常见问题

1、IE浏览器下面的缓存问题

2、跨域问题

3、Ajax乱码问题

4、使用post提交的时候需要设置content-type为"application/x-www-form-urlencoded"

5、Ajax对象属性的大小写问题

6、Ajax状态为0的问题

4.解决方法

1.IE浏览器下面的缓存问题：

在IE浏览器下面使用get请求时，如果第一次请求了数据之后IE会自动缓存数据，如果下一次再发送同样的请求的时候浏览器会自动先去找缓存显示出来，所以如果请求的数据有变化的时候，这里是看不到变化的。

解决办法：

xhr.open("get","xxxx.aspx?_dc="+newDate().getTime(),true);

就是在请求的后面 加上_dc=...让url变成唯一，或者是，改成post请求。

2.跨域问题：

这是我们目前见到的最多的，也是最熟悉的一个问题。本地上面直接采用Nginx跨域实现。在服务器上的话，也可以用Nginx。注意 Nginx跨域可以同时配置多个接口的，就是多写几个location就好了，然后location后面带的参数不一样就可以了。

3.Ajax乱码问题

乱码问题虽然我们目前遇到的不多，但是也属于比较常见的一个问题了。出现的主要原因就是编码不一致导致的。如果出现乱码问题了，首先检查一下meta声明的charset要和请求的页面返回的charset一致。response.charset="gb2312 or utf-8"

4.使用post提交的时候需要设置

content-Type: application/x-www-form-urlencoded

//jQuery中

content-Type: application/x-www-form-urlencoded;charset=utf-8

//AngularJS中$http的

content-Type: application/json; charset=utf-8

//使用原生Ajax需要在open以后才能使用xhr.setRequestHeader()方法，否则出错。

xhr.open("post","xxxx.aspx",true);        

xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")

//用原生写时必须在open()方法之后send()方法之前调用。

5.Ajax对象属性的大小写问题

有些浏览器比如火狐，对大小写是敏感的，if (xhr.readystate==4)这种写法，在IE下是成立的，但是在ff下就行不通了，因为IE不区分大小写，ff是区分大小的。标准写法为if (xhr.readyState==4)，同理还有属性responseText，responseXML。

习惯采用驼峰形式的写法可以避免这个问题。

6.Ajax状态0的问题

有时候在测试Ajax代码的时候加了 xhr.status==200的判断后，一直不执行xhr.status==200的代码，这个就需要注意了。xhr.status==200是要通过服务器确认后来返回的，在服务器页面没有发生错误或者转向时才返回200状态的此状态和你通过浏览器访问页面时服务器定义的状态一致。这个我们提前就跟后端对接好了，问题也不大。

5.编码实战

jQuery方法

AngularJS方法

Javascript原生方法

6.拓展思考

AngularJS请求的时候,success()和then()方法的区别?

then()方法与其他两种方法的主要区别是，它会接收到完整的响应对象，信息更为全面，而success()和error()则会对响应对象进行析构，使用起来更为方便。

7.参考文献

参考一：什么是跨域

参考二：AngularJS中then和success的区别

参考三：Ajax常见问题

8.更多讨论

常见的异步操作有哪些？

Javascript异步编程的4种方法

---

 

 

视频链接

密码: pf7s

ppt链接