Ajax 和 Ajax的封装

AJAX即“Asynchronous Javascript And XML”，是指一种创建交互式网页应用的网页开发技术。AJAX 是一种用于创建快速动态网页的技术。它可以令开发者只向服务器获取数据（而不是图片，HTML文档等资源），互联网资源的传输变得前所未有的轻量级和纯粹，这激发了广大开发者的创造力，使各式各样功能强大的网络站点，和互联网应用如雨后春笋一般冒出，不断带给人惊喜。

 

 一、什么是Ajax

Ajax是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。简单地说，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。常见运用场景有表单验证是否登入成功、百度搜索下拉框提示和快递单号查询等等。Ajax的目的是提高用户体验，较少网络数据的传输量。同时，由于AJAX请求获取的是数据而不是HTML文档，因此它也节省了网络带宽，让互联网用户的网络冲浪体验变得更加顺畅。

 

 二、Ajax原理是什么

Ajax请求数据最核心的依赖是浏览器提供的XMLHttpRequest对象，它扮演的角色相当于秘书，使得浏览器可以发出HTTP请求与接收HTTP响应。浏览器接着做其他事情，等收到XHR返回来的数据再渲染页面。

 

理解了Ajax的工作原理后，接下来我们探讨下如何使用Ajax。

 

 三、Ajax的使用

 1.创建Ajax核心对象XMLHttpRequest(记得考虑兼容性)

 var xhr=null;  
     if (window.XMLHttpRequest)  {// 兼容 IE7+, Firefox, Chrome, Opera, Safari  
       xhr=new XMLHttpRequest();  
       } else{// 兼容 IE6, IE5
       xhr=new ActiveXObject("Microsoft.XMLHTTP");  
   }

 

2.向服务器发送请求

xhr.open(method, url,async);
Send(string) // post请求时才带有支付串参数，否则不带参数

• method：请求的类型；GET 或 POST
•  url：文件在服务器上的位置
•  async：true（异步）或 false（同步）

  注意：post请求一定要设置请求头的格式内容

xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("page=1&pagesize=2");

 

 3.服务器响应处理

responseText 获得字符串形式的响应数据。

responseXML 获得XML 形式的响应数据。

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
        switch (options.dataType) {
      case "json":
        var json = JSON.parse(xhr.responseText);
        options.success(json);
        break;
      case "xml":
        options.success(xhr.responseXml);
        break;
     default:
        options.success(xhr.responseText);
        break;
              }
       }
};

 什么是readyState？

readyState是XMLHttpRequest对象的一个属性，用来标识当前XMLHttpRequest对象处于什么状态。

readyState总共有5个状态值，分别为0~4，每个值代表了不同的含义

•  0：未初始化 -- 尚未调用.open()方法；
•  1：启动 -- 已经调用.open()方法，但尚未调用.send()方法；
•  2：发送 -- 已经调用.send()方法，但尚未接收到响应；
•  3：接收 -- 已经接收到部分响应数据；
•  4：完成 -- 已经接收到全部响应数据，而且已经可以在客户端使用了；

 

 什么是status？

HTTP状态码(status)由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字没有分类的作用。HTTP状态码共分为5种类型：

 

 常见的状态码

仅记录在 RFC2616 上的 HTTP 状态码就达 40 种，若再加上 WebDAV（RFC4918、5842）和附加 HTTP 状态码 （RFC6585）等扩展，数量就达 60 余种。接下来，我们就介绍一下这些具有代表性的一些状态码。

• 200 表示从客户端发来的请求在服务器端被正常处理了。
•  204 表示请求处理成功，但没有资源返回。
•  301 表示永久性重定向。该状态码表示请求的资源已被分配了新的URI，以后应使用资源现在所指的URI。
•  302 表示临时性重定向。
•  304 表示客户端发送附带条件的请求时（指采用GET方法的请求报文中包含if-matched,if-modified-since,if-none-match,if-range,if-unmodified-since任一个首部）服务器端允许请求访问资源，但因发生请求未满足条件的情况后，直接返回304Modified（服务器端资源未改变，可直接使用客户端未过期的缓存）
•  400 表示请求报文中存在语法错误。当错误发生时，需修改请求的内容后再次发送请求。
•  401 表示未授权（Unauthorized)，当前请求需要用户验证
•  403 表示对请求资源的访问被服务器拒绝了
•  404 表示服务器上无法找到请求的资源。除此之外，也可以在服务器端拒绝请求且不想说明理由时使用。
•  500 表示服务器端在执行请求时发生了错误。也有可能是Web应用存在的bug或某些临时的故障。
•  503 表示服务器暂时处于超负载或正在进行停机维护，现在无法处理请求。

 

 GET和POST请求数据区别

•  使用Get请求时,参数在URL中显示,而使用Post方式,则放在send里面
• 使用Get请求发送数据量小,Post请求发送数据量大
• 使用Get请求安全性低，会被缓存，而Post请求反之

  关于第一点区别，详情见下面两张图：

 

 

基本的ajax的请求流程说完了下面来说下ajax的封装

为什么要封装ajax?

利用xhr对象实现ajax请求实在是太繁琐了，为了写代码更优雅，更便捷，我们需要实现一个抽象的强大的ajax方法。

 

1.确定参数格式

首先确定ajax方法的传参格式

function ajax(setting) {
  var options = {
    method: (setting.method || "GET").toUpperCase(), //请求方式
    url: setting.url || "", // 请求地址
    async: setting.async || true, // 是否异步
    dataType: setting.dataType || "json", // 解析方式 jsonp时用jsonp方式请求
    data: setting.data || "", // 参数
    success: setting.success || function() {}, // 请求成功回调
    error: setting.error || function() {} // 请求失败回调
   }
   var paramString = formatParams(options.data);
}

需要一个解析data为url拼接字符串的方法

// 参数格式化 
function formatParams(data) {
    var arr = [];
    for (var prop in data) {
      arr.push(prop + "=" + data[prop]);
     }
    return arr.join("&");
}

2.实现普通的xhr请求方式

var xhr = null;
// 创建xhr 对象
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 发送请求
if (options.method === "POST") {
xhr.open("POST", options.url, options.async);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(paramString);
} else if (options.method === "GET") {
xhr.open("GET", options.url + "?" + paramString);
xhr.send();
} else {
console.error("仅支持get和post请求！");
}
// 请求相应
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
console.log(xhr.responseText);
switch (options.dataType) {
case "json":
var json = JSON.parse(xhr.responseText);
options.success(json);
break;
case "xml":
options.success(xhr.responseXml);
break;
default:
options.success(xhr.responseText);
break;
}
}
};
// 错误处理
xhr.onerror = function(err) {
options.error(err);
};

3.实现jsonp方式请求

if (options.dataType === "jsonp") {
if (options.method === "GET") {
var jsonpScript = document.createElement("script");
var callbackName = "jsonpCallBack"; // 回调函数名称
document.body.appendChild(jsonpScript);
jsonpScript.src =
options.url + "?"+paramString+"&callback=" + callbackName;
window[callbackName] = function(data) {
options.success(data);
delete window[callbackName];
document.body.removeChild(jsonpScript);
};
} else {
console.error("请配置get请求方式！");
}
}

注意：当使用jsonp请求数据的时候需要后端的配合。

 

测试：这里使用koa搭建一个服务器来测试封装的ajax的效果   代码地址

服务端

const Koa = require("koa");
const Router = require("koa-router");
const bodyParser = require("koa-bodyparser");
const path = require("path");
const static = require("koa-static");
 
const app = new Koa();
const router = new Router();
const staticPath = "./static";
 
router.get("/ajax/get", ctx => {
const params = ctx.query;
// 接口返回结果
ctx.body = {
success: "succcess",
message: "请求成功！",
params: params,
data: "这是一个get请求"
};
});
 
router.post("/ajax/post", ctx => {
const params = ctx.request.body;
console.log(params)
// 接口返回结果
ctx.body = {
success: "succcess",
message: "请求成功！",
params:params,
data: "这是一个post请求"
};
});
 
router.get("/ajax/jsonp", ctx => {
const params = ctx.query;
const callback = params.callback;
const responseData={
success: "succcess",
message: "请求成功！",
params: params,
data: "这是一个支持jsonp的请求！"
};
// 接口返回结果
if (callback) {
ctx.body=`${callback}(${JSON.stringify(responseData)})`
} else {
throw console.error("未配置callback函数！");
}
});
 
app.use(bodyParser());
app.use(router.routes());
app.use(static(path.join(__dirname, staticPath)));
app.listen(9000);

客户端

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>ajax封装</title>
<script src="./ajax.js"></script>
</head>
<body>
<label for="result">
get请求结果：
<textarea name="result" id="result" cols="200" rows="10"> </textarea>
</label>
<br />
<label for="result1">
jsonp请求结果：
<textarea name="result1" id="result1" cols="200" rows="10"> </textarea>
</label>
<br />
<label for="result2">
post请求结果：
<textarea name="result2" id="result2" cols="200" rows="10"> </textarea>
</label>
<script>
ajax({
method: "GET",
url: "/ajax/get",
data: {
method: "GET"
},
dataType: "json",
success: function(data) {
document.getElementById("result").innerHTML = JSON.stringify(data);
},
error: function(err) {
console.log(err);
}
});
 
ajax({
method: "GET",
url: "/ajax/jsonp",
data: {
dataType: "jsonp"
},
dataType: "jsonp",
success: function(data) {
document.getElementById("result1").innerHTML = JSON.stringify(data);
},
error: function(err) {
console.log(err);
}
});
 
ajax({
method: "POST",
url: "/ajax/post",
data: {
type: "POST"
},
dataType: "json",
success: function(data) {
document.getElementById("result2").innerHTML = JSON.stringify(data);
},
error: function(err) {
console.log(err);
}
});
</script>
</body>
</html>

效果展示：