فرم AJAX جاوااسکریپت

دسته بندی : آموزش Javascript سطح مقاله : متوسط زمان مطالعه : 5 دقیقه آخرین بروز رسانی: 19 اسفند 1399

ارسال فرم AJAX جاوااسکریپت به شما امکان می دهد داده ها را در پس زمینه ارسال کنید و نیازی به بارگیری مجدد وب سایت ها برای دیدن به روزرسانی ها نیست. این باعث می شود که کاربر تجربه بسیار نرم تری داشته باشد.

با اجازه دادن به مرورگر و سرور مبادله اطلاعات بدون ایجاد مزاحمت در فعالیت های دیگر ، باعث صرفه جویی در وقت و منابعی می شود که در غیر این صورت مرتباً بارگیری سایت خود را هدر می دهید.

نکات اصلی فرم AJAX جاوااسکریپت:

AJAX مخفف Asynchronous JavaScript و XML است.
با ارسال درخواست های ناهمزمان ، به یک برنامه اجازه می دهد تا بخشی از صفحه را بدون نیاز به بارگیری مجدد کل سند ، تازه کند.
با استفاده از AJAX می توان فرم ها را عملکردی و پویاتر کرد.

گزینه ها برای انتخاب فرم

اول از همه ، ما یک فرم ورودی ساده با استفاده از HTML ایجاد می کنیم:

<form> 
      <select name="users" onchange="showUser(this.value)"> 
        <option value="">Select a person:</option> 
        <option value="johny">Johny Dawkins</option> 
        <option value="margaret">Margaret Johnson</option> 
        <option value="julie">Julie Doodley</option> 
      </select>
    </form><br>
    <div id="txt_hint">
      <strong>This is where the information will appear</strong>
    </div>

در آن کاربر می تواند یکی از سه گزینه ممکن را از منوی کشویی انتخاب کند. هنگامی که آنها انجام می شوند ، یک رویداد onchange آغاز می شود.

ما همچنین یک عنصر div را به عنوان منطقه ای برای اطلاعات اضافی ایجاد می کنیم. با این حال ، این قابلیت هنوز کار نخواهد کرد. برای فعال کردن آن ، باید تابع showUser را فراخوانی کنیم:

function showUser(str) {    
    if (str == ""){        
      document.getElementById("txt_hint").innerHTML = "";
      return;
    } else {
      if (window.XMLHttpRequest) { 
        // script for IE 7+ and other popular browsers
        xmlhttp = new XMLHttpRequest();
      } else {            
        // script for IE 5 and 6
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }      
      // check if server response is ready  
      xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        // get the element in which we will display our suggestions
        document.getElementById("txt_hint").innerHTML = xmlhttp.responseText;}
      }; 
      xmlhttp.open("GET","getuser.php?q="+str, true);
      xmlhttp.send();
    }
  }

برای فعال کردن فرم AJAX ، یک XMLHttpRequest ایجاد می کنیم. رویداد onchange فعال شده عملکرد txt_hint را فراخوانی می کند. سپس اطلاعات اضافی در مورد شخصی که انتخاب کرده اید در زیر قسمت ورودی نمایش داده می شود.

فرم ورودی متن AJAX

در مثال بعدی ، ما یک فرم با یک قسمت متن ایجاد خواهیم کرد:

<body>
    <p><strong>Try typing a name into the below input field:</strong></p>
    <form> 
      First name: <input type="text" onkeyup="showHint(this.value)">
    </form>
    <p>Possible suggestions: <span id="txt_hint"></span></p>
  </body>

فرم همان مقادیری را که در اولین مثال خود داشتیم تشخیص خواهد داد. با این حال ، برای اینکه اطلاعات اضافی را نشان دهد ، باید عملکرد () showHint را فراخوانی کنیم:

function showHint(str) {
    //check if input field is empty
    if (str.length == 0) {
      document.getElementById("txt_hint").innerHTML = "";
      return;
    } else {
      //if the field is not empty, create an XMLHttpRequest to get suggestions
      var xmlhttp = new XMLHttpRequest();
      // server response is ready, we call the function
      xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          document.getElementById("txt_hint").innerHTML = xmlhttp.responseText;
        }
      };
      xmlhttp.open("GET", "/learn/best-code-editor-example?q=" + str, true); 
      xmlhttp.send();
    }
  }

با بررسی متغیر طول str.le ، فرم خالی بودن یا نبودن فیلد را مشخص می کند. اگر اینگونه باشد ، مکان نگهدارنده txt_hint را کنار می گذاریم و از عملکرد خارج می شویم.

اگر قسمت متن ورودی چیزی در آن باشد ، می توانیم یک شی X XMLHttpRequest ایجاد کرده و عملکرد را تنظیم کنیم تا پس از آماده شدن پاسخ سرور ، آماده اجرا شود.

توجه: متغیر str محتوای قسمت متن ورودی ما را نگه داشته است.

خلاصه فرم AJAX جاوااسکریپت:

AJAX درخواستهای ناهمزمان ارسال می کند که به مرورگر و سرور کمک می کند تا اطلاعات را رد و بدل کند. بنابراین ، می توانید بدون بارگیری مجدد صفحه ، به روزرسانی ها را مشاهده کنید.
این در وقت شما صرفه جویی می کند و تجربه کاربر را ساده می کند ، زیرا نیازی به تازه کردن صفحات به طور مداوم نیست.
با استفاده از AJAX ، ارسال فرم نرمتر و کاربرپسندتر است.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊