使用原生ajax發送post請求完整案例

使用ajax發送數據實現前後臺的交互,我想是web開發最基礎的技能了。近來dz開發因爲不兼容jquery,所以只能使用原生js發送數據,不想還遇到很多問題。在這裏分析總結一下。先來一個使用ajax發送post表單數據的案例。

<html>
<head>
<title>
ajax發送post請求實例
</title>
</head>
<body>
<form method="post" action="index.php" name="userinfo">
姓名:<input type="text" name="username" />
學校:<input type="text" name="school"/>
個人簡介:<textarea name="selfinfo"></textarea>
<a href="javascript:;" οnclick="ajaxpost()">提交</a>
</form>
<script type="text/javascript">
function ajaxpost(){
var f = document.userinfo;
var uname = f.username.value;
var uschool = f.school.value;
var uinfo = f.selfinfo.value;
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){
		var obj = eval('('+xmlhttp.responseText+')');
		alert('姓名:'+obj.uname+'學校:'+obj.uschool+'個人簡介:'+obj.uinfo);
    }
}
xmlhttp.open("post","index1.php",true);
/*
發送post請求時此句萬萬不能少
在Form元素的語法中,EncType表明提交數據的格式
用 Enctype 屬性指定將數據回發到服務器時瀏覽器使用的編碼類型。
application/x-www-form-urlencoded:窗體數據被編碼爲名稱/值對。這是標準的編碼格式。
multipart/form-data:窗體數據被編碼爲一條消息,頁上的每個控件對應消息中的一個部分。
text/plain:窗體數據以純文本形式進行編碼,其中不含任何控件或格式字符
*/
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send('uname='+uname+'&uschool='+uschool+'&uinfo='+uinfo);
}
</script>
</body>
</html>

index1.php

<?php
if(!empty($_POST)){
	echo json_encode($_POST);
}

有幾點要注意的

1:ajax不能跨域請求數據:當跨域時:如當前腳本域名爲:localhost/index.php,請求的url爲127.0.0.1,則發送請求失敗,或者服務器能收到請求,但是xmlhttp.status=0,瀏覽器接受不到服務器返回的數據。

何爲跨域?跨域如何發送請求數據,這篇博客有很好的解釋。

http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html#m0


2:當用for循環發送請求時,因爲for循環速度遠大於一次請求完成的速度,所以ajax只能收到最後一次請求的數據。

3:有關json,php函數json_encode()和json_decode()都只能接受ut8格式編碼的字符串,否者返回null。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章