AJAX ﯽﺷ XMLHttpRequest

فهرست مطالب

نمایش فهرست مطالب

.ﺖﺳﺍ XMLHttpRequest ﯽﺷ AJAX ﯽﻠﺻﺍ ﮓﻨﺳ

ﺪﯿﻨﮐ ﺩﺎﺠﯾﺍ XMLHttpRequest ﯽﺷ ﮏﯾ
ﺪﯿﻨﮐ ﻒﯾﺮﻌﺗ ﺍﺭ ﺱﺎﻤﺗ ﻊﺑﺎﺗ ﮏﯾ
ﺪﯿﻨﮐ ﺯﺎﺑ ﺍﺭ XMLHttpRequest ﯽﺷ
ﺭﻭﺮﺳ ﮏﯾ ﻪﺑ ﺖﺳﺍﻮﺧﺭﺩ ﮏﯾ ﻝﺎﺳﺭﺍ

XMLHttpRequest ﯽﺷ

.ﺪﻨﻨﮐ ﯽﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ XMLHttpRequest ﯽﺷ ﺯﺍ ﻥﺭﺪﻣ ﯼﺎﻫﺮﮔﺭﻭﺮ

ﺖﺸﭘ ﺭﺩ ﺭﻭﺮﺳ ﺏﻭ ﮏﯾ ﺎﺑ ﻩﺩﺍﺩ ﻝﺩﺎﺒﺗ ﯼﺍﺮﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ XMLHttpRequ

`ﺪﯿﻨﮐ ﺩﺎﺠﯾﺍ XMLHttpRequest ﯽﺷ ﮏﯾ`

.ﺪﻨﺘﺴﻫ ﯽﻠﺧﺍﺩ XMLHttpRequest ﯽﺷ ﮏﯾ ﯼﺍﺭﺍﺩ (Chrome، Fir

:XMLHttpRequest ﯽﺷ ﮏﯾ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ ﻮﺤﻧ

variable = new XMLHttpRequest();

`ﺪﯿﻨﮐ ﻒﯾﺮﻌﺗ ﺍﺭ ﺱﺎﻤﺗ ﻪﺑ ﺖﺸﮔﺮﺑ ﻊﺑﺎﺗ ﮏﯾ`

.ﺩﻮﺷ ﯽﻣ ﻝﺎﺳﺭﺍ ﯼﺮﮕﯾﺩ ﻊﺑﺎﺗ ﻪﺑ ﺮﺘﻣﺍﺭﺎﭘ ﻥﺍﻮﻨﻋ ﻪﺑ ﻪﮐ ﺖﺳﺍ ﯽﻌﺑﺎﺗ ﯽﻧﺍﻮﺧﺍﺮﻓ ﻊﺑﺎﺗ

ﻪﮐ ﯽﻧﺎﻣﺯ ﺭﺩ ﺪﯾﺎﺑ ﻪﮐ ﺪﺷﺎﺑ ﯼﺪﮐ ﯼﻭﺎﺣ ﺪﯾﺎﺑ callback ﻊﺑﺎﺗ ،ﺖﻟﺎﺣ ﻦﯾﺍ ﺭﺩ

xhttp.onload = function() {
   // What to do when the response is ready
}

`ﺪﯿﻨﮐ ﻝﺎﺳﺭﺍ ﺖﺳﺍﻮﺧﺭﺩ ﮏﯾ`

ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ()send ﻭ()open ﯼﺎﻫﺪﺘﻣ ﺯﺍ ﺪﯿﻧﺍﻮﺗ ﯽﻣ ،ﺭﻭﺮﺳ ﻪﺑ ﺖﺳﺍﻮﺧﺭﺩ ﻝﺎﺳﺭﺍ ﯼﺍﺮﺑ

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

`ﻝﺎﺜﻣ`

// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();

// Define a callback function
xhttp.onload = function() {
  // Here you can use the Data
}

// Send a request
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<div id="demo">
<p>Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}
</script>

</body>
</html>

`ﺎﻫ ﻪﻨﻣﺍﺩ ﻪﺑ ﯽﺳﺮﺘﺳﺩ`

.ﺪﻨﻫﺩ ﯽﻤﻧ ﺍﺭ ﺎﻫ ﻪﻨﻣﺍﺩ ﻪﺑ ﯽﺳﺮﺘﺳﺩ ﻩﺯﺎﺟﺍ ﻥﺭﺪﻣ ﯼﺎﻫﺮﮔﺭﻭﺮﻣ ،ﯽﺘﯿﻨﻣﺍ ﻞﯾﻻﺩ ﻪﺑ

.ﺪﻨﺷﺎﺑ ﻪﺘﺷﺍﺩ ﺭﺍﺮﻗ ﺭﻭﺮﺳ ﮏﯾ ﺭﺩ ﺪﯾﺎﺑ ،ﺩﺭﺍﺩ ﻥﺁ ﯼﺭﺍﺬﮔﺭﺎﺑ ﺭﺩ ﯽﻌﺳ ﻪﮐ XML ﻞﯾﺎﻓ ﻢﻫ ﻭ ﺏﻭ ﻪﺤﻔﺻ ﻢ

.ﺪﻨﻨﮐﯽﻣ ﺯﺎﺑ ﺪﻧﺭﺍﺩ ﺭﺍﺮﻗ W3Schools ﻪﻨﻣﺍﺩ ﺭﺩ ﻪﮐ ﺍﺭ XML ﯼﺎﻫﻞﯾﺎﻓ ﻪﻤﻫ W3Schools ﺭ

،ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺩﻮﺧ ﺏﻭ ﺕﺎﺤﻔﺻ ﺯﺍ ﯽﮑﯾ ﺭﺩ ﻻﺎﺑ ﻝﺎﺜﻣ ﺯﺍ ﺪﯿﻫﺍﻮﺧ ﯽﻣ ﺮﮔﺍ

`XMLHttpRequest ﺵﻭﺭ ءﯽﺷ`

new XMLHttpRequest(): ﺪﻨﮐ ﯽﻣ ﺩﺎﺠﯾﺍ ﺪﯾﺪﺟ XMLHttpRequest ﯽﺷ ﮏﯾ
abort(): ﺪﻨﮐ ﯽﻣ ﻮﻐﻟ ﺍﺭ ﯽﻠﻌﻓ ﺖﺳﺍﻮﺧﺭﺩ
getAllResponseHeaders(): ﺪﻧﺍﺩﺮﮔ ﯽﻣﺮﺑ ﺍﺭ ﺭﺪﻫ ﺕﺎﻋﻼﻃﺍ
getResponseHeader(): ﺪﻧﺍﺩﺮﮔ ﯽﻣﺮﺑ ﺍﺭ ﯽﺻﺎﺧ ﻪﺤﻔﺻﺮﺳ ﺕﺎﻋﻼﻃﺍ
open(method, url, async, user, psw): ﺵﻭﺭ ﺖﺳﺍﻮﺧﺭﺩ
send(): ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ GET ﯼﺎﻫ ﺖﺳﺍﻮﺧﺭﺩ ﯼﺍﺮﺑ ﺪﻨﮐ ﯽﻣ ﻝﺎﺳﺭﺍ ﺭﻭﺮﺳ ﻪﺑ ﺍﺭ ﺖﺳﺍﻮﺧﺭﺩ
send(string): ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ POST ﯼﺎﻫ ﺖﺳﺍﻮﺧﺭﺩ ﯼﺍﺮﺑ .ﺪﻨﮐ ﯽﻣ ﻝﺎﺳﺭﺍ ﺭﻭﺮﺳ ﻪﺑ ﺍﺭ ﺖﺳﺍﻮﺧﺭﺩ
setRequestHeader(): ﺪﻨﮐ ﯽﻣ ﻪﻓﺎﺿﺍ ﻝﺎﺳﺭﺍ ﯼﺍﺮﺑ ﺭﺪﻫ ﻪﺑ ﺭﺍﺪﻘﻣ/ﺐﺴﭼﺮﺑ ﺖﻔﺟ ﮏﯾ

`XMLHttpRequest ﯽﺷ ﯼﺎﻫ ﯽﮔﮋﯾﻭ`

onload: .ﺩﻮﺷ ﯽﻧﺍﻮﺧﺍﺮﻓ (ﯼﺭﺍﺬﮔﺭﺎﺑ) ﺖﺳﺍﻮﺧﺭﺩ ﺖﻓﺎﯾﺭﺩ ﻡﺎﮕﻨﻫ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺍﺭ ﯽﻌﺑﺎﺗ
onreadystatechange: ﺩﻮﺷ ﯽﻧﺍﻮﺧﺍﺮﻓ readyState ﯽﮔﮋﯾﻭ ﺮﯿﯿﻐﺗ ﺎﺑ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺍﺭ ﯽﻌﺑﺎﺗ
readyState: .ﺩﺭﺍﺩ ﯽﻣ ﻪﮕﻧ ﺍﺭ XMLHttpRequest ﺖﯿﻌﺿﻭ
responseText: ﺪﻧﺍﺩﺮﮔ ﯽﻣﺮﺑ ﯼﺍ ﻪﺘﺷﺭ ﺕﺭﻮﺻ ﻪﺑ ﺍﺭ ﺦﺳﺎﭘ ﯼﺎﻫ ﻩﺩﺍﺩ
responseXML: ﺪﻧﺍﺩﺮﮔ ﯽﻣﺮﺑ XML ﯼﺎﻫ ﻩﺩﺍﺩ ﻥﺍﻮﻨﻋ ﻪﺑ ﺍﺭ ﺦﺳﺎﭘ ﯼﺎﻫ ﻩﺩﺍﺩ
status: 404: "Not Found" "ﻉﻮﻨﻤﻣ" :br>200: "OK" 403>ﺪﻧﺍﺩﺮﮔﯽﻣﺮﺑ ﺍﺭ ﺖﺳﺍﻮﺧﺭﺩ ﮏﯾ ﺖﯿ
statusText: («Not Found» ﺎﯾ «OK» ﻼًﺜﻣ) ﺪﻧﺍﺩﺮﮔﯽﻣﺮﺑ ﺍﺭ ﺖﯿﻌﺿﻭ ﻦﺘﻣ

`onload ﯽﮔﮋﯾﻭ`

ﺩﻮﺷ ﺍﺮﺟﺍ ﻪﮐ ﯽﻧﺎﻣﺯ ﺎﺗ ﺪﯿﻨﮐ ﻒﯾﺮﻌﺗ ﺍﺭ ﺱﺎﻤﺗ ﻪﺑ ﺖﺸﮔﺮﺑ ﻊﺑﺎﺗ ﮏﯾ ﺪﯿﻧﺍﻮﺗ ﯽﻣ XMLHttpRequest ﯽﺷ

`ﻝﺎﺜﻣ`

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML =
    this.responseText;
  }
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}
</script>

</body>
</html>

`ﺱﺎﻤﺗ ﻪﺑ ﺦﺳﺎﭘ ﻪﻧﺎﮔﺪﻨﭼ ﯼﺎﻫﺩﺮﮑﻠﻤﻋ`

ﺪﯿﻨﮐ ﺩﺎﺠﯾﺍ ﻥﺁ ﯼﺍﺮﺑ ﻊﺑﺎﺗ ﮏﯾ ﺪﯾﺎﺑ ،ﺪﯾﺭﺍﺩ ﺖﯾﺎﺳ ﺏﻭ ﮏﯾ ﺭﺩ AJAX ﺭﺎﮐ ﮏﯾ ﺯﺍ ﺶﯿﺑ ﺮﮔﺍ

ﻥﺁ ﯽﻧﺍﻮﺧﺍﺮﻓ ﻡﺎﮕﻨﻫ ﺭﺩ ﻪﮐ ﺪﺷﺎﺑ ﯽﻌﺑﺎﺗ ﻭ URL ﯼﻭﺎﺣ ﺪﯾﺎﺑ ﻊﺑﺎﺗ ﯽﻧﺍﻮﺧﺍﺮﻓ

`ﻝﺎﺜﻣ`

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) {
  // action goes here
}

function myFunction2(xhttp) {
  // action goes here
}

`onreadystatechange ﯽﮔﮋﯾﻭ`

.ﺩﺭﺍﺩ ﯽﻣ ﻪﮕﻧ ﺍﺭ XMLHttpRequest ﺖﯿﻌﺿﻭ readyState ﯽﮔﮋﯾ

.ﺩﻮﺷ ﺍﺮﺟﺍ ReadState ﺮﯿﯿﻐﺗ ﻡﺎﮕﻨﻫ ﺪﯾﺎﺑ ﻪﮐ ﺪﻨﮐﯽﻣ ﻒﯾﺮﻌﺗ ﺍﺭ callback ﻊﺑﺎﺗ ﮏﯾ

.ﺪﻧﺭﺍﺩ ﯽﻣ ﻪﮕﻧ ﺍﺭ XMLHttpRequest ﯽﺷ ﺖﯿﻌﺿﻭ statusText

onreadystatechange: ﺩﻮﺷ ﯽﻧﺍﻮﺧﺍﺮﻓ readyState ﯽﮔﮋﯾﻭ ﺮﯿﯿﻐﺗ ﺎﺑ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺍﺭ ﯽﻌﺑﺎﺗ
readyState: .ﺩﺭﺍﺩ ﯽﻣ ﻪﮕﻧ ﺍﺭ XMLHttpRequest ﺖﯿﻌﺿﻭ
status: 200: "OK" 403: "ﻉﻮﻨﻤﻣ"
statusText: («Not Found» ﺎﯾ «OK» ﻼًﺜﻣ) ﺪﻧﺍﺩﺮﮔﯽﻣﺮﺑ ﺍﺭ ﺖﯿﻌﺿﻭ ﻦﺘﻣ

.ﺩﻮﺷ ﯽﻣ ﯽﻧﺍﻮﺧﺍﺮﻓ ﺪﻨﮐ ﯽﻣ ﺮﯿﯿﻐﺗ ReadState ﻪﮐ ﺭﺎﺑ ﺮﻫ onreadyst

:ﺖﺳﺍ ﻩﺩﺎﻣﺁ ﺦﺳﺎﭘ ،ﺪﺷﺎﺑ 200 ﺖﯿﻌﺿﻭ ﻭ code class="w3-codespan">readyState 4> ﯽﺘﻗﻭ

`ﻝﺎﺜﻣ`

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();
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
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();
}
</script>

</body>
</html>

.readyState ﺭﺩ ﺮﯿﯿﻐﺗ ﺮﻫ ﯼﺍﺮﺑ ﺭﺎﺑ ﮏﯾ ،ﺩﻮﺷ ﯽﻣ ﯼﺯﺍﺪﻧﺍ ﻩﺍﺭ (4-1) ﺭﺎﺑ ﺭﺎﻬﭼ


    
      ← صفحه قبلی
    
    
      صفحه بعد →