AJAX - XMLHttpRequest

XMLHttpRequest ਆਬਜੈਕਟ ਸੇਵਰ ਨਾਲ ਡਾਟਾ ਵਟਾਂਦਰਾ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

ਸੇਵਰ ਨੂੰ ਬੇਨਤੀ ਭੇਜੋ

ਸੇਵਰ ਨੂੰ ਬੇਨਤੀ ਭੇਜਣ ਲਈ ਅਸੀਂ XMLHttpRequest ਆਬਜੈਕਟ ਦੀ open() ਅਤੇ send() ਮੇਥੋਡ:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
ਤਰੀਕਾ ਵਰਣਨ
open(method, url, async)

ਬੇਨਤੀ ਦਾ ਤਰੀਕਾ ਨਿਰਧਾਰਿਤ ਕਰੋ

  • method：ਬੇਨਤੀ ਦਾ ਤਰੀਕਾ: GET ਜਾਂ POST
  • url：ਸੇਵਰ (ਫਾਈਲ) ਸਥਾਨ
  • async：true（ਅਸਿਨਕਰਨੋਸਿਜ਼ ਜਾਂ false（ਸਿਨਕਰਨੋਸਿਜ਼）
send() ਸੇਵਰ ਨੂੰ ਬੇਨਤੀ ਭੇਜੋ (ਉਪਯੋਗ GET ਲਈ)
send(string) ਸੇਵਰ ਨੂੰ ਬੇਨਤੀ ਭੇਜੋ (ਉਪਯੋਗ POST ਲਈ)

GET ਜਾਂ POST?

GET ਪੋਸਟ ਤੋਂ ਸਰਲ ਅਤੇ ਤੇਜ਼ ਹੈ ਅਤੇ ਮਿਆਰ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

ਪਰ ਹਰ ਇਸ ਸਥਿਤੀ ਵਿੱਚ ਹਮੇਸ਼ਾ ਪੋਸਟ ਵਰਤੋਂ ਕਰੋ:

  • ਕੈਸ਼ ਫਾਈਲ ਨਹੀਂ ਹੈ (ਸੇਵਰ 'ਤੇ ਫਾਈਲ ਜਾਂ ਡਾਟਾਬੇਸ ਅੱਪਡੇਟ ਕਰੋ)
  • ਸੇਵਰ ਨੂੰ ਬਹੁਤ ਸਾਰੇ ਡਾਟਾ ਭੇਜੋ (POST ਦਾ ਮੈਗਨਟਿਊਡ ਨਹੀਂ ਹੈ)
  • ਉਪਯੋਗਕਰਤਾ ਦੇ ਇਨਪੁਟ ਨੂੰ ਭੇਜੋ (ਅਣਪਛਾਤੇ ਅੱਕਸ਼ਰ ਸ਼ਾਮਲ ਹੋ ਸਕਦੇ ਹਨ)，POST GET ਤੋਂ ਮਜ਼ਬੂਤ ਅਤੇ ਸੁਰੱਖਿਅਤ ਹੈ

GET ਬੇਨਤੀ

ਇੱਕ ਸਰਲ GET ਬੇਨਤੀ:

ਇੰਸਟੈਂਸ

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

ਸਿੱਧੇ ਪ੍ਰਯੋਗ ਕਰੋ

ਉੱਪਰੋਕਤ ਉਦਾਹਰਣ ਵਿੱਚ ਤੁਸੀਂ ਇੱਕ ਕੈਸ਼ ਨਤੀਜਾ ਹਾਸਲ ਕਰ ਸਕਦੇ ਹੋ। ਇਸ ਸਥਿਤੀ ਨੂੰ ਬਚਾਉਣ ਲਈ ਇੱਕ ਅਨੂਠਾ ਆਈਡੀ URL ਵਿੱਚ ਜੋੜੋ:

ਇੰਸਟੈਂਸ

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

ਸਿੱਧੇ ਪ੍ਰਯੋਗ ਕਰੋ

ਜੇਕਰ ਤੁਹਾਨੂੰ GET ਮੈਥੋਡ ਨਾਲ ਸੂਚਨਾ ਭੇਜਣੀ ਹੈ ਤਾਂ ਇਹ ਸੂਚਨਾਵਾਂ URL ਵਿੱਚ ਜੋੜੋ:

ਇੰਸਟੈਂਸ

xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

ਸਿੱਧੇ ਪ੍ਰਯੋਗ ਕਰੋ

POST ਬੇਨਤੀ

ਇੱਕ ਸਰਲ POST ਬੇਨਤੀ:

ਇੰਸਟੈਂਸ

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

ਸਿੱਧੇ ਪ੍ਰਯੋਗ ਕਰੋ

ਜੇਕਰ ਤੁਹਾਨੂੰ ਐੱਚਟੀਐੱਮਐੱਲ ਫਾਰਮ ਵਰਗੇ POST ਡਾਟਾ ਭੇਜਣਾ ਹੈ ਤਾਂ ਇਸ ਰਾਹੀਂ: setRequestHeader() ਇੱਕ HTTP ਹੈੱਡਰ ਜੋੜੋ। ਕਿਰਪਾ ਕਰਕੇ ਇਸ ਵਿੱਚ: send() ਮੇਥੋਡ ਵਿੱਚ ਤੁਹਾਨੂੰ ਭੇਜਣਾ ਹੋਣ ਵਾਲਾ ਡਾਟਾ ਦੱਸਿਆ ਗਿਆ ਹੈ:

ਇੰਸਟੈਂਸ

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

ਸਿੱਧੇ ਪ੍ਰਯੋਗ ਕਰੋ

ਤਰੀਕਾ ਵਰਣਨ
setRequestHeader(header, value)

ਬੇਡਰ ਵਿੱਚ HTTP ਮੁੱਲ ਜੋੜੋ

  • header：ਸਿਰਫ ਮੁੱਲ ਦਾ ਨਾਮ ਨਿਰਧਾਰਿਤ ਕਰੋ
  • value：ਸਿਰਫ ਮੁੱਲ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ

url - ਸਰਵਰ 'ਤੇ ਫਾਈਲ

open() ਤਰੀਕੇ ਦਾ url ਪੈਰਾਮੀਟਰ, ਸਰਵਰ 'ਤੇ ਫਾਈਲ ਦੀ ਠਿਕਾਣਾ ਹੈ:

xhttp.open("GET", "ajax_test.asp", true);

ਇਹ ਫਾਈਲ ਕੋਈ ਵੀ ਤਰਾਂ ਦੀ ਹੋ ਸਕਦੀ ਹੈ, ਜਿਵੇਂ .txt ਅਤੇ .xml, ਜਾਂ ਸਰਵਰ ਸਕ੍ਰਿਪਟ ਫਾਈਲ, ਜਿਵੇਂ .asp ਅਤੇ .php (ਉਹ ਪ੍ਰਤੀਕਿਰਿਆ ਭੇਜਣ ਤੋਂ ਪਹਿਲਾਂ ਸਰਵਰ 'ਤੇ ਚਲਾਏ ਜਾ ਸਕਦੇ ਹਨ)。

ਅਸਿੰਕ੍ਰੋਨਸ - true ਜਾਂ false?

ਜੇਕਰ ਤੁਸੀਂ ਅਸਿੰਕ੍ਰੋਨਸ ਬੇਡਰ ਭੇਜਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂopen() ਤਰੀਕੇ ਦਾ async ਪੈਰਾਮੀਟਰ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸੈਟ ਕਰਨਾ ਹੈ: true:

xhttp.open("GET", "ajax_test.asp", true);

ਅਸਿੰਕ੍ਰੋਨਸ ਬੇਡਰ ਭੇਜਣਾ ਵੈਬ ਵਿਕਾਸਕਾਰਾਂ ਲਈ ਇੱਕ ਵੱਡੀ ਪ੍ਰਗਤੀ ਹੈ।ਸਰਵਰ 'ਤੇ ਚਲਾਏ ਗਏ ਕਈ ਕੰਮ ਬਹੁਤ ਲੰਬੇ ਸਮੇਂ ਲੈ ਲੈਂਦੇ ਹਨ।AJAX ਤੋਂ ਪਹਿਲਾਂ, ਇਹ ਕੰਮ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਬੰਦ ਕਰ ਸਕਦਾ ਸੀ ਜਾਂ ਰੁਕਣ ਵਾਲਾ ਹੋ ਸਕਦਾ ਸੀ。

ਦੁਵੱਲੇ ਸੰਚਾਰ ਰਾਹੀਂ, JavaScript ਸਰਵਰ ਦੀ ਪ੍ਰਤੀਕਿਰਿਆ ਦੀ ਰਾਹ ਦੇ ਦੌਰਾਨ ਰੁਕਣ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੁੰਦੀ ਹੈ, ਬਜਾਰ ਹੈ ਕਿ:

  • ਸਰਵਰ ਦੀ ਪ੍ਰਤੀਕਿਰਿਆ ਦੀ ਰਾਹ ਦੇ ਦੌਰਾਨ ਹੋਰ ਸਕ੍ਰਿਪਟ ਚਲਾਓ
  • ਜਦੋਂ ਪ੍ਰਤੀਕਿਰਿਆ ਤਿਆਰ ਹੋਈ ਹੋਵੇ ਤਾਂ ਪ੍ਰਤੀਕਿਰਿਆ ਨਾਲ ਹੰਡਲ ਕਰੋ

onreadystatechange ਵਿਸ਼ੇਸ਼ਤਾ

XMLHttpRequest ਆਬਜੈਕਟ ਰਾਹੀਂ, ਤੁਸੀਂ ਬੇਡਰ ਮਿਲਣ ਉੱਤੇ ਚਲਾਉਣ ਵਾਲੇ ਫੰਕਸ਼ਨ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ。

ਇਹ ਫੰਕਸ਼ਨ XMLHttpResponse ਆਬਜੈਕਟ ਦੇ onreadystatechange ਵਿਸ਼ੇਸ਼ਤਾ ਵਿੱਚ ਪਰਿਭਾਸ਼ਿਤ:

ਇੰਸਟੈਂਸ

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

ਸਿੱਧੇ ਪ੍ਰਯੋਗ ਕਰੋ

ਤੁਸੀਂ ਛੇਤੀ ਹੀ ਇਸ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਮਿਲਵੇਗੀ。

ਸਿੰਕ੍ਰੋਨਸ ਬੇਡਰ

ਜੇਕਰ ਤੁਸੀਂ ਸਿੰਕ੍ਰੋਨਸ ਬੇਡਰ ਚਲਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਸ ਨੂੰ ਲਾਓ: open() ਮੱਥਕ ਵਿੱਚ ਤੀਜਾ ਪੈਰਾਮੀਟਰ ਮੁੱਲ ਰੱਖਿਆ ਜਾਂਦਾ ਹੈ ਸਹੀ:

xhttp.open("GET", "ajax_info.txt", false);

ਕਦੇ-ਕਦੇ async = false ਤੇਜ਼ ਟੈਸਟ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।ਤੁਸੀਂ ਵੀ ਅਧੁਨਿਕ JavaScript ਕੋਡ ਵਿੱਚ ਸਿੰਕ੍ਰੋਨਸ ਰਿਕਾਰਡ ਦੇਖ ਸਕਦੇ ਹੋ。

ਕੋਡ ਸਰਵਰ ਦੀ ਪ੍ਰਤੀਕਿਰਿਆ ਨੂੰ ਮੁਕਾਬਲੇ ਕਰਨ ਵਾਲਾ ਹੈ, ਇਸ ਲਈ onreadystatechange ਫੰਕਸ਼ਨ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੈ:

ਇੰਸਟੈਂਸ

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

ਸਿੱਧੇ ਪ੍ਰਯੋਗ ਕਰੋ

ਅਸੀਂ ਸਿੰਕ੍ਰੋਨਸ XMLHttpRequest (async = false) ਨੂੰ ਨਹੀਂ ਸਿਫਾਰਸ਼ ਕਰਦੇ, ਕਿਉਂਕਿ JavaScript ਸਰਵਰ ਦੀ ਪ੍ਰਤੀਕਿਰਿਆ ਤੱਕ ਅਚਲ ਹੋ ਜਾਵੇਗਾ।ਜੇਕਰ ਸਰਵਰ ਬੁਰੀ ਤਰ੍ਹਾਂ ਜਾਂ ਨੇੜਿਓਂ ਹੋਵੇ ਤਾਂ ਐਪਲੀਕੇਸ਼ਨ ਅਟਕ ਜਾਂ ਰੁਕ ਸਕਦਾ ਹੈ。

ਸਿੰਕ੍ਰੋਨਸ XMLHttpRequest ਵੈਬ ਸਟੈਂਡਰਡ ਤੋਂ ਹਟਾਉਣ ਵਾਲਾ ਹੈ, ਲੇਕਿਨ ਇਹ ਪ੍ਰਕਿਰਿਆ ਕਈ ਸਾਲ ਲਈ ਲੰਬੀ ਹੋ ਸਕਦੀ ਹੈ。

ਆਧੁਨਿਕ ਵਿਕਾਸ ਸਾਧਨਾਂ ਨੂੰ ਸਿੰਕ੍ਰੋਨਸ ਰਿਕਾਰਡ ਕਰਨ ਦੀ ਚੇਤਾਵਨੀ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ, ਅਤੇ ਇਹ ਸਥਿਤੀ ਆਉਣ ਵਾਲੀ ਹੈ ਜਦੋਂ InvalidAccessError ਅਨੈਕਸ਼ਨ ਫੈਲਾਉਣਗੇ。