原生JS发送异步数据请求

在做项目的时候，有时候需要用到异步数据请求，但是如果这个时候没有框架的依赖，就需要用到原生js进行异步数据请求。这时候无非有两种请求方式，一种是ajax，另一个是jsonp。通过原生js对异步请求进行简单的封装。

ajax

　　ajax是一种数据请求方式，不需要刷新整个页面就能够更新局部页面的数据。ajax的技术核心是xmlhttprequest对象，主要请求过程如下：

• 创建xmlhttprequest对象(new)
• 连接服务器(open)
• 发送请求(send)
• 接收响应数据(onreadystatechange)
  

　　不说话直接贴代码

/**
* 通过json的方式请求
* @param {[type]} params [description]
* @return {[type]}  [description]
*/
ajaxjson(params) {
 params.type = (params.type || 'get').touppercase();
 params.data = params.data || {};
 var formatedparams = this.formateparams(params.data, params.cache);
 var xhr;
 //创建xmlhttprequest对象
 if (window.xmlhttprequest) {
  //非ie6
  xhr = new xmlhttprequest();
 } else {
  xhr = new activexobject('microsoft.xmlhttp');
 }
 //异步状态发生改变，接收响应数据
 xhr.onreadystatechange = function() {
  if (xhr.readystate == 4 && xhr.status == 200) {
   if (!!params.success) {
    if (typeof xhr.responsetext == 'string') {
     params.success(json.parse(xhr.responsetext));
    } else {
     params.success(xhr.responsetext);
    }
   }
  } else {
   params.error && params.error(status);
  }
 }
 if (params.type == 'get') {
  //连接服务器
  xhr.open('get', (!!formatedparams ? params.url + '?' + formatedparams : params.url), true);
  //发送请求
  xhr.send();
 } else {
  //连接服务器
  xhr.open('post', params.url, true);
  xhr.setrequestheader('content-type', 'application/x-www-form-urlencoded');
  //发送请求
  xhr.send(formatedparams);
 }
},
/**
* 格式化数据
* @param {obj}  data 需要格式化的数据
* @param {boolean} iscache 是否加入随机参数
* @return {string}   返回的字符串
*/
formateparams: function(data, iscache) {
 var arr = [];
 for (var name in data) {
  arr.push(encodeuricomponent(name) + '=' + encodeuricomponent(data[name]));
 }
 if (iscache) {
  arr.push('v=' + (new date()).gettime());
 }
 return arr.join('&');
}

　　ie7及其以上版本中支持原生的 xhr 对象，因此可以直接用：var oajax = new xmlhttprequest();。ie6及其之前的版本中，xhr对象是通过msxml库中的一个activexobject对象实现的。

　　通过xhr的open函数来连接服务器，主要接收三个参数：请求方式、请求地址和是否异步请求（一般都是异步请求）。请求方式有两种，get和post，get是通过url将数据提交到服务器的，post则是通过将数据作为send方法的参数发送到服务器。

　　给xhr绑定状态改变函数onreadystatechange，主要用来检测xhr的readystate的变化，当异步发送成功后，readystate的数值会由0变成4，同时触发onreadystatechange事件。readystate的属性及对应状态如下：

0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responsebody和responsetext获取部分数据会出现错误
4 (完成) 数据接收完毕,此时可以通过通过responsebody和responsetext获取完整的回应数据

　　在readystatechange事件中，先判断响应是否接收完成，然后判断服务器是否成功处理请求，xhr.status 是状态码，状态码以2开头的都是成功，304表示从缓存中获取，上面的代码在每次请求的时候都加入了随机数，所以不会从缓存中取值，故该状态不需判断。

jsonp

　　如果还是用上面的xmlhttprequest对象来发送需要跨域的请求，虽然调用了send函数，但是xhr的状态一直都是0，也不会触发onreadystatechange事件，这个时候就要用到jsonp的请求方式了。

　　jsonp(json with padding) 是一种跨域请求方式。主要原理是利用了script标签可以跨域请求的特点，由其src属性发送请求到服务器，服务器返回js代码，网页端接受响应，然后就直接执行了，这和通过script标签引用外部文件的原理是一样的。

　　jsonp由两部分组成：回调函数和数据，回调函数一般是由网页端控制，作为参数发往服务器端，服务器端把该函数和数据拼成字符串返回。

　　比如网页端创建一个script标签，并给其src赋值为， 此时网页端就发起一个请求。服务端将要返回的数据拼作为函数的参数传入，服务端返回的数据格式类似”process({‘name:'xieyufei'})”，网页端接收到了响应值，因为请求者是 script，所以相当于直接调用process方法，并且传入了一个参数。

　　不说话直接贴代码。

/**
* 通过jsonp的方式请求
* @param {[type]} params [description]
* @return {[type]}  [description]
*/
ajaxjsonp(params) {
 params.data = params.data || {};
 params.jsonp = params.jsonp || 'callback';
 // 设置传递给后台的回调参数名和参数值
 var callbackname = 'jsonp_' + (new date()).gettime();
 params.data[params.jsonp] = callbackname;
 var formatedparams = this.formateparams(params.data, params.cache);
 //创建script标签并插入到页面中
 var head = document.getelementsbytagname('head')[0];
 var script = document.createelement('script');
 head.appendchild(script);
 //创建jsonp回调函数 
 window[callbackname] = function(json) {
  head.removechild(script);
  cleartimeout(script.timer);
  window[callbackname] = null;
  params.success && params.success(json);
 };
 //发送请求 
 script.src = (!!formatedparams ? params.url + '?' + formatedparams : params.url);
 //为了得知此次请求是否成功，设置超时处理
 if (params.time) {
  script.timer = settimeout(function() {
   window[callbackname] = null;
   head.removechild(script);
   params.error && params.error({
    message: '超时'
   });
  }, params.time);
 }
}

　　给script标签设置src属性时浏览器就会去发送请求，但是只能发送一次请求，导致script标签不能复用，因此每次操作完都需要把script标签移除。在浏览器发送请求之前给全局绑定一个回调函数，当数据请求成功时就会调用这个回调函数。

总结

　　将两种发送异步数据的方式整合起来，根据datatype来进行判断选用哪种方式。贴上完整的代码

var xyfajax = {
 ajax: function(params) {
  params = params || {};
  params.cache = params.cache || false;
  if (!params.url) {
   throw new error('参数不合法');
  }
  params.datatype = (params.datatype || 'json').tolowercase();
  if (params.datatype == 'jsonp') {
   this.ajaxjsonp(params);
  } else if (params.datatype == 'json') {
   this.ajaxjson(params);
  }
 },
 /**
 * 通过jsonp的方式请求
 * @param {[type]} params [description]
 * @return {[type]}  [description]
 */
 ajaxjsonp(params) {
  params.data = params.data || {};
  params.jsonp = params.jsonp || 'callback';
  // 设置传递给后台的回调参数名和参数值
  var callbackname = 'jsonp_' + (new date()).gettime();
  params.data[params.jsonp] = callbackname;
  var formatedparams = this.formateparams(params.data, params.cache);
  //创建script标签并插入到页面中
  var head = document.getelementsbytagname('head')[0];
  var script = document.createelement('script');
  head.appendchild(script);
  //创建jsonp回调函数 
  window[callbackname] = function(json) {
   head.removechild(script);
   cleartimeout(script.timer);
   window[callbackname] = null;
   params.success && params.success(json);
  };
  //发送请求 
  script.src = (!!formatedparams ? params.url + '?' + formatedparams : params.url);
  //为了得知此次请求是否成功，设置超时处理
  if (params.time) {
   script.timer = settimeout(function() {
    window[callbackname] = null;
    head.removechild(script);
    params.error && params.error({
     message: '超时'
    });
   }, params.time);
  }
 },
 /**
 * 通过json的方式请求
 * @param {[type]} params [description]
 * @return {[type]}  [description]
 */
 ajaxjson(params) {
  params.type = (params.type || 'get').touppercase();
  params.data = params.data || {};
  var formatedparams = this.formateparams(params.data, params.cache);
  var xhr;
  //创建xmlhttprequest对象
  if (window.xmlhttprequest) {
   //非ie6
   xhr = new xmlhttprequest();
  } else {
   xhr = new activexobject('microsoft.xmlhttp');
  }
  //异步状态发生改变，接收响应数据
  xhr.onreadystatechange = function() {
   if (xhr.readystate == 4 && xhr.status == 200) {
    if (!!params.success) {
     if (typeof xhr.responsetext == 'string') {
      params.success(json.parse(xhr.responsetext));
     } else {
      params.success(xhr.responsetext);
     }
    }
   } else {
    params.error && params.error(status);
   }
  }
  if (params.type == 'get') {
   //连接服务器
   xhr.open('get', (!!formatedparams ? params.url + '?' + formatedparams : params.url), true);
   //发送请求
   xhr.send(null);
  } else {
   //连接服务器
   xhr.open('post', params.url, true);
   xhr.setrequestheader('content-type', 'application/x-www-form-urlencoded');
   //发送请求
   xhr.send(formatedparams);
  }
 },
 /**
 * 格式化数据
 * @param {obj}  data 需要格式化的数据
 * @param {boolean} iscache 是否加入随机参数
 * @return {string}   返回的字符串
 */
 formateparams: function(data, iscache) {
  var arr = [];
  for (var name in data) {
   arr.push(encodeuricomponent(name) + '=' + encodeuricomponent(data[name]));
  }
  if (iscache) {
   arr.push('v=' + (new date()).gettime());
  }
  return arr.join('&');
 }
}
xyfajax.ajax({
 url:'http://www.xieyufei.com',
 type:'get', //or post
 datatype:'json', //or jsonp
 data:{
  name:'xyf'
 },
 success: function(data){
  console.log(data)
 }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。