原生JavaScript实现Ajax异步请求


Posted in Javascript onNovember 19, 2017

在前端页面开发的过程中,经常使用到Ajax请求,异步提交表单数据,或者异步刷新页面。

一般来说,使用Jquery中的$.ajax,$.post,$.getJSON,非常方便,但是有的时候,我们只需要ajax功能,这样引入Jquery比较不划算。

所以接下来便用原生JavaScrpit实现一个简单的Ajax请求,并说明ajax请求中的跨域访问问题,以及多个ajax请求的数据同步问题。

JavaScript实现Ajax异步请求

简单的ajax请求实现
Ajax请求的原理是创建一个XMLHttpRequest对象,使用这个对象来进行异步发送请求,具体实现参考下面代码:

function ajax(option) {
  // 创建一个 XMLHttpRequest 对象
  var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"),
    requestData = option.data,
    requestUrl = option.url,
    requestMethod = option.method;
  // 如果是GET请求,需要将option中的参数拼接到URL后面
  if ('POST' != requestMethod && requestData) {
    var query_string = '';
    // 遍历option.data对象,构建GET查询参数
    for(var item in requestData) {
      query_string += item + '=' + requestData[item] + '&';
    }
    // 注意这儿拼接的时候,需要判断是否已经有 ?
    requestUrl.indexOf('?') > -1
      ? requestUrl = requestUrl + '&' + query_string
      : requestUrl = requestUrl + '?' + query_string;
    // GET 请求参数放在URL中,将requestData置为空
    requestData = null;
  }
  // ajax 请求成功之后的回调函数
  xhr.onreadystatechange = function () {
    // readyState=4表示接受响应完毕
    if (xhr.readyState == ("number" == typeof XMLHttpRequest.DONE ? XMLHttpRequest.DONE : 4)) {
      if (200 == xhr.status) { // 判断状态码
        var response = xhr.response || xhr.responseText || {}; // 获取返回值
        // if define success callback, call it, if response is string, convert it to json objcet
        console.log(response);
        option.success && option.success(response); // 调用回调函数处理返回数据
        // 可以判断返回数据类型,对数据进行JSON解析或者XML解析
        // option.success && option.success('string' == typeof response ? JSON.parse(response) : response);
      } else {
        // if define error callback, call it
        option.error && option.error(xhr, xhr.statusText);
      }
    }
  };
  // 发送ajax请求
  xhr.open(requestMethod, requestUrl, true);
  // 请求超时的回调
  xhr.ontimeout = function () {
    option.timeout && option.timeout(xhr, xhr.statusText);
  };
  // 定义超时时间
  xhr.timeout = option.timeout || 0;
  // 设置响应头部,这儿默认设置为json格式,可以定义为其他格式,修改头部即可
  xhr.setRequestHeader && xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
  xhr.withCredentials = (option.xhrFields || {}).withCredentials;
  // 这儿主要用于发送POST请求的数据
  xhr.send(requestData);
}

上面的代码中有详细的注释,ajax的原理很简单,总的来说就是使用XMLHttpRequest对象来发送数据。这儿对这个对象进行补充说明。

XMLHttpRequest对象的基本属性

readyState属性有五个状态值:

0:是uninitialized:未初始化。已经创建了XMLHttpRequest对象但是未初始化。
1:是loading:已经开始准备好要发送了。
2:是loaded,:已经发送,但是还没有收到响应。
3:是interactive:正在接受响应,但是还没接收完。
4:是completed:接受响应完毕。
responseText:服务器返回的响应文本。只有当readyState>=3的时候才有值。当readyState=3,返回的响应文本不完整,只有readyState=4,接收到完整的响应文本。

responseXML:响应信息是xml,可以解析为Dom对象。

status:服务器的Http状态码,若是200,则表示OK,404,表示为未找到。

statusText:服务器http状态码的文本。比如OK,Not Found。

XMLHttpRequest对象的基本方法

open(method,url,asyn):打开XMLHttpRequest对象。其中method方法有get,post,delete,put。url是请求资源的地址。第三个参数表示是否使用异步。默认情况是true,因为Ajax的特点就是异步传送。若使用同步则false。

send(body):发送请求Ajax。其中发送的内容可以是需要的参数,若是没有参数,直接send(null)

使用方法

直接调用上面定义的ajax函数,传送相应的选项和参数即可。

ajax({
  url: '/post.php',
  data: {
    name: 'uusama',
    desc: 'smart'
  },
  method: 'GET',
  success: function(ret) {
    console.log(ret);
  }
});

跨域请求问题

使用ajax请求的时候,一定要注意一个问题:跨域请求。

在没有使用特殊手段的情况下,跨域请求:请求其他域名和端口下的URL资源的时候,会报 Access-Control-Allow-Origin 相关的错误。其主要原因是浏览器的同源策略限制,浏览器规定不能跨域请求资源。

解决办法

下面简单的提一下一些解决方案。

在ajax头部添加允许跨域请求的header,这种方式还需要服务端配合添加允许跨域请求的头部才可以。下面是PHP添加允许POST请求跨域头部的PHP示例:

// 指定允许其他域名访问 
header('Access-Control-Allow-Origin:*'); 
// 响应类型 
header('Access-Control-Allow-Methods:POST'); 
// 响应头设置 
header('Access-Control-Allow-Headers:x-requested-with,content-type');

使用动态scrpit标签,动态创建一个scrpit标签并指向请求的地址的方法,也就是JSONP方式,需要在URL后面拼接一个回调函数,标签加载成功以后会调用回调函数。

var url = "http://uusama.com", callbaclName = 'jsonpCallback';
script = document.createElement('script');
script.type = 'text/javascript';
script.src = url + (url.indexOf('?') > -1 ? '&' : '?') + 'callback=' + callbaclName;
document.body.appendChild(script);

回调函数需要设置为全局函数:

window['jsonpCallback'] = function jsonpCallback(ret) {}

多个ajax请求数据同步问题

单个ajax返回数据异步处理
多个ajax请求互不相关,它们在被调用以后发送各自请求,请求成功以后调用自己的回调方法,互不影响。

因为ajax请求异步的特性,所有一些依赖于请求完成之后的操作我们都需要放在回调函数内部,否则的话,你在回调函数外面读取到的值是空。看下面的例子:

var result = null;
ajax({
  url: '/get.php?id=1',
  method: 'GET',
  success: function(ret) {
    result = ret;
  }
});
console.log(result); // 输出 null

虽然我们在回调函数里面设置了result的值,但是在最后一行 console.log(result); 输出为空。

因为ajax请求是异步的,程序执行到最后一行的时候,请求并没有完成,值并没有来得及修改。

这儿我们应该把 console.log(result) 相关的处理,放在 success 回调函数中才可以。

多个ajax返回数据问题

如果有多个ajax请求,情况会变得有些复杂。

如果多个ajax请求是按照顺序执行的,其中一个完成之后,才能进行下一个,则可以把后面一个请求放在前一后请求的回调中。

比如有两个ajax请求,其中一个请求的数据依赖于另外一个,则可以在第一个请求的回调里面再进行ajax请求:

// 首先请求第一个ajax
ajax({
  url: '/get1.php?id=1',
  success: function(ret1) {
    // 第一个请求成功回调以后,再请求第二个
    if (ret1) {
      ajax({
        url: '/get2.php?id=4',
        success:function(ret2) {
          console.log(ret1);
          console.log(ret2)
        }
      })
    }
  }
});

// 也可以写成下面的形式
// 将第二个ajax请求定义为一个函数,然后调用
var ajax2 = function(ret1) {
  ajax({
    url: '/get2.php?id=4',
    success:function(ret2) {
      console.log(ret1);
      console.log(ret2)
    }
  });
};
ajax({
  url: '/get1.php?id=1',
  success: function(ret1) {
    if(ret1){
      ajax2(ret1); // 调用第二个ajax请求
    }
  }
});

如果不关心不同的ajax请求的顺序,而只是关心所有请求都完成,才能进行下一步。

一种方法是可以在每个请求完成以后都调用同一个回调函数,只有次数减少到0才执行下一步。

var count = 3, all_ret = []; // 调用3次
ajax({
  url: '/get1.php?id=1',
  success:function(ret) {
    callback(ret); // 请求成功后调用统一回调,次数减1
  }
});
ajax({
  url: '/get2.php?id=1',
  success:function(ret) {
    callback(ret);
  }
});
ajax({
  url: '/get3.php?id=1',
  success:function(ret) {
    callback(ret);
  }
});
function callback(ret) {
  // 当调用3次以上以后,说明3个ajax军完成
  if (count > 0) {
    count--; // 每调用一次,次数减1
    // 可以在这儿保存 ret 到全局变量
    all_ret.push(ret);
    return;
  } else { // 调用三次以后
    // todo
    console.log(ret);
  }
}

另一种方法是设置一个定时任务去轮训是否所有ajax请求都完成,需要在每个ajax的成功回调中去设置一个标志。

这儿可以用是否获得值来判断,也可以设置标签来判断,用值来判断时,要注意设置的值和初始相同的情况。

var all_ret = {
  ret1: null, // 第一个ajax标识
  ret2: null, // 第二个ajax标识
  ret3: null, // 第三个ajax标识
};
ajax({
  url: '/get1.php?id=1',
  success:function(ret) {
    all_ret['ret1'] = ret; // 修改第一个ajax请求标识
  }
});
ajax({
  url: '/get2.php?id=1',
  success:function(ret) {
    all_ret['ret2'] = ret; // 修改第二个ajax请求标识
  }
});
ajax({
  url: '/get3.php?id=1',
  success:function(ret) {
    all_ret['ret3'] = ret; // 修改第三个ajax请求标识
  }
});
var repeat = setInterval(function(){
  // 遍历是否所有ajax请求标识都已被修改,以此判断是否所有ajax请求都已完成
  for(var item in all_ret) {
    if (all_ret[item] === null){
      return;
    }
  }
  // todo, 到这儿所有ajax请求均已完成
  clearInterval(repeat);
}, 50); // 调用次数可以适当调整,不应设的过小或者过大
Javascript 相关文章推荐
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
浅谈js的异步执行
Oct 18 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
如何更好的编写js async函数
May 13 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 Javascript
gulp安装以及打包合并的方法教程
Nov 19 #Javascript
js实现rem自动匹配计算font-size的示例
Nov 18 #Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 #Javascript
Angular中支持SCSS的方法
Nov 18 #Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 #Javascript
jQuery实现checkbox的简单操作
Nov 18 #jQuery
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 #Javascript
You might like
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
JavaScript中set与get方法用法示例
2018/08/15 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
TensorFlow实现创建分类器
2018/02/06 Python
Python中的元组介绍
2019/01/28 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
物业管理毕业生的自我评价
2014/02/17 职场文书
小学庆六一活动总结
2014/08/28 职场文书
个人授权委托书范本
2014/09/14 职场文书
保密工作整改报告
2014/11/06 职场文书
教代会闭幕词
2015/01/28 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
2016年校长新年寄语
2015/08/17 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
Elasticsearch 聚合查询和排序
2022/04/19 Python
2022年显卡天梯图(6月更新)
2022/06/17 数码科技