在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
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 type="text/javascript"> window.onload = function () { document.getElementById("btnGet").onclick = function () { //第一步,创建XMLHttpRequest对象 var xhr = null; if (typeof (XMLHttpRequest) != undefined) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHttp"); } //第二部,设置异步回调函数。 xhr.onreadystatechange = function () { //xhr对象状态,0=已创建XMLHttpRequest对象,1=open,2=send,3=onready等待响应,4=成功。 if (xhr.readyState == 4) { //status 响应状态 if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) { document.getElementById("div1").innerHTML = xhr.responseText; //xhr.responseText 响应体 } } } //第三步,打开对象,设置请求方式和访问路径 xhr.open("Get", "GetTime.ashx?id=17&name=" + window.encodeURIComponent("张三"), true); //第四步,send() xhr.send(null); }; }; </script> </head> <body> <div ></div> <input type="button" value="无刷新异步获取" /> </body> </html>
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 type="text/javascript"> window.onload = function () { document.getElementById("btn").onclick = function () { var xhr = null; if (typeof (XMLHttpRequest) != undefined) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHttp"); } xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { document.getElementById("div1").innerHTML = xhr.responseText + "<hr />"; //获取响应报文头信息 var date = xhr.getResponseHeader("Date"); document.getElementById("div2").innerHTML = date + "<hr />"; //获取所有响应报文头信息 var all = xhr.getAllResponseHeaders(); document.getElementById("div3").innerHTML = all + "<hr />"; } } //通过Post方式请求 xhr.open("Post", "GetTime.ashx", true); //需要添加请求报文头,Content-Type. xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //通过键值对的方式传值。 var name = document.getElementById("name").value; xhr.send("id=18&name=" + name); }; }; </script> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <input type="text" id="name" value="李四" /> <input type="button" value="提交" id="btn" /> </body> </html> GetTime.ashx: using System; using System.Collections.Generic; using System.Linq; using System.Threading; using System.Web; namespace MyPerson.UI.Ajax { /// <summary> /// GetTime 的摘要说明 /// </summary> public class GetTime : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; //Thread.Sleep(1000); string id = context.Request["id"]; string name = context.Request["name"]; context.Response.Write(DateTime.Now.ToString() + "<br/>编号:" + id + "<br/>姓名:" + name); } public bool IsReusable { get { return false; } } } } JQuery版: <!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 src="../Scripts/jquery-1.7.1.js"></script> <script type="text/javascript"> $(function () { $("#btnGet").click(function () { $.ajax({ type: "GET", url: "GetTime.ashx", data: {id: 17, name: "张三"}, dataType: "text", success: function(data) { $('#div1').html(data); } }); }); }); </script> </head> <body> <div id="div1"></div> <input type="button" value="无刷新异步获取" id="btnGet" /> </body> </html>
|
请发表评论