AJAX או Ajax הוא JavaScript ו- XML אסינכרוני. הוא משמש להחלפת נתונים עם שרת ועדכון חלק מדף אינטרנט מבלי לטעון מחדש את כל דף האינטרנט בצד הלקוח. התצוגה והתנהגותו של דף האינטרנט הקיים אינם מתערבים כלל בעת החלפת ועדכון הנתונים. אייאקס נחשבת גם לקבוצת טכנולוגיות הכוללות HTML, CSS, DOM ו- JavaScript המשמשות לסימון, עיצוב ואפשרות למשתמש ליצור אינטראקציה עם המידע בדף האינטרנט. במאמר זה הוא יראה לך כיצד לכתוב תוכנית פשוטה בשלבי Ajax על פי שלבים באמצעות Notepad ++. יש צורך בידע בסיסי כלשהו ב- HTML, DOM, JavaScript ושרת אינטרנט מקומי או שרת אינטרנט מרוחק. WampServer משמש במאמר זה לבדיקה.
צעדים
שיטה 1 מתוך 2: קידוד
שלב 1. הכינו תמונה לכתיבת תוכנית אייאקס
שמור את התמונה באותה תיקייה שבה תשמור את קובצי ה- HTML והטקסט שלך המציגים את תוכנית Ajax. במאמר זה, ספריית "ProgramInAjax" מוגדרת בתוך תיקיית "wamp" מתחת לספריית "www" שבה התקנת את WampServer.
שלב 2. פתח כל עורך טקסט
Notepad ++ משמש כעורך הטקסט במאמר זה.
שלב 3. צור קובץ חדש בעורך הטקסט
הקלד את הדברים הבאים:
הו הו! לאן נעלם הפרח הצהוב?
אתה יכול להקליד מה שאתה רוצה בתוך תגי html כאן.
שלב 4. שמור את הקובץ כמסמך טקסט עם השם "ajax-data.txt
” למעשה, אתה יכול לתת שם לקובץ כרצונך אך הקפד להזין את אותו שם הקובץ לקידוד בשורה זו:
xmlhttp.open ("GET", "ajax-data.txt", נכון);
עם זאת, תגי ה- HTML משמשים לכותרת כך שהוא ייראה גדול יותר ובלתי נראה יותר.
שלב 5. צור קובץ חדש עבור דף אינטרנט
קובץ זה מיועד לקובץ HTML כדי לצפות בתוכנית Ajax בדפדפן אינטרנט.
שלב 6. העתק את הקוד הבא:
תוכנית האייאקס הראשונה שלי על ידי שים את קוד אייאקס למטה.לחץ על הכפתור למטה כדי לגרום לפרח להיעלם
שלב 7. שמור את הקובץ
לחץ על כפתור השמירה בשורת התפריטים. תיבת "שמירה בשם" פתוחה. הזן שם למסמך שלך. במאמר זה, שם הקובץ הוא "אינדקס".
שלב 8. לחץ על החץ הנפתח כדי לבחור את סיומת הקובץ
בשדה "שמור כסוג", לחץ על החץ הנפתח כדי לבחור את סיומת הקובץ.
שלב 9. בחר "קובץ שפת סימון Hyper Text Markup
” וודא שיש לו "html" בתוך הסוגריים. לחץ על שמור לאחר בחירת "html".
שלב 10. בדוק את קובץ ה- HTML בדפדפן אינטרנט
פתח את דף האינטרנט בדפדפן אינטרנט. עבור אל "הפעלה" בשורת התפריטים העליונה. לחץ עליו ובחר "הפעל ב- Chrome" או כל דפדפן המותקן במערכת שלך. Google Chrome משמש לבדיקה במאמר זה. ייתכן שיש לך כמה דפדפנים אחרים המותקנים בתוך Notepad ++. אתה יכול לבחור את הדפדפן המועדף עליך. אפשרות נוספת, תוכל ללחוץ על סמל WampServer בשורת המשימות בתחתית המסך ולבחור "Localhost". אתה אמור לראות שם את הספרייה שלך ולחץ על קובץ האינדקס.
שלב 11. לחץ על הלחצן מתחת לתמונה כדי לבדוק את הסקריפט
שלב 12. דף האינטרנט הסופי שלך
יש לרענן את דף האינטרנט שלך עם המידע שהזנת בקובץ הטקסט בתחילת הדרך. יש להחליף את הפרח והכותרת בכותרת החדשה בשם "הו הו! לאן נעלם הפרח הצהוב?"
שיטה 2 מתוך 2: הסבר קוד
שלב 1. קטע הגוף
בגוף ה- HTML יש את החלק "div" וכפתור אחד. חלק זה ישמש להצגת המידע המוחזר מהשרת. הכפתור מכנה פונקציה בשם "loadXMLDoc ()", אם לוחצים עליה.
תוכנית האייאקס הראשונה שלי על ידי תמונה מגיעה לכאן כדי לבדוק את התוכנית של אייאקס.לחץ על הכפתור למטה כדי לגרום לפרח להיעלם
כפתור נכנס לכאן
שלב 2. קטע הראש
בחלק הראש של קובץ ה- HTML יש תג סקריפט המכיל את הפונקציה "loadXMLDoc ()".
תוכנית האייאקס הראשונה שלי על ידי שים את קוד אייאקס למטה.
שלב 3. הסבר נוסף
הדבר החשוב ביותר של Ajax הוא אובייקט XMLHttpRequest. הוא משמש להחלפת נתונים עם השרת וכל הדפדפנים המודרניים תומכים באובייקט.
- התחביר ליצירת אובייקט XMLHttpRequest () משתנה = XMLHttpRequest חדש (); אך יחד עם זאת התחביר ליצירת גרסאות ישנות של Internet Explorer (IE5 ו- IE6) המשתמש באובייקט ActiveX משתנה = ActiveXObject חדש ("Microsoft. XMLHTTP");.
- על מנת לטפל בכל הדפדפנים המודרניים, עליו לבדוק אם הדפדפנים תומכים באובייקט XMLHttpRequest. אם כן, הוא יוצר אובייקט XMLHttpRequest. אם לא, הוא ייצור עבורו אובייקט ActiveX.
- לאחר מכן הוא ישלח בקשה לשרת. תיעשה שימוש בשיטת אובייקט XMLHttpRequest בשם "open ()" ו- "send ()". xmlhttp.open ("GET", "ajax_info.txt", נכון); xmlhttp.send ();.
טיפים
- אפשרות נוספת לתצוגה מקדימה של התוצאה, תוכל לפתוח את הדפדפן המועדף עליך ולהקליד "localhost/ProgramInAjax" בשורת כתובות האינטרנט כדי להציג את דף האינטרנט. אתה אמור להיות מסוגל לראות את דף האינטרנט אם אתה מכנה את קובץ ה- HTML שלך כ- "index.html".
- שמור את קובץ ה- HTML שלך לעתים קרובות יותר במהלך העבודה. לחיצה על Ctrl ו- S במקביל למשתמשי Window תחסוך יותר זמן.
- הקפד להוסיף את קובץ ה- HTML השמור שלך באותו המיקום שבו נמצאים התמונה וקובץ טקסט הנתונים שלך.
- כאשר אתה נותן שם לקובץ, הוא רגיש לאותיות בעת הוספת שמות אלה לקוד. לדוגמה, "myImage" שונה מ- "MyImage" או "myimage".
