#4 转载：jQuery 插件开发全解析

WebFrontend JavaScript jQuery 2015-11-09

jQuery 插件的开发包括两种：
一种是类级别的插件开发，即给 jQuery 添加新的全局函数，相当于给 jQuery 类本身添加方法（jQuery 的全局函数就是属于 jQuery 命名空间的函数）。
另一种是对象级别的插件开发，即给 jQuery 对象添加方法。下面就两种函数的开发做详细的说明。

#1 Ajax

WebFrontend JavaScript Ajax 2011-05-12

Ajax 是一种让网页“不用刷新页面，也能和服务器通信”的技术。

比如：

  • 搜索框自动提示
  • 点赞后数字立即变化
  • 提交表单后局部刷新

这些功能背后通常都用了 Ajax。

什么是 Ajax？

Ajax 全称 Asynchronous JavaScript and XML，意思是 JS 异步请求服务器数据，虽然名字里有 XML，但实际开发里更多使用 JSON。

传统网页的工作流程：

  1. 点击按钮
  2. 浏览器请求服务器
  3. 服务器返回完整页面
  4. 浏览器整体刷新

问题：

  • 页面会闪一下
  • 速度较慢
  • 用户体验不好
  • 浪费带宽

Ajax 出现后：

  • 页面无需整体刷新
  • 后台获取数据
  • 只更新局部区域
  • 交互体验更流畅

Ajax 的实现方式

  1. 创建 XMLHttpRequest 对象
  2. 配置请求
  3. 发送请求
  4. 等待服务器响应
  5. 更新页面内容

GET 获取数据

function loadUser() {
  // 创建 XMLHttpRequest 对象
  var xhr = new XMLHttpRequest();

  // 配置请求
  xhr.open("GET", "/api/user", true);

  // 监听状态变化
  xhr.onreadystatechange = function () {
    // 请求完成
    if (xhr.readyState == 4) {
      // 请求成功
      if (xhr.status == 200) {
        // 输出服务器返回的数据
        console.log(xhr.responseText);
      } else {
        console.log("请求失败");
      }
    }
  };

  // 发送请求
  xhr.send();
}

POST 提交数据

function submitData() {
  var xhr = new XMLHttpRequest();

  xhr.open("POST", "/api/user", true);

  // 设置请求头
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      console.log("提交成功");
    }
  };

  // 提交数据
  xhr.send("name=Tom&age=18");
}

IE 浏览器兼容

IE6/IE7 需要使用：

ActiveXObject;