AJAX-前后端开发的纽带

秒速五厘米 2022-06-13 11:09 178阅读 0赞

*最近更新时间：2017年7月6日15:30:40*

[《我的博客地图》][Link 1]

Ajax,Asyncchronous JavaScropt and Xml，异步js和xml，是一种异步请求的技术，这项技术能够向服务器请求额外数据，而无需卸载页面。

Ajax技术的核心是XMLHttpRequest对象（简称XHR）。

1、原生js封装XHR对象

function createXHR()\{

//其他兼容情况

return new XMLHttpRequest();

var xhr = createXHR();

xhr.onreadystatechange = function()\{

if(xhr.readyState == 4 && xhr.status == 200)\{

alert( xhr.responseText );

xhr.open('get','demo.php',true);

xhr.setRequestHeader("MyHeader","Myvalue")

xhr.send(null);

2、封装好的API

微信小程序的ajax请求：wx.request(\{url: getApp().HOST + '/list',data\{\},success: function(res) \{\},fail: function(res) \{\}\});

JQuery ajax，是对原生XHR的封装，除此以外还增添了对JSONP的支持。

$.ajax(\{  
   type: 'POST',  
   url: url,  
   data: data,  
   dataType: dataType,  
   success: function () \{\},  
   error: function () \{\}  
\});

3、请求数据传递参数遇到的问题

一般情况下，向后端传递的参数如果为 '' 或 null 时，key 和 value 都不需要发送，前端需要做空数据过滤操作（js编写动态json数据，属于对象深拷贝），对于简单的一维对象操作如下：

let obj = this.data.detailInfo

let sendData = \{\}  
for(var item in obj)\{  
  if(obj\[item\] != null && obj\[item\] != '')\{  
    sendData\[item\] = obj\[item\]  
  \}  
\}

最终，sendData对象中存储的数据是经过 空数据过滤 后的深拷贝对象数据。

4、前后端接口对接的相关问题

在做前后端分离开发的过程中，接口定义和参数对接及其重要，这对于开发效率和理清逻辑思路是最重要的两点。接口定义需要解决的问题是，前后端开发人员对接口名称、接口功能以及接口复杂度达成共识；参数对接需要解决的问题是，前后端开发人员对于参数的个数、内容和格式要提前告知和声明。经常遇到的问题：  
    第一，前端需要的参数后端接口没有返回，后端接口需要的参数，前端提供的格式不正确，还有接口参数缺少的现象。  
    第二，产品功能上出现bug时，前后端都可以修复，这个bug该由谁来解决的问题。

5、关于JSON数据

JSON: JavaScript Object Notation(JavaScript 对象表示法)，轻量级的文本数据交换格式，独立于语言，具有自我描述性，更易理解，JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。

JSON是比js语法更加严谨的一种数据描述对象，JSON常见三种格式：\{\}、\[\{\},\{\},...\]、\{\[\],\[\],...\}

JSON 数据的书写格式是：名称/值对，在双引号中

JSON数据中不允许包含任何注释内容，否则会报错。（如需要注释内容，必须以键值对形式表示）

JSON和JavaScript的相互转换：

JSON.parse()将数据（json字符串）转换为js对象

JSON.stringify()将js对象转换为json字符串

6、JSONP

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。即，跨域数据交互协议  
    从不同的域（网站）访问数据需要这个特殊的技术-JSONP，因为同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。

实例：

function callbackFunction(result, methodName)\{\}

</script>  
<script type="text/javascript" src="http://www.wanshaobo.com/jsonp.txt?jsoncallback=callbackFunction"></script>

7、jQuery的跨域请求实例

function purchaseNum()\{  
    $.ajax(\{  
        type:'get',  
        url:'http://\*\*\*.wanshaobo.com/data',  
        dataType:'jsonp',  
        jsonp: 'callback',  
        jsonpCallback:"jsonpCallback",  
        success: function(data)\{\}  
    \});  
\}

8、ajax与jsonp的异同  
    ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本

ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取

jsonp是一种方式或者说非强制性协议，如同ajax一样，它也不一定非要用json格式来传递数据，如果你愿意，字符串都行，只不过这样不利于用jsonp提供公开服务

9、window.fetch()

fetch的优势主要优势就是：更加底层，提供的API丰富（request, response），脱离了XHR，是ES规范里新的实现方式。

参考：《[传统 Ajax 已死，Fetch 永生][Ajax _Fetch]》

[fetch使用的常见问题及解决办法][fetch]

10、axios

axios 在NPM上的描述是：Promise based HTTP client for the browser and node.js。axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。Axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，从它的官网上可以看到它有以下几条特性：

从 node.js 创建 http 请求；支持 Promise API；客户端支持防止CSRF；提供了一些并发请求的接口（重要，方便了很多的操作）

支持防止CSRF原理，让每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。

Axios既提供了并发的封装，也没有fetch的各种问题，而且体积也较小，当之无愧现在最应该选用的请求的方式。

axios(\{  
    method: 'post',  
    url: '',  
    data: \{\}  
\})  
.then(function (response) \{  
    console.log(response);  
\})  
.catch(function (error) \{  
    console.log(error);

\});

11、使用优先级axios

axios > Jquery > fetch

12、<img>的src（获取图片），<link>的href（获取css），<script>的src（获取javascript）这三个都不符合同源策略，它们可以跨域获取数据。这里介绍的JSONP就是利用<script>的src来实现跨域获取数据的。

function jsonp(url,cb) \{  
        //var getTimer = setTimeout(getTimeout(new Error('Timeout')), 5000);  
        var script = document.createElement("script");  
        script.src = url + "&callback=handleResponse";  
        document.body.insertBefore(script, document.body.firstChild);  
        window\["handleResponse"\] = function (response)\{  
            script.parentNode.removeChild(script);//删除该标签  
            //clearTimeout(getTimer);  
            cb( response.data)  
        \}  
    \}

注意：handleResponse函数必须写成window对象下的全局函数

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[Ajax _Fetch]: https://segmentfault.com/a/1190000003810652
[fetch]: https://www.cnblogs.com/wonyun/p/fetch_polyfill_timeout_jsonp_cookie_progress.html