实例讲解使用原生JavaScript处理AJAX请求的方法


Posted in Javascript onMay 10, 2016

Ajax 是异步的JavaScript和XML的简称,是一种更新页面某部分的机制。它赋予了你从服务器获取数据后,更新页面某部分的权力,从而避免了刷新整个页面。另外,以此方式实现页面局部更新,不仅能有效地打造流畅的用户体验,而且减轻了服务器的负载。

下面是对一个基本的 Ajax 请求进行剖析:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);

在这里, 我们创建了一个能向服务器发出 HTTP 请求的类的实例。然后调用其 open 方法,其中第一个参数是 HTTP 请求方法,第二个参数是请求页面的 URL。最后,我们调用参数为 null 的 send 方法。假如使用 POST 请求方法(这里我们使用了 GET),那么 send 方法 的参数应该包含任何你想发送的数据。

下面是我们如何处理服务器的响应:

xhr.onreadystatechange = function(){
 var DONE = 4; // readyState 4 代表已向服务器发送请求
 var OK = 200; // status 200 代表服务器返回成功
 if(xhr.readyState === DONE){
  if(xhr.status === OK){
   console.log(xhr.responseText); // 这是返回的文本
  } else{
   console.log("Error: "+ xhr.status); // 在此次请求中发生的错误
  }
 }
}

onreadystatechange 是异步的,那么这就意味着它将可在任何时候被调用。这种类型的函数被称为回调函数——一旦某些处理完成后,它就会被调用。在此案例中,这个处理发生在服务器。

示例

便捷的 Ajax 方法也是不少人依赖 jQuery 的原因,但实际上原生 JavaScript 的 Ajax api 也很强大,并且基本的使用在各个浏览器中的差异不大,因此完全可以自行封装一个 Ajax 对象,下面是封装好的 Ajax 对象:

// Ajax 方法
 
// 惰性载入创建 xhr 对象
 
function createXHR(){
 
 if ( 'XMLHttpRequest' in window ){
 
 
  createXHR = function(){
   return new XMLHttpRequest();
  };
 
 } else if( 'ActiveXObject' in window ){
 
  createXHR = function(){
 
   return new ActiveXObject("Msxml2.XMLHTTP");
  };
 
 } else {
 
  createXHR = function(){
   throw new Error("Ajax is not supported by this browser");
  };
 
 }
 
 return createXHR();
 
}
 
// Ajax 执行
 
function request(ajaxData){
 
 var xhr = createXHR();
 
 ajaxData.before && ajaxData.before();
 
 // 通过事件来处理异步请求
 xhr.onreadystatechange = function(){
 
  if( xhr.readyState == 4 ){
 
   if( xhr.status == 200 ){
 
    if( ajaxData.dataType == 'json' ){
 
     // 获取服务器返回的 json 对象
     jsonStr = xhr.responseText;
     json1 = eval('(' + jsonStr + ')'),
     json2 = (new Function('return ' + jsonStr))();
     ajaxData.callback(json2);
     // ajaxData.callback(JSON.parse(xhr.responseText)); // 原生方法,IE6/7 不支持
 
    } else
 
     ajaxData.callback(xhr.responseText);
 
   } else {
 
    ajaxData.error && ajaxData.error(xhr.responseText);
   }
  }
 };
 
 // 设置请求参数
 xhr.open(ajaxData.type, ajaxData.url);
 
 if( ajaxData.noCache == true ) xhr.setRequestHeader('If-Modified-Since', '0');
 
 if( ajaxData.data ){
 
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  xhr.send( ajaxData.data );
 
 } else {
? ?  
  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  xhr.send( null );
 }
 
 return xhr;
}
 
function post(ajaxData){
 
 ajaxData.type = 'POST';
 
 var _result = request(ajaxData);
 
 return _result;
}
 
function get(ajaxData){
 
 ajaxData.type = 'GET';
 
 ajaxData.data = null;
 
 var _result = request(ajaxData);
 
 return _result;
}

下面给出一个使用例子:

index.html

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>原生 JavaScript 实现 Ajax</title>
 <link rel="stylesheet" type="text/css" media="all" href="./common/common.css" />
 <style>
  #content {text-align: center; font-family: 'lucida Grande', 'Microsoft Yahei'}
  #content .btn_ctr {display: block; width: 120px; height: 30px; margin: 0 auto 20px; background: #53a7bb; color: #fff; font-weight: bold; font-size: 14px; line-height: 30px; text-decoration: none;
   border-radius: 4px;
  }
  #test {width: 280px; height: 130px; margin: 0 auto; padding: 15px; background: #fff; border-radius: 4px; text-align: left; }
 </style>
</head>
<body>
 
 <div id="header">
  <div id="header-content">
   <div id="header-inside">
    <p class="go-to-article"><a href="http://kayosite.com/css3-animation.html" title="打开原文" target="_blank" >Back To Article</a></p>
    <p class="go-to-blog"><a href="http://kayosite.com" title="进入我的博客 Kayo's Melody" target="_blank" >My Blog</a></p>
    <p class="copyright">Demo By Kayo © Copyright 2011-2013</p>
   </div>
   <h1>CSS3 Animation</h1>
  </div>
 </div>
 
 <div id="content">
  <a class="btn_ctr" href="javascript:;" onclick="get({url: './ajax.html', callback: function(out){document.getElementById('test').innerHTML = out;}})">Ajax 获取内容</a>
 
  <div id="test"></div>
 </div>
  
 <script>
  // Ajax 方法,这里不在重复列出
 </script>
</body>
</html>
ajax.html
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>ajax</title>
</head>
<body>
 <p>成功获取到这段文本</p>
</body>
</html>

具体的效果可以浏览完整 Demo 。

Javascript 相关文章推荐
javascript生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
javascript offsetX与layerX区别
Mar 12 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
JS触摸与手势事件详解
May 09 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
Vue实现table上下移动功能示例
Feb 21 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 Javascript
深入剖析JavaScript:Object类型
May 10 #Javascript
JavaScript的React Web库的理念剖析及基础上手指南
May 10 #Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 #Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 #Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 #Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 #Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 #Javascript
You might like
php获取url参数方法总结
2014/11/13 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
Python中为什么要用self探讨
2015/04/14 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
Python中创建二维数组
2018/10/17 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
python环境下安装opencv库的方法
2020/03/05 Python
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
俄罗斯游戏商店:Buka
2020/03/01 全球购物
毕业生找工作的求职信范文
2013/12/24 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
销售经理岗位职责
2015/01/31 职场文书
质检员工作总结2015
2015/04/25 职场文书
教师远程研修感悟
2015/11/18 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技