post请求细节
例1 对《get请求的细节》中例1进行改进"把get换成post"
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>simple document</title>
<meta charset="UTF-8">
<script type="text/javascript">
function checkname(){
var nm=document.getElementById('username').value;
//把传递给服务器端的数据组织为请求字符串
var info='name='+nm+'&color=yellow';
//建立Ajax对象
var xhr=new XMLHttpRequest();
//创建一个新的http请求，并设置请求的一个服务器端的地址,
//对象.open(请求方式get/post方式,url地址);
xhr.onreadystatechange=function(){
//获得readyState状态变化信息
//console.log(xhr.readyState);
//要随时感知ajax的变化
/*onreadystatechange是ajax的一个事件，在readyState状态发生变化的时候被触发，
为了感知最多的状态信息，要设置在对象创建完毕之后*/
if(xhr.readyState==4){
alert(xhr.responseText);
//document.getElementById('result').innerHTML=xhr.responseText;
}
}
xhr.open('POST','./ajax_04.php');
//发送http请求
xhr.send(info);
}
</script>
<style type="text/css"></style>
</head>
<body>
<h2>post请求(ajax用户校验)</h2>
用户名:<input type="text" id="username" onblur="checkname()"/>
<div id="result"></div>
</body>
</html>
php代码
<?php
//服务端用户名校验
$exists_name=array('mary','jack','linken','bier');
//输出客户端传递过来的用户名信息
//判断用户输入名字是否存在
print_r($_POST);
//if(in_array($name,$exists_name)){
//echo "用户名已经占用";
//}else{
//echo '恭喜,可以使用';
//}
?>
改进后html代码
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>simple document</title>
<meta charset="UTF-8">
<script type="text/javascript">
function checkname(){
var nm=document.getElementById('username').value;
//把传递给服务器端的数据组织为请求字符串
var info='name='+nm+'&color=yellow';
//建立Ajax对象
var xhr=new XMLHttpRequest();
//创建一个新的http请求，并设置请求的一个服务器端的地址,
//对象.open(请求方式get/post方式,url地址);
xhr.onreadystatechange=function(){
//获得readyState状态变化信息
//console.log(xhr.readyState);
//要随时感知ajax的变化
/*onreadystatechange是ajax的一个事件，在readyState状态发生变化的时候被触发，
为了感知最多的状态信息，要设置在对象创建完毕之后*/
if(xhr.readyState==4){
alert(xhr.responseText);
//document.getElementById('result').innerHTML=xhr.responseText;
}
}
xhr.open('POST','./ajax_06.php');
//发送http请求
//form表单数据是组织为xml格式传递给服务器端
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
//setRequestHeader把传递的数据组织为xml格式模仿form表单传递数据必须在post之后。
xhr.send(info);
}
</script>
<style type="text/css"></style>
</head>
<body>
<h2>POST请求(ajax用户校验)</h2>
用户名:<input type="text" id="username" onblur="checkname()"/>
<div id="result"></div>
</body>
</html>
