前端 ajax的get和post方法 2015年12月3日
学习
0 条评论

通过ajax进行get和post请求。

现在基本上都是用jQuery来进行ajax的处理了…

为了学习，我还是用了两种方法，一种是原生的ajax方法，一种是jQuery中的简便方法。

一、实现方式

（1）get方法

1.jQuery中

1
$.get(url, data，function (data) {})

url是你发送请求的地址，data填写你get请求的参数，function是你获得回传数据的处理方法

1
2
$.get(url, "value=" + $(".m").val()+"&id="+Math.random(), function (data) {
$(".xianshi").html(data);})

  1. url是你服务端的地址，我用的是servlet写的服务端，这个你自己指定。
  2. url是你服务端的地址，我用的是servlet写的服务端，这个你自己指定。

基本上就是按照这种格式去传

1
"value=" + $(".m").val()+"&id="+Math.random()

value是参数名，服务端将根据参数名做出不同的处理。后面跟的$(“.m”).val()是参数值。

为什么要加上这个…+”&id=”+Math.random()？

那是因为浏览器是个喜欢偷懒的东西，你经常访问同一页面，浏览器就倾向于调用缓存。这时，你就算改变了网页，由于缓存的存在，你实际上访问的网页依旧是未改变的，很让人蛋疼。

这个时候你就需要告诉浏览器，我这次访问的网页和上次的不一样哦，你不要再拿以前的东西敷衍我啊！

怎么告诉浏览器，两次请求不同呢？那就传入随机的id参数，浏览器就会认为，有新东西进来了，需要重新加载网页。那么就减少了缓存的影响。

2.直接ajax

1
2
3
4
5
6
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
$(".xianshi").html(xmlhttp.responseText);}}
xmlhttp.open("GET","ajax?value="+ $(".m").val()+"&id="+Math.random(),true)
xmlhttp.send();

ajax的直接方法其实就是调用XMLHttpRequest()对象的一系列方法实现的。

首先，你需要声明XMLHttpRequest()对象：

1
var xmlhttp = new XMLHttpRequest();

其次，你需要构造get请求，格式为：

1
2
xmlhttp.open("GET","页面和你要传的参数",是否采用异步)
xmlhttp.open("GET","ajax?value="+ $(".m").val()+"&id="+Math.random(),true)

然后，你就要把你的请求给传送出去：

1
xmlhttp.send();

最后，你需要处理回调函数：

1
2
3
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
$(".xianshi").html(xmlhttp.responseText);}}

  1. onreadystatechange：有返回值。
  2. if (xmlhttp.readyState == 4 && xmlhttp.status == 200)，这个是条件判断。
  3. readyState表示数据接收完毕，此时可以通过通过responseBody和responseText获取完整的回应数据。
  4. status表示请求的状态，200既是访问成功

条件判断之后，就进行函数的处理，responseBody直接将返回值写入http的body中，而responseText是返回的全部文本信息，只是一个输出的字符串而已。

（2）post方法

1.jQuery中

1
$.post(url,{你要传的参数},function(data){你对回传数据进行的函数处理})

和get差不多，基本上的区别就是换了个post，参数需要用{}括起来传

1
2
$.post(url,{value:$(".m").val(),id:Math.random()},function(data){
$(".xianshi").html(data);})

特别注意参数需要{}起来！

2.直接ajax

1
2
3
4
5
6
7
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
$(".xianshi").html(xmlhttp.responseText);}}
xmlhttp.open("POST","ajax",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("value="+$(".m").val()+"&id="+Math.random());

首先，你还是需要声明 XMLHttpRequest对象：

1
var xmlhttp = new XMLHttpRequest();

其次，你需要指定post的信息：

1
xmlhttp.open("POST","ajax",true);

然后，你需要构造post请求头（注意post和get不同，一点要加上请求头！）：

1
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

再然后，把post和参数发送出去：

1
xmlhttp.send("value="+$(".m").val()+"&id="+Math.random());

最后，处理回调函数，和get中是一样的：

1
2
3
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
$(".xianshi").html(xmlhttp.responseText);}}

二、代码实现

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.4.min.js"></script>
</head>
<body>
<div class="xianshi">显示</div>
<br>
<input type="text" placeholder="用户名" class="m">
<button type="submit" onclick="dcheck()">按下去</button>
<script>
    function acheck() {
        var url = "ajax";
        $.get(url, "value=" + $(".m").val()+"&id="+Math.random(), function (data) {
            $(".xianshi").html(data);
        })
    }
 
    function bcheck() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                $(".xianshi").html(xmlhttp.responseText);
            }
        }
        xmlhttp.open("GET","ajax?value="+ $(".m").val()+"&id="+Math.random(),true)
        xmlhttp.send();
    }
 
    function ccheck(){
        var url ="ajax";
        $.post(url,{value:$(".m").val(),id:Math.random()},function(data){
            $(".xianshi").html(data);
        })
    }
    
    function dcheck() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                $(".xianshi").html(xmlhttp.responseText);
            }
        }
        xmlhttp.open("POST","ajax",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send("value="+$(".m").val()+"&id="+Math.random());
    }
</script>
</body>
</html>

三、总结

大概就是这样了，还是比较简单的。jQuery方式比较简单简便，直接用就可以了。

Post Views: 56