This guide provides some background info on Ajax, and then jumps right in and gets you started with examples.このガイドでは、アヤックスにいくつかの背景情報を提供すると右にジャンプしての例で開始されます。
JavaScript has been the main use for XMLHttpRequest objects for a good number of years now, but only recently did it start to gain some “fame”. JavaScriptがするが 、 年の良い番号をXMLHttpRequestをオブジェクトの主な利用されているのはつい最近、いくつかの " 名声を得るために開始した" 。 A lot of the ruckus has to do with the many advanced web applications having web developers that see it, drool and want their own site to have those same exact advanced applications/features. この騒ぎの多くは、多くの高度なWebアプリケーションは、よだれそれを見ると、自分のサイトが同じような高度なアプリケーション/機能を持つWeb開発者が関係している。 But some of it also has to do with the group of people at AdaptivePath who have named this application Ajax しかし、 一部の人々のグループでもAdaptivePathでは、このアプリケーションをAjaxベースの名前が関係している
Ajax Beginners: What in the world is Ajax? アヤックス初級：どのように世界アヤックスは何ですか？
In a nutshell? 一言で言えば？ Well Ajax is a solution to web interfaces. AjaxベースのWebインターフェイスをよくするためのソリューションです。
Commonly, the web user enters some data or makes a simple choice, and clicks a button finalizing that choice or data entry and sends the data over to the server. 一般には、 Webユーザーの一部のデータを入力するか、シンプルな選択をすると、ボタンを選択、またはデータ入力し、サーバーへのデータ送信の締めくくりをクリックします。 The server hastily observes the data and sends back an entire new web page. 急いでは、サーバーのデータを観察して全体を新しいWebページを送信します。 Having to reload a page every time you want to do something is very annoying, disjunctive and extremely time-consuming for the user. ページをリロードするたびに何かがあって非常に分離し、非常に時間がかかる、利用者の迷惑です。 XMLHttpRequest resurfaces the browser-server interaction to behind the scenes, so the user can just keep on playing with the same page, even while elements on the page are talking to the server! XMLHttpRequestを舞台裏ため、ユーザーは、同じページで遊んでも、一方では、ページの要素は、サーバに話をしているサーバーの相互作用を保つことができるのブラウザresurfaces ！
With JavaScript we’ve always been able to server-side script without anything happening in the browser by using a few classic tricks up our sleeves. JavaScriptで、われわれは常にしてサーバーに成功している側のスクリプトがブラウザには何も我々の袖をいくつかの古典的トリックを使用しての出来事。
Caching form data to a file with JavaScript on a server is good, but this usually doesn’t return any useful information to the JavaScript that calls it, so its effectiveness is very limited. JavaScriptでのファイルには、サーバー上のフォームデータのキャッシュ良いですが、これは、通常はJavaScriptがので、その効果は非常に限られているの呼び出しには有用な情報を返しません。 Ajax, however, can get a full parcel of data back from the script it calls. アヤックスは、コールバックは、スクリプトからのデータの完全な小包を得ることができます。 Hence the “XML” part of the name - which really is just there for looks of sorts, kind of like the “Java” part of JavaScript, because the returned data can be plain text or whatever you like, if XML isn’t your preferred choice. したがって、その名の" XML "の部分-これは非常にわずかに見えるある種の 、 のようなものですJ avaScriptの" J ava"の一部のようなので、返されたデータをテキストにしたり、どのような場合のように、 X MLをされていない場合、お客様の好んで選択します。
This alone opens up so many exciting possibilities. これだけ多くのエキサイティングな可能性を開きます。 Every form submission, every JavaScript event, and whatever else application, can now interact with server-side databases and processing power! すべてのフォームを提出、すべてのJavaScriptのイベントは、どのような他のアプリケーションで、サーバーとやり取りすることができます側のデータベースとの処理能力！ Data retrieval, password authentication, image generation - you just name it, Ajax can activate it. データ検索、パスワード認証、画像生成-あなたには、名前、アヤックス、アクティブにすることができます。
Putting Ajax Into Practice アヤックスにパットの練習をする
The only thing that limits Ajax-enhanced web application is your imagination and by browser support. 唯一のことは限界アヤックス的に強化されたWebアプリケーションのあなたの想像力やブラウザのサポートによるものです。 Mozilla-based browsers can do it, Safari, and newer versions of Internet Explorer, and Opera 8 but not Opera 7. Mozillaベースのブラウザ 、 およびInternet Explorerの新しいバージョンは、 Safariを行うことができるとOpera 8ではなく、オペラ7 。 It’s best to slot in an alternative way of doing things for users who aren’t as witty as you’d hope for them to be. 機知に富んだ人としては最高のスロットにされていないとしてあなたのためになることを期待するユーザーのための代替方法で物事のだ。 Also, Internet Explorer does things somewhat differently (most definitely) from all the other browsers, so it’s pretty essential to work the code to account for the irksome 80% of the population who rely on Explorer. また、 Internet Explorerのことを多少異なります（最も確実）他のすべてのブラウザから、ないので、かなりのコードを仕事に欠かせないのは、エクスプローラに頼る人口の80 ％を占めてうんざりしてください。
Now to the exciting part! これで、エキサイティングな部分に！ Let’s generate a straightforward application that can accept input from the user, passes it to some PHP on the server that checks it against a database, and returns the result to the browser in use. のは、ユーザーからの入力を受け付けることができる簡単なアプリケーションを生成しようPHPには、いくつかのサーバーに渡しますが、データベースに対してチェックして、ブラウザを使用して、結果を返します。 We assimilate it in three parts. 私たちは3つの部分で吸収する。
First, we need an HTML form. まず、 HTMLフォームが必要です。 As you’ can see below: あなたの下を見ることができます：
<html> <html>次 <head> <head>タグ <title>Report</title> <title>レポート< /タイトル> <script type='text/javascript' src='xhr.js'></script> </head> <body> <form action="fallbackpage.php" method="post"> <script type='text/javascript' src='xhr.js'> < /スクリプト> < / head >のの<body> <form action="fallbackpage.php" method="post"> <p>Welcome, student. <p>ようこそ、学生。 Please enter your essay here:<textarea name="essay" id="essay">あなたのごエッセイを入力してください： <textarea name="essay" id="essay"> </textarea> <input type="submit" name="submit" value="Submit" onClick="return < /テキストエリア> <入力タイプ= " = " " = "送信は" onclick値を提出= "リターン"という名前を提出 grade(this.form.essay.value);">等級（ this.form.essay.value ） ; " > </p> < / p > </form> < /フォーム> </body>と< / body > </html < / HTMLの
Note: For users without proper support for our script ( named xhr.js ), the form will just simply submit to the fallback page at fallbackpage.php . Ok, this is where the JavaScript comes in, we’ll take it slow. 注記：我々のスクリプトのための適切なサポートなしでユーザの場合（ ） は 、 形だけで は単純にフォールバックページにfallbackpage.phpで提出する予定だ という名前xhr.js 。 オーケー、これはここでは、 JavaScriptでは、我々はゆっくりで行きます。
function grade(essay) {機能グレード（エッセイ） （ The first thing we have to do is initialize the object. 私たちのすべきことは、まず最初にオブジェクトを初期化されています。 There are two ways we must do this, for different browsers. この操作を行う必要がありますが我々の2つの方法は、別のブラウザ用。
// Mozilla version / / Mozillaをバージョン if (window.XMLHttpRequest) { （ window.XMLHttpRequest ） （ xhr = new XMLHttpRequest(); xhr =新しいXMLHttpRequestを（ ） ; } ） // IE version / / IEのバージョン else if (window.ActiveXObject) {他の人の場合（ window.ActiveXObject ） （ xhr = new ActiveXObject("Microsoft.XMLHTTP"); xhr =新しいActiveXObject （ " Microsoft.XMLHTTP " ） ; } ）
We then escape the user input to make it URL-safe: 私たちはそれに安全なURLを作るには、ユーザー入力を逃れる：
essay=encodeURIComponent(essay);エッセイ= encodeURIComponent （エッセイ） ;
and use the open method of the object to open a new connection to the PHP script: とは、 PHP スクリプトには、新しい接続を開くときは、オブジェクトのopenメソッドを使用する：
xhr.open("POST","grade.php"); xhr.open （の" POST " 、 " grade.php " ） ;
The method requires two arguments: first, the HTTP method (GET or POST) ; second, the URL of the script. A quick HTTP header asserts the script for what it’s getting, and then the send method conveys the actual request: メソッド、 HTTPメソッド （ GETまたはPOST ） ; 2つ目は 、 スクリプトのURLです。クイック HTTPヘッダをクリックし、メソッドを送信するためのスクリプトは何を得るの主張は、実際のリクエストを表す 2つの引数：最初に必要な条件：
xhr.setRequestHeader( xhr.setRequestHeader （ 'Content-Type', ' Content - Typeの' 、 'application/x-www-form-urlencoded; charset=UTF-8'); xhr.send(essay); 'アプリケーション/ × -にw ww-フォーム- u rlencodedで、文字セット= U TF- 8を' ） ; （エッセイ） x hr.send。
This last step isn’t necessary for GET requests, wherein all the data can be contained in the query string of the URL. この最後のステップは、いかにしてすべてのデータは、 URLのクエリ文字列に含まれることができるために必要なGETリクエストされていません。
Obtaining Final Results 最終的な結果を取得する
We’re finally ready to see if the HTTP request we made worked. やっと仕事をした場合はHTTPリクエストを参照する準備が整いました。 The readyState property counts up from zero during the request, and shows 4 when the server page has been loaded successfully. の readyState プロパティをゼロからのリクエストの間に、カウントとは、サーバーが正常にロードされている4ページが表示されます。
xhr.onreadystatechange=function() { xhr.onreadystatechange =関数（ ） （ if (xhr.readyState==4) { （ xhr.readyState == 4 ） （
If indeed the actual request worked, then we can get the output of the server-side script by querying the responseText property, which contains a string. もし実際には、実際の仕事を要求し、我々は 、 文字列が含まれているresponseTextプロパティーを照会し、 サーバー 側のスクリプト の 出力 を 得ることができます。 For more of a complex server script output, a responseXML property, which can hold a full document object of XML data, is an option also accessible. は、 XML データの完全なドキュメントオブジェクトを保持することができますサーバーは、 複雑な スクリプトの出力は、 responseXMLプロパティは、より多くの場合は、オプションもアクセス可能です。
grade = xhr.responseText;等級= xhr.responseText ; alert ("Nice essay. Your grade is " + grade);アラート（ "ニースエッセイ。あなたの等級"です+等級） ; } ） return false;復帰はfalse ; } ）
In conclusion, the third component consist of PHP script, which basically lives on the server and waits patiently for the JavaScript to pass it some juicy data so it can thrive. 結論としては、 3番目のコンポーネントは、基本的にはサーバー上の生命、辛抱強くはJavaScriptを待ちますPHPスクリプトは、成長することができますので、いくつかのジューシーなデータを渡すために構成されます。 This example uses some PHP, but any language you like — Ruby, Perl, C, ASP — can address your needs as well. この例では 、 PHPを使用していましたが、あなたのような任意の言語-R ubyとは、 P erlや、 C 、 A SPの-お客様のニーズにも対応できます。 The core of this example script is a natural-language function called grade_essay() that grades student essays from 1 to 100, but I will redact that part to conserve space. この例スクリプトのコアは、自然言語機能grade_essay 呼ばれています （ ）は、 1 学年の学生からのエッセイを100けど、スペースを節約することredact一部れます。
<?php < ？ phpの function grade_essay($essay) {関数grade_essay （ $エッセイ） （ return strlen($essay);戻りstrlen （ $エッセイ） ; } ） $essay = urldecode(implode(file('php://input'))); $エッセイ= urldecode （ （ （ ' PHPファイル：破/ /入力'))); $grade = grade_essay($essay); $ grade_essay級= （ $エッセイ） ; echo $grade;等級$エコー; ?> ？ >
The php://input grabs the POST data, which gets put into a string, decoded and passed to the clever grading algorithm. は 、 php ： / /入力 取得は、文字列、デコードに入れ格付を取得し、巧妙なアルゴリズムに渡されるように、 POSTデータ、 。 The algorithm returns a numeric grade. このアルゴリズムは、 数値の等級を返します。 Lastly, we just output the grade with echo - ordinarily, this would display in the browser, but since the PHP script is running “behind the scenes,” the string output is simply returned to the JavaScript that called it. 最後に、我々だけでは、出力エコーグレード -通 常以来、 P HPスクリプト"を実行している舞台裏で、これはブラウザでは、 "文字列を出力するだけのJ avaScriptと呼ばれるに返されることが表示される。 If you need structured data, an XML document would be output with an echo statement in just the same way, but the content-type of the output page basically must be set to text/xml . 場合でも、同じ方法では、エコーステートメントで出力されるが、 出力ページのコンテンツタイプは基本的にtext / xmlに設定する必要がありますデータは、 XML文書の構造を持つ 必要があります 。
What the user sees is this: She/He types their essay into the text area in the browser, clicks Submit, and within instants an alert box pops up giving him/her a final grade on the essay.ユーザーが何を考えているのです：テキスト領域に彼女 / 彼の種類のエッセイのブラウザでは、送信クリックすると瞬間には、警告ダイアログを彼に与えポップス/エッセイで、彼女の最終学年。 Invisibly, the essay has been sent to the server, read and evaluated by a team of PHP elves, and inevitably returned with a grade, without ever having to reload the page. いつのまにやら、サーバーのエッセイを読んでから、送信されているPHPのエルフのチームによって、必然的に1年生の評価は、これまでは、 ページをリロードすることなく帰国した。 The user can modify her essay and resubmit it continuously. 彼女のエッセイは、ユーザーを変更できるように、継続的に再送信します。
And that’s the general substance of the almost magical XMLHttpRequest object!とは、ほとんど魔法のXMLHttpRequestをオブジェクトの一般的な物質だよ！ The example is pretty simple and straight forward, but the uses of the object can be highly, multi clever .まっすぐ進むとかなりの例が、オブジェクトの使用の高い、多賢いすることができます簡単です。
For further inspiration and great examples of ingenious Ajax applications you can momentarily steer away from SimpleHelp.Net and visit さらにひらめきと独創的なAjaxアプリケーションの偉大な例については、一時的に舵を取ることができるから離れたSimpleHelp.Netや訪問 iGoogle iGoogleを , 、 Pageflakes Pageflakesは , 、 Netflix ネットフリックス and および Netvibes Netvibesの . 。
However, the data and functions that Ajax sends and acts out is simply up to you. しかし、データや機能は、 Ajaxを送信しているだけを表示する行為。
{ 0 comments… （ 0コメント... add one now今すぐ追加 } ）
Leave a Commentコメントを残しなさい