get和post是http请求方法最主要的两种方式。
get:
先实现一个简单的get请求
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Document</title> </head> <body> <input type="button" id="submit" value="submit"> <div id="txt"></div> <script> /*对象监听*/ document.getElementById("submit").onclick = function(){ get("example.php?name=fuduji&age=23",function(data){ document.getElementById("txt").innerHTML = data;//请求成功则执行此操作 },true) } /*简单的一个get函数封装*/ function get(url,callback,async){//3个参数，url表示请求地址，async表示是否异步，callback表示一个回调函数 var xhr = new XMLHttpRequest(); var url = urlParam(url); //编码 async = async ? async : true;//是否异步 xhr.onreadystatechange = function(){ if(xhr.readyState ==4){ callback(xhr.responseText); //回调 } } xhr.open("get",url,async); xhr.send(null); } /*对请求的url进行uri组件编码*/ function urlParam(url){ var arr = url.split("?"); var location = arr[0]; var uri = arr[1]; var arr1 = uri.split("&"); for(var i =0; i<arr1.length; i++){ var arr2 = arr1[i].split("="); var name = encodeURIComponent(arr2[0]); var value = encodeURIComponent(arr2[1]); arr1[i] = name + "=" + value; } uri = arr1.join("&"); arr = location + "?" + uri; return arr; } </script> </body> </html>
example.php
<?php echo 'hello '.$_GET['name'].',your age is '.$_GET['age']; ?>
说明一下：get参数中，url是必须进行正确编码(encodeURIComponent)，get请求经常出错就在这个地方，还有一个问题是缓存问题，如果请求页面被设置缓存，而你不想要缓存，可以在urlParam返回值中加上Math.random()用来告诉服务器，这是不同的请求；另外一个参数是设置是否异步，一般而言是必须设置为异步的，同步会阻塞js执行或者页面渲染，在本示例中可能无法看出来。