原生JavaScrpit中异步请求Ajax实现方法


Posted in Javascript onNovember 03, 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)
        }
      })
    }
  }
});
// 也可以写成下面的形式
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请求的顺序,而只是关心所有请求都完成,才能进行下一步。 一种方法是可以在每个请求完成以后都调用同一个回调函数,只有次数减少到0才执行下一步。

var count = 3, all_ret = []; // 调用3次
ajax({
  url: '/get1.php?id=1',
  success:function(ret) {
    callback(ret);
  }
});
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) {
  if (count > 0) {
    count--;
    // 可以在这儿保存 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);

PS:下面看下ajax异步请求实例代码,具体代码如下所示:

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>获得书籍列表</title>
<script type="text/javascript">
var xmlhttp;
var txt,x,xx,i;
function loadXMLDoc(url,cfunc)
{
if(window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
 xmlhttp.onreadystatechange = cfunc;
 xmlhttp.open("GET", "<%=request.getContextPath()%>"+url, true);
 xmlhttp.send();
}
function myFunction1()
{
loadXMLDoc("/xmls/books.xml",function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
var xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName_r("title");
for(i=0;i<x.length;i++)
{
txt = txt + x[i].childNodes[0].nodeValue+"<br/>";
}
document.getElementByIdx_x("myDiv").innerHTML = txt;
}
});
}
  function myFunction2()
  {
  loadXMLDoc("/text/test1.txt",function(){
  if(xmlhttp.readyState==4 && xmlhttp.status==200)
  {
  document.getElementByIdx_x("myDiv").innerHTML = xmlhttp.responseText;
  }
  });
  }
  function myFunction3()
  {
  loadXMLDoc("/xmls/cd_catalog.xml",function(){
  if(xmlhttp.readyState==4 && xmlhttp.status==200)
  {
  txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>"
  x= xmlhttp.responseXML.documentElement.getElementsByTagName_r("CD");
  for(i=0;i<x.length;i++)
  {
  txt = txt + "<tr>";
  xx = x[i].getElementsByTagName_r("TITLE");
  {
  try{
  txt = txt + "<td>" + xx[0].firstChild.nodeValue +"</td>";
   }
  catch(er)
  {
  txt = txt +"<td></td>";
  }
  xx = x[i].getElementsByTagName_r("ARTIST");
  try
  {
  txt = txt + "<td>" + xx[0].firstChild.nodeValue +"</td>";
  }
  catch(er)
  {
  txt = txt + "<td></td>";
  }
  }
  txt = txt + "</tr>"
  }
  txt = txt + "</table>";
  document.getElementByIdx_x("myDiv").innerHTML =txt;
  }
  });
  }
</script>
</head>
<body>
<h2>My Book Collection:</h2>
<button type="button" onClick="myFunction1()">获得我的图书收藏列表</button>
<button type="button" onClick="myFunction2()">这是不同的请求</button>
<button type="button" onClick="myFunction3()">获取CD信息</button>
<div id="myDiv"></div>
</body>
</html>

总结

以上所述是小编给大家介绍的原生JavaScrpit中异步请求Ajax实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
[JS]点出统计器
Oct 11 Javascript
javascript获取当前ip的代码
May 10 Javascript
jquery里的each使用方法详解
Dec 22 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
EasyUi datagrid 实现表格分页
Feb 10 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
JavaScript中的lastIndexOf()方法使用详解
Jun 06 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 #Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 #Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 #Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 #Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 #jQuery
nginx配置React静态页面的方法教程
Nov 03 #Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 #Javascript
You might like
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
JavaScript延迟加载
2021/03/09 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
2012/01/04 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
在Python中使用异步Socket编程性能测试
2014/06/25 Python
python实现2048小游戏
2015/03/30 Python
Python实现全排列的打印
2018/08/18 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
详解python中的数据类型和控制流
2019/08/08 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
实习生的自我评价
2014/01/08 职场文书
行政内勤岗位职责
2014/04/07 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
详解JAVA中的OPTIONAL
2021/06/14 Java/Android
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle