AJAX XMLHttpRequest

فهرست مطالب

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

.ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺭﻭﺮﺳ ﮏﯾ ﺯﺍ ﻩﺩﺍﺩ ﺖﺳﺍﻮﺧﺭﺩ ﯼﺍﺮﺑ XMLHttpRequest ﯽﺷ

ﺭﻭﺮﺳ ﻪﺑ ﺖﺳﺍﻮﺧﺭﺩ ﻝﺎﺳﺭﺍ

:ﻢﯿﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ XMLHttpRequest ﯽﺷ()send ﻭ()open ﯼ

xhttp.open("GET", "ajax_info.txt", true);
 xhttp.send();
open(method, url, async)



ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺖﺳﺍﻮﺧﺭﺩ ﻉﻮﻧ

send()

(ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ GET ﯼﺍﺮﺑ) ﺪﻨﮐ ﯽﻣ ﻝﺎﺳﺭﺍ ﺭﻭﺮﺳ ﻪﺑ ﺍﺭ ﺖﺳﺍﻮﺧﺭﺩ

send(string)

(ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ POST ﯼﺍﺮﺑ) ﺪﻨﮐ ﯽﻣ ﻝﺎﺳﺭﺍ ﺭﻭﺮﺳ ﻪﺑ ﺍﺭ ﺖﺳﺍﻮﺧﺭﺩ

url - ﺭﻭﺮﺳ ﺭﺩ ﻞﯾﺎﻓ ﮏﯾ

:ﺖﺳﺍ ﺭﻭﺮﺳ ﺭﺩ ﻞﯾﺎﻓ ﮏﯾ ﺱﺭﺩﺁ ،open() ﺵﻭﺭ url ﺮﺘﻣﺍﺭﺎﭘ

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

ﻭ txt ﺪﻨﻧﺎﻣ ،ﺪﺷﺎﺑ ﯽﻠﯾﺎﻓ ﻉﻮﻧ ﺮﻫ ﺪﻧﺍﻮﺗ ﯽﻣ ﻞﯾﺎﻓ

؟ﺖﺳﺭﺩﺎﻧ ﺎﯾ ﺖﺳﺭﺩ - ﻥﺎﻣﺰﻤﻫﺎﻧ

.ﺪﻧﻮﺷ ﻝﺎﺳﺭﺍ ﻥﺎﻣﺰﻤﻫﺎﻧ ﺕﺭﻮﺻ ﻪﺑ ﺪﯾﺎﺑ ﺭﻭﺮﺳ ﯼﺎﻫ ﺖﺳﺍﻮﺧﺭﺩ

()async open ﺮﺘﻣﺍﺭﺎﭘ

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

،ﻥﺎﻣﺰﻤﻫﺎﻧ ﻝﺎﺳﺭﺍ ﺎﺑ

  • ﺪﯿﻨﮐ ﺍﺮﺟﺍ ﺪﯿﺘﺴﻫ ﺭﻭﺮﺳ ﺦﺳﺎﭘ ﺮﻈﺘﻨﻣ ﻪﮐ ﯽﻟﺎﺣ ﺭﺩ ﺍﺭ ﺮﮕﯾﺩ ﯼﺎﻫ ﺖﭙﯾﺮﮑﺳﺍ

  • ﺪﯿﻨﮐ ﻪﻠﺑﺎﻘﻣ ﺦﺳﺎﭘ ﺎﺑ ،ﺦﺳﺎﭘ ﻥﺪﺷ ﻩﺩﺎﻣﺁ ﺯﺍ ﺲﭘ

.ﺖﺳﺍ async async=true ﺮﺘﻣﺍﺭﺎﭘ ﯼﺍﺮﺑ ﺽﺮﻓ ﺶﯿﭘ ﺭﺍﺪﻘﻣ

.ﺪﯿﻨﮐ ﻑﺬﺣ ﺩﻮﺧ ﺪﮐ ﺯﺍ ﺍﺭ ﺮﺘﻣﺍﺭﺎﭘ ﻦﯿﻣﻮﺳ ﺖﺣﺍﺭ ﻝﺎﯿﺧ ﺎﺑ ﺪﯿﻧﺍﻮﺗ ﯽﻣ

XMLHttpRequest ﻥﺎﻣﺰﻤﻫ (async=false) ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﺍﺮﯾﺯ ﺩﻮﺷ ﯽﻤﻧ ﻪﯿﺻﻮﺗ

؟ﺖﺳﺍﻮﺧﺭﺩ POST ﺎﯾ GET ﺖﺳﺍﻮﺧﺭﺩ

GET ﻩﺩﺎﺳﻊﯾﺮﺳ ﻭ ﺮﺗﺯﺍ ﺮﺗ

:ﻪﮐ ﯽﻧﺎﻣﺯ ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ POST ﯼﺎﻫ ﺖﺳﺍﻮﺧﺭﺩ ﺯﺍ ﻪﺸﯿﻤﻫ ،ﻝﺎﺣ ﻦﯾﺍ ﺎﺑ

  • .(ﺭﻭﺮﺳ ﺭﺩ ﻩﺩﺍﺩ ﻩﺎﮕﯾﺎﭘ ﺎﯾ ﻞﯾﺎﻓ ﮏﯾ ﯽﻧﺎﺳﺭ ﺯﻭﺭ ﻪﺑ) ﺖﺴﯿﻧ ﻪﻨﯾﺰﮔ ﮏﯾ ﺶﮐ ﻞﯾﺎﻓ ﮏﯾ

  • .(ﺩﺭﺍﺪﻧ ﻩﺯﺍﺪﻧﺍ ﺭﺩ ﯽﺘﯾﺩﻭﺪﺤﻣ ﭻﯿﻫ POST) ﺭﻭﺮﺳ ﻪﺑ ﻩﺩﺍﺩ ﯼﺩﺎﯾﺯ ﺭﺍﺪﻘﻣ ﻝﺎﺳﺭﺍ

  • .ﺖﺳﺍ GET ﺯﺍ ﺮﺗ ﻦﻤﯾﺍ ﻭ ﺮﺗ ﯼﻮﻗ POST ،(ﺪﺷﺎﺑ ﻪﺘﺧﺎﻨﺷﺎﻧ ﯼﺎﻫﺮﺘﮐﺍﺭﺎﮐ ﻞﻣﺎﺷ ﺪﻧﺍﻮﺗ ﯽﻣ ﻪﮐ) ﺮﺑﺭﺎﮐ

ﺎﻫ ﺖﺳﺍﻮﺧﺭﺩ ﺖﻓﺎﯾﺭﺩ

:GET ﻩﺩﺎﺳ ﺖﺳﺍﻮﺧﺭﺩ ﮏﯾ

ﻝﺎﺜﻣ

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

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

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>

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

</body>
</html>

:ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ URL ﻪﺑ ﺩﺮﻓ ﻪﺑ ﺮﺼﺤﻨﻣ ﻪﺳﺎﻨﺷ ﮏﯾ ،ﺮﻣﺍ ﻦﯾﺍ ﺯﺍ ﯼﺮﯿﮔﻮﻠﺟ ﯼﺍﺮﺑ .ﺪﯿﻨﮐ ﺖﻓﺎﯾﺭﺩ ﺶﮐ ﻪﺠﯿ

ﻝﺎﺜﻣ

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

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

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("GET", "demo_get.asp?t=" + Math.random());
  xhttp.send();
}
</script>

</body>
</html>

:ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ URL ﻪﺑ ﺍﺭ ﺕﺎﻋﻼﻃﺍ ،ﺪﯿﻨﮐ ﻝﺎﺳﺭﺍ GET ﺵﻭﺭ ﺎﺑ

ﻝﺎﺜﻣ

xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
 xhttp.send();

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

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
  xhttp.send();
}
</script>
 
</body>
</html>

.ﺖﺳﺍ ﻩﺪﺷ ﻩﺩﺍﺩ ﺢﯿﺿﻮﺗ ﯼﺪﻌﺑ ﻞﺼﻓ ﺭﺩ ،ﺖﺳﺍﻮﺧﺭﺩ ﮏﯾ ﻪﺑ ﺭﻭﺮﺳ ﺦﺳﺎﭘ ﻩﻮﺤﻧ ﻭ ﯼﺩﻭﺭﻭ ﺯﺍ ﺭﻭﺮﺳ ﻩﺩﺎﻔﺘﺳﺍ

ﺎﻫ ﺖﺳﺍﻮﺧﺭﺩ ﻝﺎﺳﺭﺍ

:POST ﻩﺩﺎﺳ ﺖﺳﺍﻮﺧﺭﺩ ﮏﯾ

ﻝﺎﺜﻣ

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

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

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>
 
<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("POST", "demo_post.asp");
  xhttp.send();
}
</script>

</body>
</html>

.ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ setRequestHeader() ﺎﺑ HTTP ﻪﺤﻔﺻﺮﺳ ﮏﯾ ،HT

ﻝﺎﺜﻣ

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

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

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>
 
<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("POST", "demo_post2.asp");
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("fname=Henry&lname=Ford");
}
</script>

</body>
</html>
setRequestHeader(header, value)



ﺪﻨﮐ ﯽﻣ ﻪﻓﺎﺿﺍ ﺖﺳﺍﻮﺧﺭﺩ ﻪﺑ ﺍﺭ HTTP ﯼﺎﻫ ﻪﺤﻔﺻﺮﺳ

ﻥﺎﻣﺰﻤﻫ ﺖﺳﺍﻮﺧﺭﺩ

:ﺪﯿﻫﺩ ﺮﯿﯿﻐﺗ false ﻪﺑ open(

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

ﺖﻓﺎﯾ ﺪﯿﻫﺍﻮﺧ ﺰﯿﻧ ﺎﻤﺷ .ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻊﯾﺮﺳ ﺖﺴﺗ ﯼﺍﺮﺑ async=false ﺯﺍ ﺕﺎﻗﻭﺍ ﯽﻫﺎﮔ

.ﺖﺴﯿﻧ onreadystatechange ﻪﺑ ﯼﺯﺎﯿﻧ ،ﺪﻧﺎﻣ ﯽﻣ ﺭﻭﺮﺳ ﻞﯿﻤﮑ

ﻝﺎﺜﻣ

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

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

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<p id="demo">Let AJAX change this text.</p>

<button type="button" onclick="loadDoc()">Change Content</button>

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

</body>
</html>

XMLHttpRequest ﻥﺎﻣﺰﻤﻫ (async=false) ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﺍﺮﯾﺯ ﺩﻮﺷ ﯽﻤﻧ ﻪﯿﺻﻮﺗ

ﺪﻨﻫﺩ ﺭﺍﺪﺸﻫ ﻩﺩﺎﻔﺘﺳﺍ ﺩﺭﻮﻣ ﺭﺩ ﺪﻧﻮﺷﯽﻣ ﻪﯿﺻﻮﺗ ﻥﺭﺪﻣ ﻩﺪﻨﻫﺩﻪﻌﺳﻮﺗ ﯼﺎﻫﺭﺍﺰﺑﺍ