ajax的具体步骤


今天给大家介绍的是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"; 
} 
?>

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

文章摘自执念博客

声明:Net-X|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - ajax的具体步骤


Carpe Diem and Do what I like