ajax基础总结笔记

AJAX

AJAX,即 Asynchronous(异步的) JavaScript and XML。
AJAX不是一门新的语言，而是对现有技术的综合运用。
其本质是在HTTP协议的基础上以异步的方式与服务器进行通信。
AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量的数据交换，AJAX可以使网页实现异步更新。即在不重载整个网页面的情况下，对网页的某部分进行更新。

AJAX 的好处

AJAX 可以实现异步通信效果，实现页面局部刷新，带来更好的用户体验：按需获取数据，节约宽带资源。

AJAX 的缺点

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

异步

指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序，不依赖程序本身的书写顺序，相反则为同步。其优势在于不阻塞程序的执行，从而提升整体的执行效率。

实现异步加载的方式

1. defer 只支持ie

<script type="text/javascript" defer="defer"></script>

2. async html5的属性

<script type="text/javascript" src="" async="async"></script>

3. 动态创建script

function loadScript(url, callback){
  var script = document.createElement("script")
  script.type = "text/javascript";
  if (script.readyState){ //IE
    script.onreadystatechange = function(){
      if (script.readyState == "loaded" ||script.readyState == "complete"){
        script.onreadystatechange = null;
        callback();
      }
    };
  } else { //Others: Firefox, Safari, Chrome, and Opera
    script.onload = function(){
      callback();
    };
  }
  script.src = url;
  document.body.appendChild(script);
}

4. 由于javascript的动态性，还有很多异步加载的方法：XHR Injection、XHR Eval、Script In Iframe、Script defer属性等等。

• XHR Injection（XHR 注入）：通过XMLHttpRequest来获取javascript，然后创建一个script元素插入到DOM结构中。ajax请求成功后设置script.text为请求成功后返回的responseText。

---

另外：实现异步编程有哪些方式。（摘自Javascript异步编程的4种方法）

1. 回调函数 callback

function f1(callback){
  setTimeout(function () {
    //f1的任务代码
    callback();
  },1000);
}

回调函数的优点是简单，易理解和部署，缺点是不利于代码阅读和维护，各部分之间高度耦合，流程会很混乱，而且每个任务只能指定一个回调函数。

2. 事件监听

f1.on('done', f2);
function f1() {
  setTimeout(function () {
    //f1的任务代码
    f1.trigger('done');
  }, 1000);
}

这种方法的优点是比较容易理解，可以绑定多个事件，每个事件可以指定多个回调函数，而且可以“去耦合”，有利于实现模块化。缺点是整个程序都要变成事件驱动型，运行流程会变得很不清晰。

3. 发布/订阅
   采用的是Ben Alman 的 Tiny Pub/Sub

jQuery.subscribe("done", f2);
function f1() {
  setTimeout(function () {
    //f1的任务代码
    jQuery.publish("done")
  }, 1000);
}

发布/订阅模式（public-subscribe pattern），又称观察者模式（observer pattern）。
f1执行完成后向信号中心发布done信号，从而引发f2的执行。
f2执,行完成后可以取消订阅。

jQuery.unsubscribe("done", f2);

这种方法的性质和“事件监听”类似，但是明显优于后者。因为我们可以通过查看“消息中心”。了解存在多少信号、每个信号有多少订阅者，从而监控程序的运行。

4. Promise对象
   ES6是由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。
   从语法上说，Promise是一个对象，可以获取异步操作的结果，它有三种状态。

• Pending（进行中）
• Resolved（已完成，又称Fulfilled）
• Rejected（已失败）
  只有异步操作的结果，可以决定当前是哪一种状态。
  一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：
• 从 Pending 变为 Resolved。
• 从 Pending 变为 Rejected。

var promise = new Promise(function(resolve, reject) {
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});
promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

扯远了...

---

同步异步的区别

1. 同步：阻塞的
   浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返回数据，浏览器才能显示页面。
2. 异步：非阻塞的
   浏览器向服务器请求数据，服务器比较忙，浏览器可以自如的干原来的事情（显示页面），服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新。

XMLhttpRequest

XMLhttpRequest可以以异步方式的处理程序。
浏览器内建对象，用于在后台与服务器通信（交换数据），由此我们便可实现对网页的部分更新，而不是刷新整个页面。
一个基本的例子：

//实例化
var xhr = new XMLHttpRequest();
//发起一个http请求
xhr.open('get', 'index.php');
xhr.send(null);
//接收服务器响应
xhr.onreadystatechange = function () {
  if(xhr.readyState == 4 && xhr.status == 200) {
    var result = document.querySelector('.result');
    result.innerHTML = xhr.responseText
  }
}

请求

XMLHttpRequest 本质基于 HTTP 协议实现通信。HTTP 请求 3 个组成部分与 XMLHttpRequest 方法的对应关系：

1. 请求行

xhr.open('get', 'index.php')

2. 请求头(get 请求可以不设置)

xhr.setRequestHeader('Content-Type', 'text/html');

3. 请求主体

xhr.send(null);

响应

HTTP响应 3 个组成部分与 XMLHttpRequest 方法或属性的对应关系。
由于服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。

xhr.onreadystatechange = function () {
  if(xhr.readyState == 4 && xhr.status == 200) {
    var result = document.querySelector('.result');
    result.innerHTML = xhr.responseText;
  }
}

onreadystatechange 是 Javascript 的事件的一种，其意义在于监听 XMLHttpRequest 的状态。

1. 获取状态行（包括状态码和状态信息）

xhr.status
xhr.statusText

2. 获取响应头

//获取指定头信息
xhr.getResponseHeader('Content-Type');
//获取所有响应头信息
hr.getAllResponseHeaders();

3. 响应主体

xhr.responseText；
xhr.responseXML;

我们需要检测并判断响应头的 MIME 类型后确定使用 request.responseText 或者 request.responseXML.

创建一个 ajax

var xhr = null;//创建对象
if (window.XMLHttpRequest) {
  xhr = new XHLHttpRequest();
}else {
  xhr = new ActiveXObject("Microsoft.XMLHTTP")；
}
xhr.open("方式", "地址", "标志位");//初始化请求
xhr.setRequestHeader("","")//设置相应头信息
xhr.onreadystatechange = function () {}//指定回调函数
xhr.send();//发送请求

简述ajax的过程

1. 创建 XMLHttpRequest 对象，也就是创建一个异步调用对象。
2. 创建一个新的 HTTP 请求，并指定该 HTTP 请求的方法、URL 及验证信息。
3. 设置响应 HTTP 请求状态变化的函数。
4. 发送 HTTP 请求
5. 获取异步调用返回的数据
6. 使用 JavaScript 和 DOM 实现局部刷新

get 和 post 请求方式的差异

• get 请求没有请求主体，使用 xhr.send(null)。
• get 可以通过在请求 URL 上添加请求参数。
• post 可以通过 xhr.send('name=i&age=10')。
• post 需要设置请求头 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
• get 效率更好（应用比较多）。
• get 大小限制约 4K，post则没有限制。

get 和 post 的区别，什么时候使用 post 请求

• get：一般用于信息获取，使用 URL 传递参数，对所发信息的数量也有限制，一般在 2000 个字符，有的浏览器是 8000 个字符。
• 一般用于修改服务器上的资源，对所发送的信息没有限制。
  以下情况中，使用post 请求：
  1. 无法使用缓存文件（更新服务器上的文件或数据库）
  2. 向服务器发送大量数据（post 没有数据量限制）
  3. 发送包含未知字符的用户输入时，post 比 get 更稳定也更可靠。

jquery 中的 ajax

• $.ajax({}) 可配置方式发起 Ajax 请求。
• $.get() 以 get 方式发起 Ajax 请求。
• $.post() 以 post 方式发起ajax请求。
• $('form').serialize() 序列化表单（即格式化 key=val&key=val)
• url 接口地址
• type 请求方式
• timeout 请求超时
• dataType 服务器返回格式
• data 发送请求数据
• beforeSend:function(){} 请求发起前调用
• success 成功响应后调用
• error 错误响应时调用
• complete 响应完成时调用（包括成功和失败）

jQuery 参考手册 - Ajax

最后

忽然发现已经忘了 ajax 的一些理论基础方面的知识了... 面试忽然问起，恩，懵住了... 所以学习嘛，还是要时常复习。