Ajax 構文の簡単な分析

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

Ajax 入門

Ajax は「Asynchronous Javascript And XML」の略で、「非同期の JavaScript と XML」を意味します。 Ajax を介して、ページをブロックすることなくサーバーにリクエストを送信し、データを操作できます。これは、非同期データ送信としても理解できます。 Ajax のおかげで、Web ページを部分的に更新するだけでデータの表示が更新されるため、不要なデータの量が削減され、ユーザー エクスペリエンスが大幅に向上し、ユーザーの待ち時間が短縮され、Web アプリケーションがより小さく高速になります。もっとフレンドリーに。

もちろん、上記は資格のある開発者であればよく知っている内容です。これから始める人向けに簡単に説明します。 Ajax の詳細については、W3School を参照してください: http://www.php.cn/

ネイティブ Ajax

基本的に、すべての最新のブラウザーはネイティブ Ajax の機能をサポートしています。以下にその方法を詳しく紹介します。ネイティブ JS を使用して Ajax リクエストを処理します。

1. 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");
}

2. パラメーターの構成

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 リクエストを作成します。通常、2 番目のパラメータは 'GET' または 'POST' です。非同期かどうかです。デフォルトは true です。

3.リクエストを送信します

基本的なパラメータ情報を設定した後、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 は 'text/plain; の Content-Type を使用してデータを送信します。 ' デフォルトでは、上記のパラメータに従って書かれた場合、最終的な送信フォームは次のようになります:

明らかに、これはサーバーが期待するデータ形式ではありません:

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

送信フォーマットは次のとおりです:

この方法で、処理のために JSON 文字列をバックグラウンドに直接渡すことができます。 もちろん、バックグラウンドもそれに応じて構成できます。

4. ステータスの監視

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 に加えて、

• onloadstart

• onprogress

• onabort

• ontimeout

• onerror

もあります。

• onloadend

やその他のイベント、興味のある学生直接行ってその有用性を実践してください。

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

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

1. 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://www.php.cn/

　　2.Vue.js中的Ajax

　　Vue.js作为目前热门的前端框架，其实其本身并不包含Ajax功能，而是通过插件的形式额外需要在项目中引用，其官方推荐Ajax插件为vue-resource，下面便是vue-resource的请求代码：

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

　　vue-resource支持Promise API，同时支持目前的Firefox, Chrome, Safari, Opera 和 IE9+浏览器，在浏览器兼容性上不兼容IE8，毕竟Vue本身也不兼容IE8。想了解更多的vue-resource的信息可以移步github文档：http://www.php.cn/

　　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属性。想了解更多的Angular Ajax的信息可以移步官方文档：http://www.php.cn/$http（可能需要翻墙）更多精彩内容关注微信公众号：全栈开发者中心（admin10000_com）

　　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的详细介绍可以移步：http://www.php.cn/

　跨域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的概念和流程，便可以轻松的在数据异步交互的时代游刃有余。

以上就是Ajax语法浅析的内容，更多相关内容请关注PHP中文网（www.php.cn）！