AJAXの一般的な構文は何ですか

ajax が現在非常に一般的なテクノロジーであることは誰もが知っています。この記事では、主にネイティブ JS での ajax の実装原理と、XMLHttpRequest と Promise の概念とプロセスを紹介します。

Ajax は現在非常に一般的な技術であり、議論や研究に値する技術でもあります。この記事では、Ajax の開発プロセスに基づいて、Ajax の新しい構文と古い構文を共有し、さまざまなライブラリ フレームワークで Ajax がどのように使用されているかを説明します。

Ajax入門

Ajaxとは「Asynchronous Javascript And XML」の略で、「非同期のJavaScriptとXML」を意味します。 Ajax を介して、ページをブロックすることなく、データ対話のためのリクエストをサーバーに送信できます。これは、非同期データ送信としても理解できます。 Ajax のおかげで、Web ページを部分的に更新するだけでデータの表示が更新されるため、不要なデータの量が削減され、ユーザー エクスペリエンスが大幅に向上し、ユーザーの待ち時間が短縮され、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' です。3 番目のパラメータはリクエスト 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 メソッドを使用してパラメーターを渡す場合は、 ' /test/?name=luozh&size=12' のように、パラメータを URL の後に直接置くことができます。POST メソッドを使用する場合は、次のようにパラメータを send メソッドに記述する必要があります。最終的にはフォーム データの形式で渡されます。

リクエスト ヘッダーが設定されていない場合、ネイティブ Ajax はデフォルトで「text/plain; charset=UTF-8」の Content-Type を使用してデータを送信します。上記のパラメータを使用すると、送信の最終形式は次のようになります:

明らかに、これはサーバーが期待するデータではありません。形式は次のように記述できます:

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

このようにして、JSON 文字列を直接に渡すことができます。もちろん、背景をそれに応じて設定することもできます。

ステータスの監視

Ajax リクエストを送信した後、サーバーから返されたステータスを監視し、それに応じて処理する必要があります。ここでは、onreadystatechange メソッドを使用する必要があります。コードは次のとおりです。

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

上記では、onreadystatechange を使用して次のことを行います。ステータスを監視し、内部的にreadyStateを使用して現在の状態を取得します。 readyState には合計 5 つの段階があり、4 の場合、応答内容が解析され、クライアントで呼び出すことができることを意味します。 readyState が 4 の場合、status を通じてステータス コードを取得します。ステータス コードが 200 の場合は成功コードが実行され、それ以外の場合はエラー コードが実行されます。

もちろん、onload を使用して、onreadystatechange が 4 に等しい状況を置き換えることもできます。onload は状態が 4 の場合にのみ呼び出されるためです。 コードは次のとおりです

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('执行出错');
      }  
    }
  }
}

ただし、IE は、 onload 属性。

onload に加えて、

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

やその他のイベントもあり、興味のある学生は実際にその有用性を実践できます。

上記は、ネイティブ Ajax リクエスト データの共通コードです。

他のライブラリ フレームワークの Ajax

jQuery の Ajax

jQuery は、ネイティブ Ajax コードを非常によくカプセル化しており、互換性と使いやすさの点で多くの成果を上げています。大幅な改善により、Ajax 呼び出しが非常に簡単になりました。以下は簡単な jQuery Ajax コードです:

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

ネイティブ Ajax とは異なり、jQuery のデフォルトの Content-type は「application/x-www-form-urlencoded;」です。 jQuery Ajax については、公式ドキュメントを参照してください: http://api.jquery.com/jquery.ajax/

Vue.js の Ajax

Vue.js は現在人気のあるフロントエンド フレームワークですが、それ自体がAjax 関数は含まれていませんが、プラグインの形式でプロジェクト内で参照する必要があります。以下は vue-resource のリクエスト コードです。

3. Angular.js の Ajax

Angular2 は現在運用環境での使用が推奨されていないため、ここでの Angular.js の Ajax は主に Angular の 1.x バージョンを指します。

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 中国語 Web サイトの他の関連記事を参照してください。