面试准备---ajax

发表于 | 分类于 ， ， | 阅读次数:

什么是ajax

AJAX(Asynchronous Javascript And XML) = 异步 JavaScript + XML 在后台与服务器进行异步数据交换，不用重载整个网页，实现局部刷新。

ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。交互模型为，ajax在浏览器端引入一个执行引擎，它一边接收user请求，一边传送数据给服务器，并把服务器端返回的结果展现给user。

简单说，通过 XMLHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用js来操作DOM而更新页面。关键是从服务器获取数据

同步：脚本会停留并等待服务器发送回复然后继续

异步：脚本不停留并处理可能的回复

优点

  • 不用重载整个网页，实现局部刷新

缺点

  • 不支持浏览器的back按钮
  • 安全问题，ajax暴露了与服务器交互的细节
  • 对搜索引擎的支持比较弱
  • 不容易调试

创建ajax的步骤

  1. 创建一个XMLHttpRequest对象
  2. 创建一个新的HTTP请求，并指定该HTTP请求类型、验证信息
  3. 设置请求头信息setRequestHeader
  4. 设置响应 HTTP 请求状态变化的回调函数
  5. 发送 HTTP 请求
  6. 获取异步调用返回的数据
  7. 使用 JavaScript 和 DOM 实现局部刷新
1
2
3
4
5
6
7
8
9
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn.call(this, xhr.responseText);
    }
};
xhr.send(data);

常见的http状态码以及代表的意义

200（OK)：请求成功

301：永久重定向

303（See Other）：告知客户端使用另一个URL来获取资源

400（Bad Request)：请求格式错误

1. 语义有误（客户端请求有语法错误），当前请求无法被服务器理解，除非修改，否则客户端不应该重复提交这个请求
2. 请求参数有误

404（Not Found)：请求失败，请求所希望得到的资源未被在服务器上发现

500（Internal Server Error)：服务器遇到一个未曾预料的状况，导致它无法完成对请求的处理