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

1.网络请求要点

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

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

form表单、iframe、刷新页面AjaxjQueryfetchaxios、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的替代者

axiosfetch

7.跨域问题