Getting started with AJAX بدء العمل مع أجاكس

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”. جافا سكريبت تم الرئيسية لاستخدام 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. هناك الكثير من المشاجرة له علاقة مع العديد من تطبيقات متقدمة على الشبكة العالمية بعد أن مطوري الويب أن نراه ، وسال لعابه يريد الخاصة بها على الموقع نفسه بالضبط تلك التطبيقات المتقدمة / السمات. But some of it also has to do with the group of people at AdaptivePath who have named this application Ajax ولكن بعض من أنه أيضا له علاقة مع مجموعة من الناس في AdaptivePath الذين اسم هذا التطبيق اياكس

Ajax Beginners: What in the world is Ajax? اياكس المبتدئين : ما في العالم هو اياكس؟

In a nutshell? في باختصار؟ Well Ajax is a solution to web interfaces. حسنا اياكس هو حل الشبكة البينية.

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. الشائع ، الويب المستخدم يدخل بعض البيانات أو يجعل خيار بسيط ، وينقر على زر وضع الصيغة النهائية لهذا الاختيار أو إدخال البيانات ، وترسل البيانات إلى الخادم. The server hastily observes the data and sends back an entire new web page. الخادم على عجل وتلاحظ البيانات وترسل مرة جديدة كاملة صفحة ويب. 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 إلى الظهور على السطح المتصفح إلى التفاعل بين الخادم وراء الكواليس ، لذلك يمكن للمستخدم أن تبقي فقط على اللعب مع نفس الصفحة ، حتى حين العناصر على الصفحة يتحدثون إلى خادم!

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. مع جافا سكريبت كنا دائما قادرين على الخادم إلى جنب دون أن يحدث أي شيء سكريبت في المتصفح عن طريق استخدام بعض الحيل الكلاسيكية حتى سواعدنا.

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. شكل بيانات التخزين المؤقت لملف مع جافا سكريبت على خادم جيد ، ولكن هذا عادة لا عودة أي معلومات مفيدة لجافا سكريبت أن يسميها ، حتى فعاليتها محدودة جدا. 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" جزءا من الاسم -- الذي هو حقا فقط هناك من يتطلع لأنواع ، نوع من مثل "جافا" جزء من جافا سكريبت ، وذلك لأن البيانات يمكن عاد نص عادي أو ما تريد ، إذا هو لم XML الخاصة بك الخيار المفضل.

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! كل شكل من أشكال تقديمها ، وجافا سكريبت كل حال ، وأيا كان تطبيق آخر ، يمكن أن تتفاعل الآن إلى جنب مع خادم قواعد البيانات وتجهيز السلطة! 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. الشيء الوحيد الذي يحد من اياكس بين تعزيز تطبيق الويب الخاص بك هو خيال ودعم من قبل المتصفح. Mozilla-based browsers can do it, Safari, and newer versions of Internet Explorer, and Opera 8 but not Opera 7. القائمة على متصفحات موزيلا يمكن أن تفعله ، سفاري ، وأحدث نسخ برنامج انترنت اكسبلورر ، والأوبرا 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. أيضا ، وإنترنت إكسبلورر هل الامور بشكل مختلف نوعا ما (بكل تأكيد) من جميع المتصفحات الأخرى ، لذلك من الضروري جدا ان قانون العمل لحساب لمسام 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. نحن استيعابها ، في ثلاثة أجزاء.

First, we need an HTML form. أولا ، نحن بحاجة إلى شكل من أشكال هتمل. As you’ can see below: وكما تعلمون 'يمكن انظر أدناه :

 <html> 
  <head> 
  <title>Report</title> <Title>تقرير </ عنوان> 
  <script type='text/javascript' src='xhr.js'></script> </head> <body> <form action="fallbackpage.php" method="post"> <scripttype='text/javascript' src='xhr.js'> </ سكريبت> </ رئيس> <body><formaction="fallbackpage.php" method="post"> 
  <p>Welcome, student. مرحبا بكم في <p>، طالب. Please enter your essay here:<textarea name="essay" id="essay"> الرجاء إدخال مقالة هنا : <textareaname="essay" id="essay"> 
  </textarea> <input type="submit" name="submit" value="Submit" onClick="return </ textarea> <مساهمة النوع = "تقدم" اسم = "تقدم" القيمة = "تقديم" onClick = "العودة 
  grade(this.form.essay.value);"> الصف (this.form.essay.value) ؛ "> 
  </p> </ ع> 
  </form> </ شكل> 
  </body> </ هيئة> 
  </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. ملاحظة : لمستخدمي بدون الدعم المناسب لعملنا في البرنامج النصي (التي تحمل اسم xhr.js) ، شكل ببساطة سوف يقدم إلى الاحتياطي صفحة في fallbackpage.php. طيب ، هذا هو حيث يأتي في جافا سكريبت ، سنقوم أعتبر بطيئة.

 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. وهناك طريقتان علينا القيام بذلك ، لمختلف برامج التصفح.

 // Mozilla version / / موزيلا النسخة 
     if (window.XMLHttpRequest) { إذا (window.XMLHttpRequest) ( 
         xhr = new XMLHttpRequest(); xhr = جديدة XMLHttpRequest () ؛ 
     } ) 
     // IE version / / آي إي النسخة 
     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: ونحن بعد ذلك هربا من مدخلات المستخدمين لجعلها آمنة بين عنوان :

     essay=encodeURIComponent(essay); مقالة = encodeURIComponent (مقالة) ؛ 

and use the open method of the object to open a new connection to the PHP script: وطريقة استخدام المفتوحة من وجوه جديدة لفتح الصدد إلى PHP البرنامج النصي :

     xhr.open("POST","grade.php"); xhr.open ( "بوست" و "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 سريعة برأسه ويؤكد السيناريو على ما يزداد ، وبعد ذلك ينقل طريقة إرسال الطلب الفعلي :

  xhr.setRequestHeader( xhr.setRequestHeader) 
       'Content-Type', 'نوع المحتويات' ، 
       'application/x-www-form-urlencoded; charset=UTF-8'); xhr.send(essay); 'تطبيق / س على شبكة الاتصالات العالمية بين شكل - urlencoded ؛ محارف = الرموز العالميه لتحوير الهيئة - 8') ؛ xhr.send (مقالة) ؛ 

This last step isn’t necessary for GET requests, wherein all the data can be contained in the query string of the URL. هذه الخطوة الأخيرة وليس من الضروري للحصول على الطلبات ، وفيها جميع البيانات يمكن الواردة في سلسلة استعلام من عنوان الموقع.

Obtaining Final Results الحصول على النتائج النهائية

We’re finally ready to see if the HTTP request we made worked. نحن على استعداد أخيرا لمعرفة ما اذا كان العنوان التالي طلب قطعناها على أنفسنا وعمل. 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. لأكثر من معقدة خادم البرنامج النصي الناتج ، وهو responseXML الممتلكات ، التي يمكن عقد كامل الوثيقة وجوه هذه التطبيقات البيانات ، كما هو خيار يمكن الوصول إليها.

      grade = xhr.responseText; = الصف xhr.responseText ؛ 
       alert ("Nice essay. Your grade is " + grade); في حالة تأهب ( "نيس المقالة. الصف الخاص بك هو" + الصف) ؛ 
     } ) 
     return 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. وفي الختام ، فإن العنصر الثالث يتكون من PHP السيناريو ، الذي يعيش أساسا على الخادم وتنتظر بصبر لأنه جافا سكريبت لتمرير بعض البيانات حتى يتأتى عنها أنها لا يمكن أن تزدهر. This example uses some PHP, but any language you like — Ruby, Perl, C, ASP — can address your needs as well. هذا المثال يستخدم بعض PHP ، ولكن هل ترغب في أي لغة -- روبي ، بيرل ، جيم ، مكتب آسيا والمحيط الهادئ -- يمكن معالجة الاحتياجات الخاصة بك أيضا. 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 ، ولكنني لن صاغ هذا الجزء لحفظ الفضاء.

  <?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 : / / مدخلات بيانات العناوين الرئيسية للصحف في الوظائف التي تحصل على وضع سلسلة ، فك الشفرة ومرت على الدرجات خوارزمية ذكية. 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. وأخيرا ، نحن فقط الناتج الرتب مع صدى -- عادة ، وهذا من شأنه أن يعرض في المتصفح ، ولكن منذ PHP السيناريو تشغيل "وراء الكواليس ،" سلسلة الانتاج هو ببساطة عاد الى جافا سكريبت التي دعت إلى ذلك. 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 . إذا كنت تحتاج إلى بيانات منظمة ، وهو وثيقة من وثائق 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 الجان ، وحتما عاد مع الصف ، دون الاضطرار إلى إعادة تحميل الصفحة. 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 للحصول على مزيد من إلهام وأمثلة رائعة من التطبيقات بارعة اياكس يمكنك حظات الابتعاد عن زيارة وSimpleHelp.Net iGoogle تسجيل الدخول , ، Pageflakes Pageflakes , ، Netflix Netflix and و Netvibes Netvibes . .

However, the data and functions that Ajax sends and acts out is simply up to you. ومع ذلك ، فإن البيانات والوظائف التي ترسل اياكس ويتحرك انطلاقا من هو ببساطة حتى لكم.