今天给大家介绍的是ajax的具体步骤,数据的提交最常用的就是“get”方式和“post”方式,因此下面介绍的就是ajax的这两种方式
第一种就是“get”方式:

    function creatXhr(){
		var xhr = null;
		if(window.XMLHttpRequest){
			xhr = new XMLHttpRequest();
		}else{
			//ie5,ie6不支持XMLHttpRequest
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		return xhr;
	}
	var xhr = creatXhr();
	if(xhr != null){
		xhr.open("get","server.php?name=guo",true);
		xhr.onreadystatechange = function(){
			if(xhr.readyState === 4){
				if(xhr.status === 200){
					doResponse(xhr);
				}else{
					alert("请求出错!");
				}
			}
		}
		xhr.send(null);
	}
	function doResponse(xhr){
		var str = xhr.responseText;//其中xhr.responseText就是后天传送过来的数据
		alert(str);
	}

需要注意的是“get”方式中的xhr.send(null);代表发送的意思,里面必须是null,发送的数据在xhr.open中的url拼接而成。

第二种的“post”方式:

    function creatXhr(){
		var xhr = null;
		if(window.XMLHttpRequest){
			xhr = new XMLHttpRequest();
		}else{
			//ie5,ie6不支持XMLHttpRequest
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		return xhr;
	}
	var xhr = creatXhr();
	if(xhr != null){
		xhr.open("post","server.php",true);
		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xhr.onreadystatechange = function(){
			if(xhr.readyState === 4){
				if(xhr.status === 200){
					doResponse(xhr);
				}else{
					alert("请求出错!");
				}
			}
		}
		xhr.send("name=li");
	}
	function doResponse(xhr){
		var str = xhr.responseText;
		alert(str);
	}

ajax的“post”方式比“get”方式多了一句xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");,这一句是必不可少的,要不然数据是发送不过去的。发送的数据在xhr.send()中拼接而成。

其中两种方式用的php文件中的代码也给大家,

<?php 
     $name = $_REQUEST['name']; 
     if($name){ 
         echo $name; 
     }else{ 
         echo "error"; 
     } 
?>

大家可以自行尝试,如果有什么疑问,可以在下方留言。

 

 

声明:版权所有,盗版必究  执念博客

转载:转载请标明原文链接,谢谢合作

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注