ホームページ > 記事 > ウェブフロントエンド > Ajax 構文の簡単な分析
Ajax は現在非常に一般的な技術であり、議論や研究に値する技術でもあります。この記事では、Ajax の開発プロセスと、Ajax がさまざまなライブラリ framework でどのように使用されるかに焦点を当てます。 Ajax の古い構文と新しい構文
JS の使用方法を詳しく説明します。 Ajax リクエストを開始して処理するため
1. XMLHttpRequest オブジェクトを取得しますvar xhr = new XMLHttpRequest(); // 获取浏览器内置的XMLHttpRequest对象
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 リクエストを作成します。最初のパラメーターはリクエスト メソッド (通常は 'GET' または 'POST') です。はリクエストの URL で、3 番目のパラメータは非同期かどうかで、デフォルトは 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 メソッドを使用してパラメータを渡す場合、POST メソッドを使用する場合は '/test/?name=luozh&size=12' のようにパラメータを URL の直後に置くことができることに注意してください。次に、パラメーターを send メソッドに次のように記述する必要があります。 :
xhr.open('POST', '/test/', true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 将请求头设置为表单方式提交 xhr.send('name=luozh&size=12');最終的にはフォーム データの形式で配信されます: リクエスト ヘッダーが設定されていない場合、ネイティブ Ajax はContent-Type がデフォルトで 'text/plain; charset=UTF-8' の場合、上記のパラメータ記述形式によれば、最終的な送信形式は次のとおりです: 明らかに、これは、
xhr.open('POST', '/test/', true); xhr.send(JSON.stringify({name: 'luozh', size: 12}));最終的な送信形式は次のとおりです: このように、処理のために JSON
string をバックグラウンドに直接渡すことができます。 もちろん、バックグラウンドを設定することもできます。それに応じて。
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 の場合、ステータスを通じて
ステータス コード を取得します。ステータス コードが 200 の場合は成功コードが実行され、それ以外の場合はエラー コードが実行されます。
もちろん、onload を使用して、onreadystatechange が 4 に等しい状況を置き換えることもできます。onload は状態が 4 の場合にのみ呼び出されるためです。コードは次のとおりです:xhr.onload = function () { // 调用onload if (xhr.status === 200) { // status为200表示请求成功 console.log('执行成功'); } else { console.log('执行出错'); } }ただし、IE はサポートされていないことに注意してください。 onload 属性
もあります。
等事件,有兴趣的同学可以亲自去实践它们的用处。
以上便是原生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功能,而是通过插件的形式额外需要在项目中引用,其官方推荐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文档:https://github.com/vuejs/vue-resource
这里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的信息可以移步官方文档:https://docs.angularjs.org/api/ng/service/$http(可能需要翻墙)更多精彩内容关注微信公众号:全栈开发者中心(admin10000_com)
在React中我比较推荐使用fetch来请求数据,当然其不仅适用于React,在任何一种框架如上面的Vue、Angular中都可以使用,因为其已经被目前主流浏览器所支持,至于其主要功能和用法,我在下面会做下讲解。
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 API,我们不能避免的一个重要问题就是跨域,这里重点讲解下Ajax跨域的处理方式。
处理Ajax跨域问题主要有以下4种方式:
利用iframe
利用JSONP
利用代理
利用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 をどのようにカプセル化しても、Ajax は非同期データ対話を実現するためのツールにすぎません。ネイティブ JS での Ajax の実装原理を理解し、理解する必要があるだけです。 XMLHttpRequest、Promise、およびプロセスの概念を活用すれば、非同期データ対話の時代を簡単に乗り切ることができます。
以上がAjax 構文の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。