2

重複の可能性:
jqueryなしでajax呼び出しを行うには?

jQueryを使用せずにajaxを使用してWebページを非同期に更新するにはどうすればよいですか?

4

3 に答える 3

5

若い新人開発者として、私は JQuery に慣れすぎて JavaScript を恐れるようになりました (GetElementById JavaScript とは異なり、オブジェクト指向で、その場で関数を渡し、クロージャーは失敗と喜びの違いです) JavaScript)。

このコピー/貼り付け可能な POST ajax フォームを提供しています。Microsoft のニュアンスを無視して、私のような他の人が例から学ぶのに役立つ最小限のコメントを付けています。

//ajax.js
function myAjax() {
 var xmlHttp = new XMLHttpRequest();
 var url="serverStuff.php";
 var parameters = "first=barack&last=obama";
 xmlHttp.open("POST", url, true);

 //Black magic paragraph
 xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 xmlHttp.setRequestHeader("Content-length", parameters.length);
 xmlHttp.setRequestHeader("Connection", "close");

 xmlHttp.onreadystatechange = function() {
  if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
   document.getElementById('ajaxDump').innerHTML+=xmlHttp.responseText+"<br />";
  }
 }

 xmlHttp.send(parameters);
}

サーバーコードは次のとおりです。

<?php
 //serverStuff.php

 $lastName= $_POST['last'];
 $firstName = $_POST['first'];

 //everything echo'd becomes responseText in the JavaScript
 echo "Welcome, " . ucwords($firstName).' '.ucwords($lastName);

?>

そしてHTML：

<!--Just doing some ajax over here...-->
<a href="#" onclick="myAjax();return false">Just trying out some Ajax here....</a><br />
<br />
<span id="ajaxDump"></span>

うまくいけば、コピー/ペーストする POST ajax の例があれば、他の新しい開発者は、JQuery トレーニング ホイールなしで JavaScript を試す言い訳が 1 つ少なくなります。

于 2012-08-30T00:58:16.797 に答える
4

XMLHttpRequestオブジェクトに精通すると、それを操作するために使用するJavaScriptフレームワーク（ある場合）について適切な決定を下すことができます。

于 2012-08-30T00:59:46.830 に答える
1

最近 AJAX 呼び出しを行う最良の方法は、JQuery を使用することです。とにかく、これは W3schools.com の例です。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>
于 2012-08-30T00:58:21.030 に答える