1.Get请求
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> //页面加载完毕后 创建对象 window.onload = function () { document.getElementById("btnGet").onclick = function () { //1.创建异步对象（类似小浏览器） var xhr = new XMLHttpRequest(); //2.设置参数，第三参数表示是否异步发送 //Get请求，请求参数是紧跟url后面 xhr.open("Get", "Handler.ashx?Name=Kim&&Age=18", true); //get请求会有缓存，让get不从浏览器读缓存 xhr.setRequestHeader("If-Modified-Since", "0"); //3.设置回调函数 xhr.onreadystatechange = function () { //当完全接收响应报文后 并且 状态码为200 if (xhr.readyState == 4 && xhr.status == 200) { //获取响应报文 var res = xhr.responseText; alert(res); } }; //4.发送异步请求 //Get请求没有请求体，则为null xhr.send(null); }; } </script> </head> <body> <input type="button" id="btnGet" value="Get请求方式"/> </body> </html>
2.Post请求
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> //页面加载完毕后 创建对象 window.onload = function () { //绑定点击事件 document.getElementById("btnPost").onclick = function () { //1.创建异步对象（类似一个小浏览器） var xhr = new XMLHttpRequest(); //2.设置参数，第三个参数表示是否异步发送 xhr.open("Post", "Handler.ashx", true); //设置请求报文体的编码格式，表单得到默认编码 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //3.设置回调函数 xhr.onreadystatechange = function () { //当完全接收响应报文 并且 响应状态码为200 if (xhr.readyState == 4 && xhr.status == 200) { //获取香型报文 var res = xhr.responseText; alert(res); } }; //直接拼接字符串key=value&&key=value xhr.send("Name=Kim&&Age=18"); } } </script> </head> <body> <input type="button" id="btnPost" value="Post请求"/> </body> </html>
原文：http://www.cnblogs.com/2star/p/4367324.html