# 一、前端进行网络请求的关注点

大多数情况下，在前端发起一个网络请求我们只需关注下面几点：

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

# 二、前端进行网络请求的方式

• form表单、ifream、刷新页面
• Ajax - 异步网络请求的开山鼻祖
• jQuery - 一个时代
• fetch - Ajax的替代者
• axios、request等众多开源库

# 三、关于网络请求的疑问

• Ajax的出现解决了什么问题
• 原生Ajax如何使用
• jQuery的网络请求方式
• fetch的用法以及坑点
• 如何正确的使用fetch
• 如何选择合适的跨域方式

带着以上这些问题、关注点我们对几种网络请求进行一次全面的分析。

# 四、Ajax的出现解决了什么问题

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

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

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

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

# 五、原生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);