AJAX-前后端开发的纽带-蒲公英云

AJAX-前后端开发的纽带

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

《我的博客地图》

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 的浏览器都会使用这个策略。
实例：

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的核心则是动态添加