大家好，今天来为大家分享ajax前后端数据交互的一些知识点，和ajax前后端数据交互的问题解析，大家要是都明白，那么可以忽略，如果不太清楚的话可以看看本篇文章，相信很大概率可以解决您的问题，接下来我们就一起来看看吧！
封装是为了把相同的部分都实现公用，节省资源，提高代码复用性，工作效率也高，所以需要把不同的参数事件类型等通过调用的时候传入，需要注意点有：
1.1、传参
发送 ajax 请求时，主要参数有：
请求url请求类型请求参数成功回调失败回调超时时间
以上六个参数必须设置成动态传入的，便于控制任意 ajax 请求。超时时间可以统一设置，如果作为传参可以更方便地控制任意一个请求超时。
1.2、请求类型分别处理
请求类型有 get 和 post 两种，get类型传值的时候，数据跟在url地址后，post传值时在请求体内携带，还需设置请求数据类型。所以需要判断分别处理。
if(type == 'GET'){ xhr.open( 'GET' , url+'?'+strData , true ) shr.send()}else{ xhr.open('POST',url,true) xhr.setRequestHeader('content-type','application/x-www-form-urlencoded') xhr.send( strData )}
1.3、请求超时处理
网络服务异常或者接口异常的时候，请求发送出去没有响应，页面也不会做出任何反应，需要全局加一个超时处理，超出时间还没有返回时，自动结束请求，返回异常。
使用语法如下：
//设置时间为2sxhr.timeout = 2000 ;//超时回调xhr.ontimeout = function(){ console.log('网络异常，稍后重试')}
1.4、错误处理
网络中断，请求无法发送到服务器时，需要对请求失败进行处理。使用onerror事件处理。
使用语法如下：
xhr.onerror = function(){ console.log("网络异常，请检查网络")}
二、封装 ajax 代码
根据ajax的请求流程，封装代码如下：便于以后使用，建议收藏。
function ajax(option) { // method, url, data, timeout, success, error var xhr; var str = data2str(option.data); if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } if (option.type.toLowerCase() === 'post') { xhr.open(option.type, option.url, true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send(str); } else if (option.type.toLowerCase() === 'get') { xhr.open(option.type, option.url + '?' + str, true); xhr.send(); } xhr.onreadystatechange = function () { if (xhr.readyState === 4) { clearTimeout(timer); if (xhr.status >= 200 && xhr.status < 300 || xhr === 304) { option.success(xhr); }else { option.error(xhr); } } }; if (option.timeout) { var timer = setTimeout(function () { xhr.abort(); clearTimeout(timer); }, option.timeout) }}// 将对象转化成用于传输的字符串function data2str(data) { var res = []; data.t = new Date().getTime(); for (var key in data) { res.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key])); } return res.join('&');}
使用的时候调用代码如下：
关于ajax前后端数据交互的内容到此结束，希望对大家有所帮助。
