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

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

WBOY

Release： 2016-05-19 10:42:40

Original

1260 people have browsed it

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

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

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

Copy after login

在这里，我们创建了一个能向服务器发出 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); // 在此次请求中发生的错误
  }
 }
}

Copy after login

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 {
&#63; &#63;  
  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;
}

Copy after login

下面给出一个使用例子：

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 &copy; 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>

Copy after login

ajax.html

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>ajax</title>
</head>
<body>
 <p>成功获取到这段文本</p>
</body>
</html>

Copy after login

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

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

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