XMLHttpRequest
| 代碼如下 |
複製代碼 |
<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(“txtHint”).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,”filefunction.php?dt=attatchment&u=abc.txt”,true);
xmlhttp.send();
}
</script> |
下面來看看jquery+ajax/" target="_blank">jquery ajax應用
jQuery Ajax 事件
Ajax請求會產生若干不同的事件，我們可以訂閱這些事件並在其中處理我們的邏輯。在jQuery這裡有兩種Ajax事件：局部事件 和 全域事件。
局部事件就是在每次的Ajax請求時在方法內定義的，例如：
| 代碼如下 |
複製代碼 |
$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ...
}); |
同時我們還可以直接使用如
jQuery.get( url, [data], [callback] )：使用GET方式來進行非同步請求
load( url, [data], [callback] ) ：載入遠程 HTML 檔案代碼並插入至 DOM 中
jQuery.post( url, [data], [callback], [type] ) ：使用POST方式來進行非同步請求
這些都很不錯，只適合小量input如果有大量的我們必須使用ajax - serialize() 方法方法了，如下
| 代碼如下 |
複製代碼 |
html <form method="post" id="submitform" name="submitform" ><tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="6%">手機：</td>
<td width="21%"><input name="mo" type="text" class="inp" id="mo" size="17" /></td>
<td width="8%" align="right">郵箱：</td>
<td width="21%"><input name="email" type="text" class="inp" id="email" size="17" /></td>
<td width="44%"><span class="gray"></span></td>
</tr>
</table></td>
</tr>
<tr>
<td height="90" align="left">
<textarea name="bak" cols="80" rows="5" class="lab" id="bak1"></textarea></td>
</tr>
<tr>
<td><input name="button" type="button" class="but" id="buttonajax" value="提交留言" />
<span class="gray"> </span></td>
</tr>
</form> $('#buttonajax').click(function(){
//alert($(this).val());
//checkem();
var postData = $('#submitform').serialize();
//alert(postData);
$.ajax({
type: "POST",
url: "/postajax.php",
data: postData,
success: function(msg){
//alert(msg);
if(msg==1){
alert('您的問題已提交成功！');
}
}
});
}) |
