ajax 发送get、post请求

89 阅读 0 评论 59 点赞

我是靠谱客的博主陶醉月饼，这篇文章主要介绍ajax 发送get、post请求，现在分享给大家，希望可以做个参考。

1.post请求写法（建议写法）。看 function checkName()

复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>123</title>
</head>
<body>
<h2>登录</h2>
<form action="reg" enctype="application/x-www-form-urlencoded">
名 <input name="name" onblur="checkName()" id="name"/>
<span id="check"></span><br><br>
密<input type="password" name="pwd"/><br><br>
<input type="submit" value="注册"/>
</form>

<script type="text/javascript">
//获得浏览器对象的方法
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();//目前都是这个对象
}else{
xhr = ActiveXObject('Microsoft.XMLHTTP');//需不需要new对象？？？？？
}
return xhr;
}
function checkName(){
//调用方法获得对象
var xhr = getXhr();
//得到节点元素节点，在上面表单里面
var name = document.getElementById("name").value;
//得到节点元素节点
var span = document.getElementById("check");
//设置节点元素属性
span.innerHTML="loading...";//设置显示的内容
span.style.color="orange";
//请求方式 和 请求命令
xhr.open ("post","checkName");
//xhr.setRequestHeader必须写在open和send之间
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
//传的参数名字和参数的值
xhr.send('name='+name);
//给状态码赋予方法，只有是有效的状态码才运行下面代码
xhr.onreadystatechange=function(){
//请求类型正确且状态正确
if(xhr.readyState==4&&xhr.status==200){
var message = xhr.responseText;
if(message=="ok"){
span.innerHTML="用户可以使用";
span.style.color="green";
}else if(message=="no"){
span.innerHTML="用户名被占用";
span.style.color="orange";
}else{
span.innerHTML="不能为空";
span.style.color="red";
}
}
}
}
</script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>123</title>
</head>
<body>
<h2>登录</h2>
<form action="reg" enctype="application/x-www-form-urlencoded">
名 <input name="name" onblur="checkName()" id="name"/>
<span id="check"></span><br><br>
密<input type="password" name="pwd"/><br><br>
<input type="submit" value="注册"/>
</form>
<!-- js代码 -->
<script type="text/javascript">
//获得浏览器对象的方法
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();//目前都是这个对象
}else{
xhr = ActiveXObject('Microsoft.XMLHTTP');//需不需要new对象？？？？？
}
return xhr;
}
function checkName(){
//调用方法获得对象
var xhr = getXhr();
//得到节点元素节点，在上面表单里面
var name = document.getElementById("name").value;
//得到节点元素节点
var span = document.getElementById("check");
//设置节点元素属性
span.innerHTML="loading...";//设置显示的内容
span.style.color="orange";
//请求方式 和 请求命令
xhr.open ("post","checkName");
//xhr.setRequestHeader必须写在open和send之间
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
//传的参数名字和参数的值
xhr.send('name='+name);
//给状态码赋予方法，只有是有效的状态码才运行下面代码
xhr.onreadystatechange=function(){
//请求类型正确且状态正确
if(xhr.readyState==4&&xhr.status==200){
var message = xhr.responseText;
if(message=="ok"){
span.innerHTML="用户可以使用";
span.style.color="green";
}else if(message=="no"){
span.innerHTML="用户名被占用";
span.style.color="orange";
}else{
span.innerHTML="不能为空";
span.style.color="red";
}
}
}
}
</script>
</body>
</html>

2. get请求写法。看 function checkName()

复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>123</title>
</head>
<body>
<h2>登录</h2>
<form action="reg" enctype="application/x-www-form-urlencoded">
名 <input name="name" onblur="checkName()" id="name"/>
<span id="check"></span><br><br>
密<input type="password" name="pwd"/><br><br>
<input type="submit" value="注册"/>
</form>
<script type="text/javascript">
//获得浏览器对象的方法
function getXhr(){
var xhr = null;
//获取浏览器对象
if(window.XMLHttpRequest){
//目前都是这个对象
xhr = new XMLHttpRequest();
}else{
//古老的浏览器对象，目前不用
xhr = ActiveXObject('Microsoft.XMLHTTP');
}
return xhr;
}
function checkName(){
//调用方法获取ajax对象
var xhr = getXhr();
//获取上面的的节点
var name = document.getElementById("name").value;
var span = document.getElementById("check");
span.innerHTML="loading...";
span.style.color="yello";
//准备请求
xhr.open ('get','checkName?name='+name+'&'+Math.random());
//发送请求
xhr.send(null);
//设置回调函数
xhr.onreadystatechange=function(){
//请求类型正确且状态正确
if(xhr.readyState==4&&xhr.status==200){
var message = xhr.responseText;
if(message=="ok"){
span.innerHTML="用户可以使用";
span.style.color="green";
}else if(message=="no"){
span.innerHTML="用户名被占用";
span.style.color="orange";
}else{
span.innerHTML="不能为空";
span.style.color="red";
}
}
}
}
</script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>123</title>
</head>
<body>
<h2>登录</h2>
<form action="reg" enctype="application/x-www-form-urlencoded">
名 <input name="name" onblur="checkName()" id="name"/>
<span id="check"></span><br><br>
密<input type="password" name="pwd"/><br><br>
<input type="submit" value="注册"/>
</form>
<script type="text/javascript">
//获得浏览器对象的方法
function getXhr(){
var xhr = null;
//获取浏览器对象
if(window.XMLHttpRequest){
//目前都是这个对象
xhr = new XMLHttpRequest();
}else{
//古老的浏览器对象，目前不用
xhr = ActiveXObject('Microsoft.XMLHTTP');
}
return xhr;
}
function checkName(){
//调用方法获取ajax对象
var xhr = getXhr();
//获取上面的的节点
var name = document.getElementById("name").value;
var span = document.getElementById("check");
span.innerHTML="loading...";
span.style.color="yello";
//准备请求
xhr.open ('get','checkName?name='+name+'&'+Math.random());
//发送请求
xhr.send(null);
//设置回调函数
xhr.onreadystatechange=function(){
//请求类型正确且状态正确
if(xhr.readyState==4&&xhr.status==200){
var message = xhr.responseText;
if(message=="ok"){
span.innerHTML="用户可以使用";
span.style.color="green";
}else if(message=="no"){
span.innerHTML="用户名被占用";
span.style.color="orange";
}else{
span.innerHTML="不能为空";
span.style.color="red";
}
}
}
}
</script>
</body>
</html>