实例讲解使用原生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如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
Apr 20 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
php结合js实现多条件组合查询
May 28 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 Javascript
JavaScript实现商品评价五星好评
Nov 30 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 smarty模板引擎的6个小技巧
2014/04/24 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
PHP进程同步代码实例
2015/02/12 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
Python中常见的数据类型小结
2015/08/29 Python
pycham查看程序执行的时间方法
2018/11/29 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
HTML5图片预览实例分享
2014/06/04 HTML / CSS
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
应用艺术毕业生的自我评价
2013/12/04 职场文书
生物学学生自我评价
2014/01/17 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
员工安全生产承诺书
2014/05/22 职场文书
领导干部考核评语
2015/01/04 职场文书
护士年终个人总结
2015/02/13 职场文书
胡桃夹子观后感
2015/06/11 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书