AJAX的常用語法是什麼

我們都知道，  ajax目前已經是一門很普遍的技術了，本文主要介紹了原生JS中的ajax的實現原理以及XMLHttpRequest及promise的概念和流程。

Ajax是目前很普遍的技術，也是值得探討和研究的技術。本文將針對Ajax的發展過程並結合其在不同函式庫框架中的使用方式來和大家分享下Ajax的那些新舊語法。

Ajax簡介

Ajax全稱為“Asynchronous Javascript And XML”， 即“非同步JavaScript和XML”的意思。透過Ajax我們可以向伺服器發送請，在不阻塞頁面的情況下進行資料交互，也可以理解為非同步資料傳輸。在Ajax的幫助下我們的網頁只需局部刷新即可更新資料的顯示，減少了不必要的資料量，大大提高了使用者體驗，縮短了使用者等待的時間，使得web應用程式更小、更快，更友善。

當然以上都是司空見慣的內容了，作為一名合格的開發人員基本上都再熟悉不過了，這裡只為那些剛入門的新手做一個簡單的介紹。

原生Ajax

基本上所有現代的瀏覽器都支援原生Ajax的功能，以下就來詳細介紹下利用原生JS我們怎麼來發起和處理Ajax請求。

取得XMLHttpRequest物件

var xhr = new XMLHttpRequest(); // 取得瀏覽器內建的XMLHttpRequest物件

#如果你的專案應用程式不考慮低版本IE，那麼可以直接用上面的方法，所有現代瀏覽器(Firefox、Chrome、Safari 以及Opera) 都內建了XMLHttpRequest 物件。如果需要相容舊版本IE（IE5、IE6），那麼可以使用ActiveX 物件：

var xhr;
if (window.XMLHttpRequest) {
  xhr=new XMLHttpRequest();
} else if (window.ActiveXObject) {  // 兼容老版本浏览器
  xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

參數配置

有了XMLHttpRequest對象，我們還需要配置一些請求的參數資訊來完成數據交互，利用open方法即可：

var xhr;
if (window.XMLHttpRequest) {
  xhr=new XMLHttpRequest();
} else if (window.ActiveXObject) {
  xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
  xhr.open('GET', '/test/', true); // 以GET请求的方式向'/test/'路径发送异步请求
}

open方法為我們創建了一個新的http請求，其中第一個參數為請求方式，一般為'GET'或'POST'；第二個參數為請求url；第三個參數為是否非同步，預設為true。

發送請求

配置完了基本參數訊息，我們直接呼叫send方法發送請求，程式碼如下：

var xhr;
if (window.XMLHttpRequest) {
  xhr=new XMLHttpRequest();
} else if (window.ActiveXObject) {
  xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
  xhr.open('GET', '/test/', true); 
  xhr.send(); // 调用send方法发送请求
}

這裡需要注意的是如果使用GET方法傳遞參數，我們可以直接將參數放在url後面，例如'/test/?name=luozh&size=12';如果使用POST方法，那麼我們的參數需要寫在send方法裡，如：

xhr.open('POST', '/test/', true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 将请求头设置为表单方式提交
xhr.send('name=luozh&size=12');

最終會以Form Data的形式傳遞：

如果不設定請求頭，原生Ajax會預設使用Content-Type是'text/plain;charset=UTF-8'的方式發送資料,如果按照上面的參數書寫形式，我們最終傳輸的形式這樣的：

#顯然這並不是伺服器期望的資料格式，我們可以這樣寫：

xhr.open('POST', '/test/', true);
xhr.send(JSON.stringify({name: 'luozh', size: 12}));

這樣我們可以直接傳遞JSON字串給後台處理，當然後台也許進行對應配置。

監控狀態

傳送完Ajax請求之後，我們需要針對伺服器回傳的狀態進行監控並進行對應的處理，這裡我們需要使用onreadystatechange方法，程式碼如下：

var xhr;
if (window.XMLHttpRequest) {
  xhr=new XMLHttpRequest();
} else if (window.ActiveXObject) {
  xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
  xhr.open('GET', '/test/', true);   // 以GET请求的方式向'/test/'路径发送异步请求
  xhr.send();
  xhr.onreadystatechange = function () {  // 利用onreadystatechange监测状态
    if (xhr.readyState === 4) {  // readyState为4表示请求响应完成
      if (xhr.status === 200) {  // status为200表示请求成功
        console.log('执行成功');
      } else {
        console.log('执行出错');
      }  
    }
  }
}

上面我們利用onreadystatechange監控狀態，並在內部利用readyState取得目前的狀態。 readyState一共有5個階段，當其為4時表示回應內容解析完成，可以在客戶端呼叫了。當readyState為4時，我們又透過status來取得狀態碼，狀態碼為200時執行成功程式碼，否則執行出錯程式碼。

當然我們可以用onload來取代onreadystatechange等於4的情況，因為onload只在狀態為4的時候才被調用，程式碼如下

xhr.onload = function () {  // 调用onload
  if (xhr.status === 200) {  // status为200表示请求成功
    console.log('执行成功');
  } else {
    console.log('执行出错');
  }  
}

然而需要注意的是，IE對onload這個屬性的支持並不友善。

 除了onload還有:

1.onloadstart
2.onprogress
3.onabort
4.ontimeout
5.onerror
6.onloadend

等事件，有興趣的同學可以親自去實踐它們的用處。

以上便是原生Ajax請求資料的常見程式碼。

其他函式庫框架中的Ajax

jQuery中的Ajax

jQuery作為一個使用人數最多的函式庫，其Ajax很好的封裝了原生Ajax的程式碼，在相容性和易用性方面都做了很大的提高，讓Ajax的呼叫變得非常簡單。以下便是一段簡單的jQuery的Ajax程式碼：

$.ajax({
  method: 'GET', // 1.9.0本版前用'type'
  url: "/test/",
  dataType: 'json'
})
.done(function() {
  console.log('执行成功');
})
.fail(function() {
  console.log('执行出错');
})

與原生Ajax不同的是，jQuery中預設的Content-type是'application/x-www-form-urlencoded; charset=UTF-8' , 想了解更多的jQuery Ajax的信息可以移步官方文檔：http://api.jquery.com/jquery.ajax/

Vue.js中的Ajax

#Vue. js作為目前熱門的前端框架，其實其本身並不包含Ajax功能，而是透過插件的形式額外需要在專案中引用，其官方推薦Ajax插件為vue-resource，下面便是vue-resource的請求代碼：

Vue.http.get('/test/').then((response) => {
  console.log('执行成功');
}, (response) => {
  console.log('执行出错');
});

3.Angular.js中的Ajax

這裡Angular.js中的Ajax主要指Angular的1.×版本，因為Angular2目前還不建議在生產環境中使用。

var myApp = angular.module('myApp',[]);
var myCtrl = myApp.controller('myCtrl',['$scope','$http',function($scope, $http){
  $http({
    method: 'GET',
    url: '/test/',
    headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'} 
  }).success(function (data) {
    console.log('执行成功');
  }).error(function () {
    console.log('执行出错');
  });
}]);

在Angular中，我们需要在控制器上注册一个$http的事件，然后才能在内部执行Ajax。Angular的Ajax默认的Content-type是'application/json;charset=UTF-8'，所以如果想用表单的方式提交还需设置下headers属性。

4.React中的Ajax

在React中我比较推荐使用fetch来请求数据，当然其不仅适用于React，在任何一种框架如上面的Vue、Angular中都可以使用，因为其已经被目前主流浏览器所支持，至于其主要功能和用法，我在下面会做下讲解。

Fetch API

Fetch API 是基于 Promise 设计，由于Promise的浏览器兼容性问题及Fetch API本身的兼容问题，一些浏览器暂时不支持Fetch API，浏览器兼容图如下：

当然我们可以通过使用一些插件来解决兼容性问题，比如：fetch-polyfill、es6-promise、fetch-ie8等。

使用Fetch我们可以非常便捷的编写Ajax请求，我们用原生的XMLHttpRequst对象和Fetch来比较一下：

XMLHttpRequst API
// XMLHttpRequst API
var xhr = new XMLHttpRequest();
xhr.open('GET', '/test/', true);
xhr.onload = function() {
  console.log('执行成功');
};
xhr.onerror = function() {
  console.log('执行出错');
};
xhr.send();
Fetch API 
fetch('/test/').then(function(response) {
  return response.json();
}).then(function(data) {
  console.log('执行成功');
}).catch(function(e) {
  console.log('执行出错');
});

可以看出使用Fetch后我们的代码更加简洁和语义化，链式调用的方式也使其更加流畅和清晰。随着浏览器内核的不断完善，今后的XMLHttpRequest会逐渐被Fetch替代。关于Fetch的详细介绍可以移步：https://segmentfault.com/a/1190000003810652

跨域Ajax

介绍了各种各样的Ajax API，我们不能避免的一个重要问题就是跨域，这里重点讲解下Ajax跨域的处理方式。

处理Ajax跨域问题主要有以下4种方式：

1.利用iframe

2.利用JSONP

3.利用代理

4.利用HTML5提供的XMLHttpRequest Level2

第1和第2种方式大家应该都非常熟悉，都属于前端的活，这里就不做介绍了，这里主要介绍第3和第4种方式。

利用代理的方式可以这样理解：

通过在同域名下的web服务器端创建一个代理：

北京服务器(域名:www.beijing.com)

上海服务器(域名：www.shanghai.com)

比如在北京的web服务器的后台(www.beijing.com/proxy-shanghaiservice.php)来调用上海服务器(www.shanghai.com/services.php)的服务，然后再把访问结果返回给前端，这样前端调用北京同域名的服务就和调用上海的服务效果相同了。

利用XMLHttpRequest Level2的方式需要后台将请求头进行相应配置：

// php语法
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET,POST');

以上的*号可以替换成允许访问的域名，*表示所有域名都可以访问。

由此可见，第3和第4种方式主要是后台的活，前端只需调用就可以。

总结

无论Ajax的语法多么多变，无论库和框架如何封装Ajax，其只是一种实现异步数据交互的工具，我们只需理解原生JS中Ajax的实现原理，了解XMLHttpRequest及promise的概念和流程，便可以轻松的在数据异步交互的时代游刃有余。

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

CSS的文本字体颜色如何设置

css里的font文字怎么设置

 Css3中的transform 渐变属性怎么使用

以上是AJAX的常用語法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！