http/axios/fetch/request

状态码

-	-
301	永久重定向
302	临时重定向
304	资料未修改
401	没权限
404	资源找不到

对象转成查询串

var objectToQueryString = function objectToQueryString(obj) {
  return Object.keys(obj).map(function (key) {
    return "".concat(encodeURIComponent(key), "=").concat(encodeURIComponent(obj[key]));
  }).join('&');
};

function objTransUrlParams(obj) {
  const params = [];
  Object.keys(obj).forEach((key) => {
    let value = obj[key]
    // 如果值为undefined我们将其置空
    if (typeof value === 'undefined') {
      value = ''
    }
    // 对于需要编码的文本（比如说中文）我们要进行编码
    params.push([key, encodeURIComponent(value)].join('='))
  })
  return params.join('&')
}
export default {
  objTransUrlParams
}

5. ajax异步局部更新

2005年2月，AJAX 这个词第一次正式提出，它是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。后来，AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词，也就是说，只要用脚本发起通信，就可以叫做 AJAX 通信。

1. XMLHttpRequest

GET在浏览器回退时是无害的，而POST会再次提交请求。

GET产生的URL地址可以被Bookmark，而POST不可以。

GET请求会被浏览器主动cache，而POST不会，除非手动设置。


GET请求只能进行url编码，而POST支持多种编码方式。

GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。


GET请求在URL中传送的参数是有长度限制的，而POST么有。

 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。

 GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

 GET参数通过URL传递，POST放在Request body中。

http 基于TCP/IP通信协议

TCP运送数据

本质上没有区别

GET只需要汽车跑一趟就把货送到了，而POST得跑两趟，第一趟，先去和服务器打个招呼“嗨，我等下要送一批货来，你们打开门迎接我”，然后再回头把货送过去。

同源策略,是网站最基本的安全策略

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，会发生什么？

很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。

由此可见，"同源政策"是必需的，否则 Cookie 可以共享，互联网就毫无安全可言了。

---

1. ajax: /ei/ 比较古老: xampp: 修改host 开发的时候
2. 服务器拆分: web data 图片服务器

1. JSONP (只get)

1. script img link iframe 不存在跨域请求限制
2. 这种资源文件请求都是GET

function addScriptTag(src) {
  var script = document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.src = src;
  document.body.appendChild(script);
}

window.onload = function () {
  addScriptTag('http://example.com/ip?callback=foo');
}

function foo(data) {
  console.log('Your public IP address is: ' + data.ip);
};

$.ajax({
    url: 'http://127.0.0.1:8001/list',
    method: 'get',
    datatype: 'jsonp',
    success: res => {
        console.log(res);
    }
})

jsonp安全性不好

2. iframe document.domin

只能实现同一个主域,不同子域的操作
v.qq.com
sports.qq.com

子父页面都设置相同的document.domin
子页面用window.parent.user

3. cors 跨域资源共享(通常用)

在服务端设置相关的头信息(options试探请求)
* 或者 写一个地址
但是写* 不能携带cookie

4. http proxy

需要配合 webpack webpack-dev-server

5.nginx 反向代理

6. postMessage

7. socket.io (websocket)

实时聊天

8.window.name 需要加个空页面

iframe.contentWindow.name

let count = 0;
iframe.onload = function () {
    if (count === 0) {
        iframe.src = 'http://127.0.0.1/Name/proxy.html';
        count ++;
        return;
    }
    console.log(iframe.contentWindow.name)
}

promise

3. var prm = new Promise(function (resolved, rejected) {
    console.log(1);//允诺的事情正在执行,默认执行一次
    resolved(1)
}).then(function(r){
    console.log(r)//1111
}).catch()

1. then() 可以接收两个回调,一个成功,一个失败
2. .then().catch(function(){ 失败}) 更清晰

const ajaxPromise =  param => {
  return new Promise((resovle, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open(param.type || "get", param.url, true);
    xhr.send(param.data || null);
 
    xhr.onreadystatechange = () => {
     if(xhr.readyState === 4){
      if(xhr.status === 200){
        resovle(JSON.parse(xhr.responseText));
      } else{
        reject(JSON.parse(xhr.responseText));
      }
     }
    }
  })
}

ajax

“Asynchronous Javascript And XML”

• setInterval/setTimeout(异步的 代码报错也不影响后面的代码执行）

1. 同步请求：重新加载整个页面；比如form表单请求。
2. 异步请求：局部获得数据，不刷新页面,更好的用户体验
   1. 通过XMLHttpRequest发送请求,并接收服务器返回的请求
   2. .open(‘get/post’,‘url+数据/url’)
   3. send(null)

1,ajax.get

function getXhr() {
    var xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xhr;
}
function param(data) {
    var arr = [];
    for (var item in data) {
        arr.push(item + "=" + encodeURI(data[item]));
    }
    return arr.join("&");
}
function ajaxGet(obj) {
    var xhr = getXhr();
    obj.url += '?rand=' + new Date().getTime();
    if (obj.data) {
        xhr.open('get', obj.url + '&' + param(obj.data));
    } else {
        xhr.open('get', obj.url);
    }
    xhr.send(null);
    xhr.onreadystatechange = function () {//对该事件进行监听
        if (xhr.readyState == 4) {//0 1 2 3 4 状态值
            if (xhr.status == 200) {//状态码 404 500 
                obj.success(xhr.responseText);
            } else {
                if (obj.err) {
                    obj.err('响应出错了，错误码：' + xhr.status + xhr.statusText);
                }
            }
        }
    }
}

2,ajax post

    xhr.open('post', obj.url);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    if (obj.data){
        xhr.send(param(obj.data));
    } else {
        xhr.send(null);
    }
    

###干嘛用的? 解决回调地狱的。怎么解决的？返回出来了

Promise.all([
    $.ajax({ url: '', dataType: 'json'}),
    $.ajax({ url: '', dataType: 'json'}),
    $.ajax({ url: '', dataType: 'json'})
]).then(res => {
    //完事了
}, err=> {
    alert('错了')
})

runner(function *() {
    let data1 = yield $.ajax({url: 'data/1.txt', dataType: 'json'});
    let data2 = yield $.ajax({url: 'data/2.txt', dataType: 'json'});
    let data3 = yield $.ajax({url: 'data/3.txt', dataType: 'json'});
    console.log(data1, data2, data3);
})

function getA() {
    return axios.get('/user/123');
}
function getB() {
    return axios.get('/user/456');
}
axios.all([getA(), getB()])
    .then(axios.spread(a, b) {
        //获取到了a,b的数据
    })

Promise的优势在于，可以在then方法中继续写Promise对象并返回，然后继续调用then来进行回调操作。

    var a = new Promise((res,rej)=>{
      console.log(1);
      setTimeout(res('成功了'),1000);
    }).then((data)=>{
      console.log(data);
       return new Promise((res,rej) =>{
        res('又成功了')
      })
    }).then((data)=>{
      console.log(data)
      return new Promise((res,rej)=>{
        rej('失败了');
      })
    }).then((data)=>{
      console.log(data);    
    }).catch((data)=>{
      console.log(data);
      return 'lll';//可以直接return 数据
    }).then((data)=>{
      console.log(data)
    })

https://blog.csdn.net/shan1991fei/article/details/78966297

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises

axios底层原理 ajax