بسم الله الرحمن الرحيم
و السلام عليكم و رحمة الله و بركاته
يسرني أن أقدم إليكم إخواني هذا الشرح البسيط لكيفية إنشاء مترجم فوري في تطبيقات الويب و ذلك إعتمادا على
و من أجل إعطاء سرعة و فعالية للتطبيق سأستعمل أجاكس حتى لا يتم تحديث الصفحة أثناء عملية الترجمة.
و سيتكون التطبيق من ملف بي إتش بي واحد ، سيضم بعض دوال جافاسكريبت إضافة إلى أكواد HTML.
لنبدأ على بركة الله:
أولا يجب تضمين سكريبت الـ API داخل التطبيق:
<script type="text/javascript">
google.load("language", "1");
</script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
ثم بعد ذلك سنقوم بإدراج دوال الجافاسكريبت المسؤولة عن طلب الترجمة و إنشاء مكونات الأجاكس و أبرزها الكائن XMLHttpRequest:
function request_info(){
google.language.translate(document.getElementById("in").value, "en", "ar", function(result) {
if (!result.error) {
var container = document.getElementById("out");
container.innerHTML = result.translation;
}
});
}
function getXMLHttpRequest(){
try{
var req=new XMLHttpRequest();
}catch(err){
req=null;
}
return req;
}
var http=getXMLHttpRequest();
function get_response(){
if (http.readyState == 4) {
if(http.status == 200) {
resp=http.responseText;
document.getElementById("out").innerHTML=resp;
}
}
}
</script>
<script type="text/javascript">
و لم يبق إذن سوى إنشاء كود HTML المسؤول عن إظهار النصوص :
<h2>MyTranslator</h2>
<h4>English to Arabic :</h4>
<br>
<textarea cols="70" rows="10" id="in" ></textarea><br>
<textarea cols="70" rows="10" id="out" readonly="true"></textarea><br>
<input type="submit" value="translate!" id="validate"
onclick="request_info();" >
</body>
<body>
حيث نلاحظ أن حدث الضغط على الزر يقوم باستدعاء الدالة request_info() التي تقوم بإعطاء تفاصيل الترجمة كلغة الإنطلاق و لغة الوصول للـ API. وبعد ذلك يأتي دور الدالة
get_response() بأخذ النص المترجم و وضعه داخل textarea عن طريق ما يسمى DOM.
أتمنى أن ينال الموضوع إعجابكم و لمن أراد السورس فيمكن تحميله من المرفقات .
و الحمد لله رب العالمين.
