通过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);}) |
- url是你服务端的地址,我用的是servlet写的服务端,这个你自己指定。
- 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);}} |
- onreadystatechange:有返回值。
- if (xmlhttp.readyState == 4 && xmlhttp.status == 200),这个是条件判断。
- readyState表示数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据。
- 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方式比较简单简便,直接用就可以了。