原生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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
JavaScript中获取元素索引的函数
Sep 10 Javascript
jquery ajax请求实例深入解析
Nov 26 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
JS运动特效之链式运动分析
Jan 24 Javascript
Vue-Router的使用方法
Sep 05 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
js日历功能对象
2012/01/12 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
js实现烟花特效
2020/03/02 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
python实现贪吃蛇双人大战
2020/04/18 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
倩碧美国官网:Clinique美国
2016/07/20 全球购物
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
Java servlet面试题
2012/03/04 面试题
物业管理个人自我评价
2013/11/08 职场文书
高二生物教学反思
2014/01/27 职场文书
小学语文课后反思精选
2014/04/25 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
股东授权委托书范文
2014/09/13 职场文书
时尚女魔头观后感
2015/06/04 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers