AitSchool

网络

传统的Web应用允许用户端填写表单（form），当提交表单时就向网页服务器发送一个请求。服务器接收并处理传来的表单，然后送回一个新的网页，但这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML码往往是相同的。由于每次应用的沟通都需要向服务器发送请求，应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。

AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。Ajax的概念由杰西·詹姆士·贾瑞特所提出。

Ajax 技术的核心是 XMLHttpRequest 对象(简称 XHR)，这是由微软首先引入的一个特性，其他 浏览器提供商后来都提供了相同的实现。在 XHR 出现之前，Ajax 式的通信必须借助一些 hack 手段来实 现，大多数是使用隐藏的框架或内嵌框架。XHR 为向服务器发送请求和解析服务器响应提供了流畅的 接口。能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据。 也就是说，可以使用 XHR 对象取得新数据，然后再通过 DOM 将新数据插入到页面中。另外，虽然名 字中包含 XML 的成分，但 Ajax 通信与数据格式无关;这种技术就是无须刷新页面即可从服务器取得数 据，但不一定是 XML 数据。

状态码

当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头（server header）用以响应浏览器的请求。HTTP状态码的英文为HTTP Status Code。

下面是常见的HTTP状态码：

  • 200 - 请求成功

  • 301 - 资源（网页等）被永久转移到其它URL

  • 404 - 请求的资源（网页等）不存在

  • 500 - 内部服务器错误

  • 常用对照表

method

要使用的HTTP方法，比如「GET」、「POST」、「PUT」、「DELETE」、等。对于非HTTP(S) URL被忽略。

  • GET 方法的首要目的是 获取资源
  • POST 方法的首要目的是 提交，POST 方法一般用于添加资源
  • PUT 对后台来说 PUT 方法的参数是一个完整的资源对象，它包含了对象的所有字段
  • PATCH 对后台来说 PATCH 方法的参数只包含我们需要修改的资源对象的字段
  • DELETE 方法一般用于删除资源

XMLHttpRequest

XMLHttpRequest 是 HTML 原生的网络请求对象 - XHR

使用示例：

const URL = 'https://query.yahooapis.com/v1/public/yql?format=json&q=select%20*%20from%20weather.forecast%20where%20woeid=2459115';
function _XHR(method, url, datas,success) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url, true);

  var formData = new FormData();
  for(var key in datas){
    formData.append(key, datas[key]);
  }

  xhr.onerror = function(xhr, status, text) {
    console.log(xhr, status, text);
  };

  xhr.onreadystatechange = function(response) {
    if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText != "") {
      typeof success === 'function' && success(JSON.parse(xhr.response))
    } else if (xhr.status != 200 && xhr.responseText) {
      console.log(xhr, xhr.status, xhr.responseText);
    }
  };
  xhr.send(formData);
}
_XHR('GET',URL,{},(res)=>{
  console.log(res)
})

Fetch

Fetch API 提供了一个获取资源的接口（包括跨域）。任何使用过 XMLHttpRequest 的人都能轻松上手，但新的API提供了更强大和灵活的功能集。

使用示例

const URL = 'https://query.yahooapis.com/v1/public/yql?format=json&q=select%20*%20from%20weather.forecast%20where%20woeid=2459115';
fetch(URL)
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 - 文档

使用示例：

  1. HTML 需要引用 axios 依赖
<script src="https://lib.baomitu.com/axios/0.19.0-beta.1/axios.js"></script>
  1. JS Request 逻辑
const URL = 'https://query.yahooapis.com/v1/public/yql?format=json&q=select%20*%20from%20weather.forecast%20where%20woeid=2459115';
axios(URL).then(res => {
  console.log(res.data)
}).catch( err => {
  console.log(err)
})

jQuery

jQuery 执行一个异步的HTTP（Ajax）的请求。 - 文档

使用示例：

  1. HTML 需要引用 jQuery 依赖
<script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
  1. JS Request 逻辑
const URL = 'https://query.yahooapis.com/v1/public/yql?format=json&q=select%20*%20from%20weather.forecast%20where%20woeid=2459115';
$.ajax({
  type: 'GET',
  url: URL,
  data: {},
  success: ( res )=>{
    console.log(res)
  },
  error: (err) => {
    console.log(err)
  }
})

CORS

← 存储 →