Ajax原理及相关面试题总结

Ajax原理及相关面试题总结

AJAX 是一种通过向服务器异步发送请求，获取数据，并在不需要重新刷新当前页面的情况下局部更新数据的web开发技术。 Ajax相当于是用户和服务器之间的中间层，它使得用户操作和服务器响应异步化。不是所有用户请求都需要向服务器提交，某些数据验证和 数据处理都交由服务器自己完成的，只有在需要获取新数据时才会由Ajax引擎代为向服务器发送请求。Ajax原理简单的来说就是，利用XMLHttpRequest对象来向服务器发送异步请求，从服务器获取数据，在由JavaScript操作 Dom来更新页面。

特点及优缺点

最大的特点：Ajax可以实现动态不刷新（局部刷新），就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

优势：

1. 通过异步模式，提升了用户体验
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。
4. 不需要插件的⽀持，原⽣ js 就可以使⽤

缺点：

1. ajax不支持浏览器back按钮。
2. 安全问题 AJAX暴露了与服务器交互的细节。
3. 对搜索引擎的支持比较弱。
4. 破坏了程序的异常机制。
5. 不容易调试。

Ajax过程

1. //创建 XMLHttpRequest 对象，

   var ajax = new XMLHttpRequest();

2. //规定请求的类型、URL 以及是否异步处理请求。

   ajax.open('GET',url,true);

3. //发送信息至服务器时内容编码类型

   ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

4. //发送请求

   ajax.send(null);

5. //接受服务器响应数据

   ajax.onreadystatechange = function () {

   ​ if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {

   ​ }

   };

GET，POST两种请求方式的区别

代码上：

1:get通过url传递参数

2:post设置请求头 规定请求数据类型

使用上：

1:post比get安全

(因为post参数在请求体中。get参数在url上面)

2:get传输速度比post快 根据传参决定的。

(post通过请求体传参，后台通过数据流接收。速度稍微慢一些。而get通过url传参可以直接获取)

3:post传输文件大理论没有限制 get传输文件小大概7-8k ie4k左右

4:get获取数据 post上传数据

(上传的数据比较多 而且上传数据都是重要数据。所以不论在安全性还是数据量级 post是最好的选择)

XMLHttpRequest对象

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在IE5中首次引入，它是一种支持异步请求的技术。XmlHttpRequest使程序员可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。

属性：
readyState:XHR对象的状态
0：未初始化，对象已创建，但未调用open
1：open方法已经调用，但send方法还未调用
2：send方法已经调用，但还未接收数据
3：正在接收数据，HTTP响应头已经接收数据，但未接收完成
4：响应数据接收完成
onreadyStatechange:
请求状态改变的事件触发器（readyState改变时就会触发这个属性上的js函数）
responseTEXT
服务器响应的文本内容
responseXML
服务器响应的XML内容对应的Dom对象
stauts
服务器返回的http状态码:常见的有200：成功；404：未找到；500：表示服务器内部错误
stautsTEXT
服务器返回状态的文本信息

方法：

方法
open
指定和服务器间交互的方法，包含三个参数（提交方式,文件路径,异步传输）
send
向服务器发送请求，如果采用异步方式，就会立即返回。参数（content），content如果指定未null就表示不发送数据，其内容可以是dom对象也可以是输入流或字符串
setRequestHeader
设置http请求的指定头部的header的值为value。参数（header,value）该方法在open后调用，一般在post方式中使用
abort
停止http请求，会将XMLHttpRequest对象复位到未初始化的状态