js整理（五）

阳光洒肩头
89 阅读6分钟

(一)Ajax

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
原理：Ajax的原理简单来说通过浏览器的javascript对象XmlHttpRequest(Ajax引擎)对象来向服务器发异步请求并接收服务器的响应数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。即用户的请求间接通过Ajax引擎发出而不是通过浏览器直接发出,同时Ajax引擎也接收服务器返回响应的数据,所以不会导致浏览器上的页面全部刷新. 优点：
1. 减轻服务器负担，按需要获得数据。
2.无刷新更新页面，减少用户的实际和心理的等待时间。
3.更好的用户体验。
4.减轻宽带的负担。
5.主流浏览器支持
缺点：
1.AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；
2.对搜索引擎支持不好

为了浏览器兼容所有的浏览器,根据不同的浏览器创建不同的Ajax引擎对象.将这个创建Ajax引擎对象的功能封装成一个函数

function createXHR() {
     var xhrObj;     //1.声明一个Ajax对象变量
     //2.检测window对象是否有XMLHttpRequest构造函数
     if(window.XMLHttpRequest)       
     {
     //3.有 说明当前浏览器非IE浏览器和高版本的IE浏览器
         xhrObj=new XMLHttpRequest();
     }
     else{
     //没有说明 当前浏览器 低版本的IE浏览器
     var versions=["Microsoft.XMLHTTP","Msxml2.XMLHTTP","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.6.0"];
     for (var i = 0; i < versions.length; i++) {
      //创建不同版本的浏览器
         try{
         xhrObj=new ActiveXObject(versions[i]);
            break;    //break执行说明创建成功
         }
         catch(err) {
            //catch执行说明创建错误，但是不用处理错误
             console.log(err.message);
         }
       }
     }
     return xhrObj;
    }
（1）Ajax对象属性和方法

使用Ajax引擎对象就是使用它上面的方法和属性完成发送请求和接收响应内容等. 注意:Ajax请求和响应也符合Http协议.
方法：

abort取消当前请求
getAllResponseHeaders获取响应的所有http头
getResponseHeader从响应信息中获取指定的http头
open(方式get/post，url地址，同步异步)创建一个新的http请求，打开请求，并指定此请求的方法、URL以及验证信息(用户名/密码)
send()发送请求到http服务器并接收回应
setRequestHeader单独指定请求的某个http头，header()设置http头协议信息

属性：

onreadystatechange*指定当readyState属性改变时的事件处理句柄。只写
readyState 返回当前请求的状态，只读.，ajax行进过程中不同状态
responseBody 将回应信息正文以unsigned byte数组形式返回.只读
responseStream以Ado Stream对象的形式返回响应信息。只读
responseText将响应信息作为字符串返回.只读
responseXML将响应信息格式化为Xml Document对象并返回，只读
status返回当前请求的http状态码.只读，200 ok   304 缓存 ；  404  not found;  403 没有权限  501 服务器级别错误
statusText 返回当前请求的响应行状态，只读  ok   not found    forbidden

onreadystatechange属性是一个方法,当Ajax引擎的状态发生改变时都会执行onreadystatechange属性对应的方法.
ajax引擎的状态属性readyState（0 1 2 3 4）：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

当前ajax引擎的状态属性readyState为4时,说明服务器的响应已经发送给ajax请求了. 但是响应的状态码为200时说明响应的内容是正确的,这时才会根据相应内容对当前页面的html处理. 因为HTTP协议中规定返回当前请求的http响应状态码，200 ok 304 缓存 ； 404 not found; 403 没有权限 501 服务器级别错误. ajax引擎的响应状态码属性status（200 304 404 403 501）

完整流程：

 //>>1.创建Ajax引擎对象
var xmlHttpRequest= createXHR();
//>>2.设置发送请求时需要具备的数据
    //>>2.1.指定请求url地址(注意还没有发出请求仅仅是设置请求地址和请求方式)
    xmlHttpRequest.open('GET/POST','url地址',[ '是否异步']);
    //>>2.2.监听Ajax引擎对象的改变
    ajax引擎对象.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//仿form的数据提交给服务器
    xmlHttpRequest.onreadystatechange=function(){
        //当请求和响应同时完成,从Ajax引擎中获取响应内容,然后通过javascript对网页进行操作
        if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
            //根据相应内容对网页进行操作的代码通常写在这里
            // xmlHttpRequest. responseText            
            // xmlHttpRequest. responseXML            
        }
    }
//>>3.发送请求
xmlHttpRequest.send([post请求参数字符串]);

Ajax同步实现：ajax引擎读对象.open(方式get/post，url地址，同步异步). 第三个参数为false表示同步

（2）JSON

JSON(JavaScript Object Notation)的中文名字是javaScript对象表示法， 是一种轻量级的数据存储和交换格式。JSON天生就是Javascript对象。
优点：1.JSON 是纯文本 2.JSON 具有层级结构（值中存在值） 3.JSON 可通过 JavaScript 进行解析 4.JSON 数据更加适合于AJAX 进行传输
语法：{“名字”:“值”} 表示对象
细节：数据在名称/值对中
数据由逗号分隔
花括号保存对象
方括号保存数组
不能使用注释

（3）基于Jquery的AJAX

1.GET方式
语法：jQuery.get(url, [data], [callback], [type])
参数：url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

$.get("test.cgi", { name: "John", time: "2pm" },function(data){
    alert("Data Loaded: " + data);
});

2.POST方式
语法：jQuery.get(url, [data], [callback], [type])
参数：url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

$.post("test.php", { "func": "getNameAndTime" },function(data){
     alert(data.name); // John
     console.log(data.time); //  2pm
}, "json");

3.AJAX方法 语法：

$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   dataType: "json",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});

(二)axios

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
安装
使用 npm:

$ npm install axios

使用 yarn:

$ yarn add axios

使用案例
axios

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

axios({
  method: 'get',
  url: '/user/12345',
  params: { ID: 12345 }
})

axios.post

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

发起多个并发请求

  function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });

axios实例

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

默认配置
您可以指定默认配置，它将作用于每个请求。
全局 axios 默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
//请求体中的数据会以普通表单形式（键值对）发送到后端

自定义实例默认值

// 创建实例时配置默认值
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 创建实例后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

移除拦截器

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

可以给自定义的 axios 实例添加拦截器。

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

取消请求

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消请求
controller.abort()

请求体编码
默认情况下，axios将 JavaScript 对象序列化为 JSON 。 要以application/x-www-form-urlencoded格式发送数据，您可以使用以下选项之一。

const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

(三) Promise

一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知值的代理。它让你能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。
Promise.all（）
它的 reject 回调执行是，只要任何一个输入的 promise 的 reject 回调执行或者输入不合法的 promise 就会立即抛出错误，并且 reject 的是第一个抛出的错误信息。

    Promise.all([promise1, promise2, promise3]).then((values) => {
      console.log(values);
    });

Promise.any()
Promise.any() 接收一个由 Promise 所组成的可迭代对象，该方法会返回一个新的 promise，一旦可迭代对象内的任意一个 promise 变成了兑现状态，那么由该方法所返回的 promise 就会变成兑现状态，并且它的兑现值就是可迭代对象内的首先兑现的 promise 的兑现值。
Promise.race()
一个待定的 Promise 只要给定的迭代中的一个 promise 解决或拒绝，就采用第一个 promise 的值作为它的值，从而异步地解析或拒绝（一旦堆栈为空）。
Promise.prototype.finally()
finally() 方法返回一个 Promise。在 promise 结束时，无论结果是 fulfilled 或者是 rejected，都会执行指定的回调函数。这为在 Promise 是否成功完成后都需要执行的代码提供了一种方式。这避免了同样的语句需要在 then() 和 catch() 中各写一次的情况。

avatar
文章
阅读
粉丝