全面分析前端的网络请求方式

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

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

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

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

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

三、关于网络请求的疑问

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

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

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

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

这种交互的的缺陷是显而易见的，任何和服务器的交互都需要刷新页面，用户体验非常差，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);  

（编辑：甘孜站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!