AJAX
AJAX (非同期 JavaScript および XML) は、非同期 Web アプリケーションの作成に使用される、相互に関連するクライアントサイド開発手法の集まりです。
AJAX を使用すると、Web アプリケーションは、表示される Web ページのユーザーエクスペリエンスに影響を与えることなく、バックグラウンドでサーバーとの間で情報を送受信できます。
GlideAjax
GlideAjax クラスを使用すると、クライアントからサーバーサイドのコードを実行できます。GlideAjax 呼び出しはスクリプトインクルードにパラメーターを渡し、命名規則を使用してこれらのパラメーターを使用できるようにします。
- 使用するスクリプトインクルードの名前で GlideAjax を初期化します。
- スクリプトインクルードを作成するときは、名前フィールドをクラス名とまったく同じに設定する必要があります。
- スクリプトインクルードを作成するときは、[クライアント呼び出し可能] チェックボックスをオンにする必要があります。
- パラメーター sysparm_name を指定します。GlideAjax は sysparm_name を使用して、使用する関数を検索します。
- 追加のパラメーターを渡すことができます。すべてのパラメーターは「sysparm_」で始まる必要があります。事前定義されたパラメーター名は使用しないでください。
- sysparm_name
- sysparm_function
- sysparm_value
- sysparm_type
- 次に、getXML() または getXMLWait() 関数を使用してコードが実行されます。
詳細については、GlideAjax API を参照してください。
非同期 GlideAjax の例
非同期 GlideAjax スクリプトには、クライアント側のコードとサーバー側のコードの 2 つの部分があります。
Hello World:サーバーから値を返す
クライアント側
このコードはクライアント (Web ブラウザー) で実行されます。クライアントスクリプト を通常通りに作成します。これにより、パラメーターがサーバーに送信され、サーバーが処理を行います。クライアントが結果を待たないように、コールバック関数を使用して結果を返し、getXML() 関数に渡します(この場合は「HelloWorldParse」と呼ばれます)。
var ga = new GlideAjax('HelloWorld');
ga.addParam('sysparm_name', 'helloWorld');
ga.addParam('sysparm_user_name', "Bob");
ga.getXML(HelloWorldParse);
function HelloWorldParse(response) {
var answer = response.responseXML.documentElement.getAttribute("answer");
alert(answer); }サーバー側
HelloWorld」に設定する必要があります。- sys_script_includeコードは AbstractAjaxProcessor クラスを拡張し、Glide AJAX を有効にする必要があります。
- 「_」で始まる関数名はプライベートと見なされ、クライアントから呼び出すことはできません。
- 「
initialize」を含む AbstractAjaxProcessor のメソッドは上書きしないでください。上書きしたスーパークラスオブジェクトのメソッドを呼び出すことはできますが、複雑なため、総じて避けることをお勧めします。
var HelloWorld = Class.create();
HelloWorld.prototype = Object.extendsObject(AbstractAjaxProcessor, {
helloWorld:function() { return "Hello " + this.getParameter('sysparm_user_name') + "!"; } ,
_privateFunction: function() { // this function is not client callable
}
});これにより、フォームを訪問すると「Hello Bob!」というアラートボックスが表示されます。複数の値を返す
応答は XML ドキュメントであるため、単一の answer 値しか返せないわけではありません。複数の XML ノードと属性を返す、より複雑な例を次に示します。
AJAX プロセッサースクリプトインクルード
/*
* MyFavoritesAjax script include Description - sample AJAX processor returning multiple value pairs
*/
var MyFavoritesAjax = Class.create();
MyFavoritesAjax.prototype = Object.extendsObject(AbstractAjaxProcessor, {
/*
* method available to client scripts call using:
* var gajax = new GlideAjax("MyFavoritesAjax");
* gajax.addParam("sysparm_name","getFavorites");
*/
getFavorites: function() { // build new response xml element for result
var result = this.newItem("result");
result.setAttribute("message","returning all favorites");
//add some favorite nodes with name and value attributes
this._addFavorite("color","blue");
this._addFavorite("beer","lager");
this._addFavorite("pet","dog");
},
// all items are returned to the client through the inherited methods of AbstractAjaxProcessor
_addFavorite: function(name, value) {
var favs = this.newItem("favorite");
favs.setAttribute("name",name);
favs.setAttribute("value",value); },
type:"MyFavoritesAjax"
});
クライアントスクリプト
// new GlideAjax object referencing name of AJAX script include
var ga = new GlideAjax("MyFavoritesAjax");
// add name parameter to define which function we want to call
// method name in script include will be getFavorites
ga.addParam("sysparm_name","getFavorites");
// submit request to server, call ajaxResponse function with server response
ga.getXML(ajaxResponse);
function ajaxResponse(serverResponse) {
// get result element and attributes
var result = serverResponse.responseXML.getElementsByTagName("result");
var message = result[0].getAttribute("message");
//check for message attribute and alert user
if(message) alert(message);
//build output to display on client for testing
var output = "";
// get favorite elements
var favorites = serverResponse.responseXML.getElementsByTagName("favorite");
for(var i = 0; i < favorites.length; i ++) {
var name = favorites[i].getAttribute("name");
var value = favorites[i].getAttribute("value");
output += name + " = " + value + "\n "; }
alert(output); }
XML 応答
<xml sysparm_max= "15" sysparm_name="getFavorites" sysparm_processor="MyFavoritesAjax">
<result message = "returning all favorites"></result>
<favorite name = "color" value = "blue"></favorite>
<favorite name = "beer" value = "lager"></favorite>
<favorite name = "pet" value = "dog"></favorite>
</xml>
同期 GlideAjax の例
GlideAjax 応答がないとスクリプトを続行できない場合は、同期を使用します。これにより、応答を受信するまでセッションが停止します。
ユースケースで、GlideAjax 応答を受信するまでそれ以上の処理を実行できないようにする必要がある場合は、getXMLWait() を使用できます。ただし、これによりコードの速度が低下し、応答を受信するまでユーザーセッションがロックされるため、通常はコールバック関数とともに getXML() を使用することをお勧めします。
getXMLWait() メソッドはスコープ対象のアプリケーションでは使用できません。
このコードにより、クライアント側でアラートが生成され、「The Server Says Hello Bob!」と表示されます。
var ga = new GlideAjax('HelloWorld') ;
ga.addParam('sysparm_name','helloWorld');
ga.addParam('sysparm_user_name',"Bob");
ga.getXMLWait();
alert(ga.getAnswer());var HelloWorld = Class.create();
HelloWorld.prototype = Object.extendsObject(AbstractAjaxProcessor, {
helloWorld: function()
{ return "The Server Says Hello " + this.getParameter('sysparm_user_name') + "!"; } } );AJAXClientHelper
Ajax クライアントから値を取得するためのヘルパー関数を Ajax クライアントに提供します。
使用する状況
Ajax クライアントから値を取得する必要がある場合は、このスクリプトインクルードを使用します。
メソッドの概要
| メソッドの概要 | 説明 |
|---|---|
| getDisplay() | 選択リストから表示値を取得します。 |
メソッドの詳細
| API メソッド | 説明 | 入力パラメーター | 出力リターン |
|---|---|---|---|
| getDisplay() | 選択リストから表示値を取得します。 | なし | 表示値。 |
cURL
// getDisplay
(function(table, sysId) {
var ga = new GlideAjax('AjaxClientHelper');
ga.addParam("sysparm_name", "getDisplay");
ga.addParam('sysparm_table', 'incident');
ga.addParam('sysparm_value', "0598b22b877313003c1c8467a7cb0b71");
ga.getXMLWait();
return ga.getAnswer();
}("incident", "0598b22b877313003c1c8467a7cb0b71")); // Returns 'INC0010001'