AJAX - XMLHttpRequest ਓਬਜੈਕਟ

XMLHttpRequest ਪ੍ਰੋਗਰਾਮ AJAX ਦਾ ਨੀਂਹ ਪੱਥਰ ਹੈ

  1. 创建 XMLHttpRequest 对象
  2. ਕਾਲਬੈਕ ਫੰਕਸ਼ਨ ਨਿਰਧਾਰਿਤ ਕਰੋ
  3. XMLHttpRequest ਪ੍ਰੋਗਰਾਮ ਖੋਲ੍ਹੋ
  4. ਸਰਵਰ ਨੂੰ ਬੇਨਤੀ ਕਰਨ ਲਈ

XMLHttpRequest ਆਬਜੈਕਟ

ਸਾਰੇ ਆਧੁਨਿਕ ਬਰਾਊਜ਼ਰ ਇਸ ਨੂੰ ਸਮਰਥਨ ਕਰਦੇ ਹਨ XMLHttpRequest ਆਬਜੈਕਟ.

XMLHttpRequest ਪ੍ਰੋਗਰਾਮ ਵੈਬ ਸਰਵਰ ਨਾਲ ਪਿੱਛੇ ਤੋਂ ਡਾਟਾ ਚਲਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਇਹ ਮਤਲਬ ਹੈ ਕਿ ਪੰਜੀਜ਼ ਕਿਸੇ ਪ੍ਰਕਾਰ ਦੀ ਮੌਜੂਦਗੀ ਵਿੱਚ ਵੈਬਸਾਈਟ ਦੇ ਕੁਝ ਹਿੱਸੇ ਨੂੰ ਅੱਪਡੇਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਬਿਨਾ ਕਿ ਪੂਰੀ ਪੰਜੀਜ਼ ਫਿਰ ਤੋਂ ਲੋਡ ਕੀਤੀ ਜਾਵੇ।

创建 XMLHttpRequest 对象

所有现代浏览器（Chrome、Firefox、IE、Edge、Safari、Opera）都有内置的 XMLHttpRequest ਆਬਜੈਕਟ.

XMLHttpRequest ਆਬਜੈਕਟ ਬਣਾਉਣ ਦੀ ਵਿਆਕਰਣ:

variable = new XMLHttpRequest();

ਕਾਲਬੈਕ ਫੰਕਸ਼ਨ ਨਿਰਧਾਰਿਤ ਕਰੋ

ਕਾਲਬੈਕ ਫੰਕਸ਼ਨ ਇੱਕ ਫੰਕਸ਼ਨ ਹੈ ਜੋ ਦੂਜੇ ਫੰਕਸ਼ਨ ਨੂੰ ਪੈਰਾਮੀਟਰ ਵਜੋਂ ਪਾਸ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。

ਇਸ ਹਾਲਾਤ ਵਿੱਚ ਕਾਲਬੈਕ ਫੰਕਸ਼ਨ ਵਿੱਚ ਪ੍ਰਤੀਕਿਰਿਆ ਤਿਆਰ ਹੋਣ ਉੱਤੇ ਚਲਾਉਣ ਵਾਲੇ ਕੋਡ ਸ਼ਾਮਲ ਕਰੋ

xhttp.onload = function() {
  // ਜਦੋਂ ਪ੍ਰਤੀਕਿਰਿਆ ਤਿਆਰ ਹੋਈ ਤਾਂ ਕੀ ਕਰਨਾ ਹੈ
}

ਬੇਨਤੀ ਭੇਜੋ

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

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

ਇੰਸਟੈਂਸ

// XMLHttpRequest ਆਬਜੈਕਟ ਬਣਾਓ
const xhttp = new XMLHttpRequest();
// ਕਾਲਬੈਕ ਫੰਕਸ਼ਨ ਨਿਰਧਾਰਿਤ ਕਰੋ
xhttp.onload = function() {
  // ਇੱਥੇ ਆਪਣੇ ਦਾਤਾ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ
}
// ਬੇਨਤੀ ਭੇਜੋ
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

ਸਵੈ ਸਿਖਣ ਦੇਖੋ

ਕਰਾਉਡ ਐਕਸੈਸ (Access Across Domains)

ਸੁਰੱਖਿਆ ਕਾਰਣਾਂ ਕਰਕੇ ਆਧੁਨਿਕ ਬਰਾਉਜ਼ਰ ਕਰਾਉਡ ਐਕਸੈਸ ਨੂੰ ਨਹੀਂ ਮਨਜ਼ੂਰ ਕਰਦੇ।

ਇਹ ਮਤਲਬ ਹੈ ਕਿ ਵੈੱਬਸਾਈਟ ਅਤੇ ਉਹ XML ਫਾਈਲ ਜਿਸ ਨੂੰ ਲੋਡ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੀ ਹੈ, ਉਹ ਇੱਕ ਹੀ ਸਰਵਰ 'ਤੇ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ।

CodeW3C.com 'ਤੇ ਦੇਣ ਵਾਲੇ ਉਦਾਹਰਣ ਸਾਰੇ CodeW3C.com ਡੋਮੇਨ ਵਿੱਚ ਖੁੱਲ੍ਹੇ ਹਨ।

ਅਗਰ ਤੁਸੀਂ ਉੱਪਰੋਕਤ ਉਦਾਹਰਣ ਆਪਣੀ ਵੈੱਬਸਾਈਟ ਵਿੱਚ ਵਰਤਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਲੋਡ ਕਰਨ ਵਾਲਾ XML ਫਾਈਲ ਆਪਣੇ ਸਰਵਰ 'ਤੇ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।

XMLHttpRequest ਆਬਜੈਕਟ ਮਹੱਤਵ

ਮਹੱਤਵ ਵਰਣਨ
new XMLHttpRequest() ਨਵਾਂ XMLHttpRequest ਆਬਜੈਕਟ ਬਣਾਓ
abort() ਮੌਜੂਦਾ ਬੇਨਤੀ ਨੂੰ ਰੱਦ ਕਰੋ
getAllResponseHeaders() ਹੈੱਡਰ ਸੂਚਨਾ ਵਾਪਸ ਦੇਵੇ
getResponseHeader() ਵਿਸ਼ੇਸ਼ ਹੈੱਡਰ ਸੂਚਨਾ ਵਾਪਸ ਦੇਵੇ
open(method, url, async, user, psw)

ਬੇਨਤੀ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ

  • methodਵਿਕਲਪਿਤ ਬੇਨਤੀ ਤਰੀਕਾ GET ਜਾਂ POST
  • urlਫਾਈਲ ਸਥਾਨ
  • asyncਵਿਕਲਪਿਤ true (ਅਸੈਂਕਰਨ) ਜਾਂ false (ਸਿੰਕਰਨ)
  • userਵਿਕਲਪਿਤ ਉਸਰਨਾਮਾ
  • pswਵਿਕਲਪਿਤ ਪਾਸਵਰਡ
send() ਸਰਵਰ ਨੂੰ ਬੇਨਤੀ ਭੇਜੋ ਜੋ GET ਬੇਨਤੀ ਲਈ ਵਰਤਿਆ ਜਾਵੇ।
send(string) ਸਰਵਰ ਨੂੰ ਬੇਨਤੀ ਭੇਜੋ ਜੋ POST ਬੇਨਤੀ ਲਈ ਵਰਤਿਆ ਜਾਵੇ।
setRequestHeader() ਟੈਗ/ਮੁੱਲ ਪੇਰ ਨੂੰ ਭੇਜਣ ਵਾਲੇ ਹੈੱਡਰ ਵਿੱਚ ਜੋੜੋ।

XMLHttpRequest ਆਬਜੈਕਟ ਪ੍ਰਾਪਰਟੀ

ਪ੍ਰਤੀਕਿਰਿਆ ਵਰਣਨ
onload ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ ਜਿਸ ਫੰਕਸ਼ਨ ਨੂੰ ਲੋਡ ਕਰਨ ਉੱਤੇ ਬੁਲਾਇਆ ਜਾਵੇ।
onreadystatechange ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ ਜਿਸ ਫੰਕਸ਼ਨ ਨੂੰ ਰੇਡੀ ਸਟੇਟ ਪ੍ਰਾਪਰਟੀ ਬਦਲਣ ਉੱਤੇ ਬੁਲਾਇਆ ਜਾਵੇ।
readyState

XMLHttpRequest ਦੀ ਸਥਿਤੀ ਬਚਾਓ

  • 0: ਬੇਨਤੀ ਨਾ ਸ਼ੁਰੂ ਹੋਈ
  • 1: ਸਰਵਰ ਕੁਨੈਕਸ਼ਨ ਪ੍ਰਤੀਕਿਰਿਆ ਸਥਾਪਿਤ ਹੋ ਚੁੱਕੀ ਹੈ
  • 2: ਬੇਨਤੀ ਮਿਲ ਚੁੱਕੀ ਹੈ
  • 3: ਬੇਨਤੀ ਪ੍ਰਕਿਰਿਆ ਵਿੱਚ ਹੈ
  • 4: ਬੇਨਤੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਪੂਰੀ ਹੋ ਚੁੱਕੀ ਹੈ ਅਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਤਿਆਰ ਹੋ ਚੁੱਕੀ ਹੈ
responseText ਸਟ੍ਰਿੰਗ ਫਾਰਮ ਵਿੱਚ ਪ੍ਰਤੀਕਿਰਿਆ ਵਾਪਸ ਦੇਣਾ
responseXML XML ਦਾਤਾ ਵਾਪਸ ਦੇਣਾ
status

ਬੇਨਤੀ ਦੇ ਸਥਿਤੀ ਨੰਬਰ ਵਾਪਸ ਦੇਣਾ

  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Not Found"

ਪੂਰੀ ਸੂਚੀ ਲਈ ਦੇਖਣਾ Http ਸੰਦੇਸ਼ ਸੰਦਰਭ ਦਸਤਾਵੇਜ਼
statusText ਸਥਿਤੀ ਟੈਕਸਟ (ਉਦਾਹਰਣ ਵਜੋਂ "OK" ਜਾਂ "Not Found") ਵਾਪਸ ਦੇਣਾ

onload ਪ੍ਰਤੀਕਿਰਿਆ

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

XMLHttpRequest ਆਬਜੈਕਟ ਦੇ onload ਇਹ ਫੰਕਸ਼ਨ ਪ੍ਰਤੀਕਿਰਿਆ ਵਿੱਚ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ:

ਇੰਸਟੈਂਸ

xhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

ਸਵੈ ਸਿਖਣ ਦੇਖੋ

ਬਹੁਤ ਸਾਰੇ ਕਾਲਬੈਕ ਫੰਕਸ਼ਨ

ਜੇਕਰ ਵੈੱਬਸਾਈਟ ਵਿੱਚ ਕਈ AJAX ਟਾਸਕ ਹਨ ਤਾਂ ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਓ ਜੋ XMLHttpRequest ਆਬਜੈਕਟ ਦਾ ਪ੍ਰਬੰਧ ਕਰੇ ਅਤੇ ਹਰੇਕ AJAX ਟਾਸਕ ਲਈ ਇੱਕ ਕਾਲਬੈਕ ਫੰਕਸ਼ਨ ਬਣਾਓ

ਫੰਕਸ਼ਨ ਬੇਨਤੀ ਵਾਲੀ ਯੂਰੀ ਅਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਤਿਆਰ ਹੋਣ ਉੱਤੇ ਚਲਾਇਆ ਜਾਣ ਵਾਲੀ ਫੰਕਸ਼ਨ ਸਮੇਤ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ

ਇੰਸਟੈਂਸ

loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {cFunction(this);}
  xhttp.open("GET", url);
  xhttp.send();
}
function myFunction1(xhttp) {
  // ਇੱਥੇ ਹੋਰ ਕਾਰਵਾਈ ਹੈ
}
function myFunction2(xhttp) {
  // ਇੱਥੇ ਹੋਰ ਕਾਰਵਾਈ ਹੈ
}

onreadystatechange ਪ੍ਰਤੀਕਿਰਿਆ

readyState ਪ੍ਰਤੀਕਿਰਿਆ XMLHTTPRequest ਦੀ ਸਥਿਤੀ ਬਚਾਉਣਾ

onreadystatechange ਪ੍ਰਤੀਕਿਰਿਆ ਇੱਕ ਕਾਲਬੈਕ ਫੰਕਸ਼ਨ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀ ਹੈ ਜੋ ਜਦੋਂ readyState ਬਦਲੇ ਹੋਣ ਤੇ ਚਲਾਇਆ ਜਾਵੇਗਾ

status ਪ੍ਰਤੀਕਿਰਿਆ ਅਤੇ statusText ਪ੍ਰਤੀਕਿਰਿਆ XMLHTTPRequest ਆਬਜੈਕਟ ਦੀ ਸਥਿਤੀ ਬਚਾਉਣਾ

ਪ੍ਰਤੀਕਿਰਿਆ ਵਰਣਨ
onreadystatechange ਜਦੋਂ readyState ਪ੍ਰਤੀਕਿਰਿਆ ਬਦਲੇ ਹੋਣ ਤੇ ਚਾਹੀਦਾ ਹੋਣ ਵਾਲਾ ਫੰਕਸ਼ਨ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ
readyState

XMLHttpRequest ਦੀ ਸਥਿਤੀ ਬਚਾਓ

  • 0: ਬੇਨਤੀ ਨਾ ਸ਼ੁਰੂ ਹੋਈ
  • 1: ਸਰਵਰ ਕੁਨੈਕਸ਼ਨ ਪ੍ਰਤੀਕਿਰਿਆ ਸਥਾਪਿਤ ਹੋ ਚੁੱਕੀ ਹੈ
  • 2: ਬੇਨਤੀ ਮਿਲ ਚੁੱਕੀ ਹੈ
  • 3: ਬੇਨਤੀ ਪ੍ਰਕਿਰਿਆ ਵਿੱਚ ਹੈ
  • 4: ਬੇਨਤੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਪੂਰੀ ਹੋ ਚੁੱਕੀ ਹੈ ਅਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਤਿਆਰ ਹੋ ਚੁੱਕੀ ਹੈ
status

ਬੇਨਤੀ ਦੇ ਸਥਿਤੀ ਨੰਬਰ ਵਾਪਸ ਦੇਣਾ

  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Not Found"

ਪੂਰੀ ਸੂਚੀ ਲਈ ਦੇਖਣਾ Http ਸੰਦੇਸ਼ ਸੰਦਰਭ ਦਸਤਾਵੇਜ਼
statusText statusText

ਰਾਜ ਸਟੇਟ ਟੈਕਸਟ ਵਾਪਸ ਦਿੰਦਾ ਹੈ (ਉਦਾਹਰਣ ਵਜੋਂ "OK" ਜਾਂ "Not Found")。

ਜਦੋਂ readyState ਬਦਲਦਾ ਹੈ, onreadystatechange ਫੰਕਸ਼ਨ ਚਾਰਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。 4 ਅਤੇ status ਹੈ 200 ਜਦੋਂ ਪ੍ਰਤੀਕਿਰਿਆ ਪ੍ਰਾਪਤ ਹੁੰਦੀ ਹੈ:

ਇੰਸਟੈਂਸ

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

ਸਵੈ ਸਿਖਣ ਦੇਖੋ

onreadystatechange ਈਵੈਂਟ ਚਾਰ ਵਾਰ (1-4) ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ, ਹਰ ਵਾਰ readyState ਬਦਲਦਾ ਹੈ。