【网络 请求】前端的网络请求方式简析

1.网络请求要点

• 传入基本参数（url，请求方式）
• 请求参数，请求参数类型
• 设置请求头
• 获取响应的方式
• 获取响应头、响应状态、响应结果
• 异常处理
• 携带cookie设置
• 跨域请求

2.前端进行网络请求的方式

• form表单、iframe、刷新页面
• Ajax
• jQuery
• fetch
• axios、request等

3.Ajax出现之前

在Ajax出现之前，web程序是这样工作的：

这种交互的的缺陷是显而易见的，任何和服务器的交互都需要刷新页面，用户体验非常差，Ajax的出现解决了这个问题。Ajax全称Asynchronous JavaScript + XML（异步JavaScript和XML）

使用Ajax，网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。

Ajax本身不是一种新技术，而是用来描述一种使用现有技术集合实现的一个技术方案，浏览器的XMLHttpRequest是实现Ajax最重要的对象（IE6以下使用ActiveXObject）。

尽管XMLHttpRequest在Ajax中代表XML, 但由于JSON的许多优势，比如更加轻量以及作为Javascript的一部分，目前JSON的使用比XML更加普遍。

4.原生Ajax的用法

这里主要分析XMLHttpRequest对象，下面是它的一段基础使用：

var xhr = new XMLHttpRequest();
xhr.open('post','www.xxx.com',true)

xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 ){
        if(xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            console.log(xhr.responseText);
        }
    }
}
// 处理请求参数
postData = {"name1":"value1","name2":"value2"};
postData = (function(value){
var dataString = "";
for(var key in value){
     dataString += key+"="+value[key]+"&";
};
  return dataString;
}(postData));
// 设置请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 异常处理
xhr.onerror = function() {
   console.log('Network request failed')
}
// 跨域携带cookie
xhr.withCredentials = true;
// 发出请求
xhr.send(postData);

下面分别对XMLHttpRequest对象常用的的函数、属性、事件进行分析。

5.jQuery对Ajax的封装

jQuery将原生的ajax进行了封装，使使用更加简洁。
在很长一段时间里，人们使用jQuery提供的ajax封装进行网络请求，包括$.ajax、$.get、$.post等，这几个方法放到现在，依然很实用。

$.ajax({
    dataType: 'json', // 设置返回值类型
    contentType: 'application/json', // 设置参数类型
    headers: {'Content-Type','application/json'},// 设置请求头
    xhrFields: { withCredentials: true }, // 跨域携带cookie
    data: JSON.stringify({a: [{b:1, a:1}]}), // 传递参数
    error:function(xhr,status){  // 错误处理
       console.log(xhr,status);
    },
    success: function (data,status) {  // 获取结果
       console.log(data,status);
    }
})

$.ajax只接收一个参数，这个参数接收一系列配置，其自己封装了一个jqXHR对象。

6.jQuery的替代者

• axios
• fetch

7.跨域问题