AJAX，ajax技术_H5之家 - 中国HTML5教程资源分享第一站

AJAX，ajax技术

XMLHttpRequest和ActiveXObject的区别

XMLHttpRequest和ActiveXObject学习

XMLHttpRequest 对象

11 个最常用的 AJAX 开发框架汇总

ajax请求页 HTMLPage1.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <title></title> <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script> <script type="text/javascript"> function btnClick() { //var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHTTP对象，相当于WebClient。老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象而新版本的任何浏览器都是支持下面所有现代浏览器都内建了 XMLHttpRequest 对象。所以一般情况下，我们都用XMLHttpRequest。所以，这一句可以用下面的var xmlhttp = new XMLHttpRequest()来替代 var xmlhttp = new XMLHttpRequest();//通过XMLHttpRequest对象来和服务器进行通信;在与服务器进行异步数据传输时,传输的数据更少;更好的用户体验. if (!xmlhttp) { //如果没有成功创建XMLHTTP对象，即创建失败，就弹出失败消息 alert("创建xmlhttp对象异常"); return false; } //注意如果是get 请求的话，它一般会自动给我们缓存。如果缓存了当前的数据，那么当我们第二次请求的时候，它是直接去取缓存中的数据，而不会再次请求了。而POST请求一般是不给我们缓存的。所以建议ajax最好用POST 请求，如果实在要用GET，也可以这样写xmlhttp.open("get", "Handler1.ashx?ts"+new Date(), false) xmlhttp.open("POST", "Handler1.ashx", false)//准备向服务器Handler1.ashx发出POST请求 //XMLHTTP默认(也推荐)不是同步请求的，也就是Open方法并不像WebClinet的DownloadString那样吧服务器返回的数据拿到才返回，是异步的，因此需要监听onreadystatechange事件 xmlhttp.onreadystatechange = function () { //注册一个事件 // readyState是请求的状态，它有5个值：0=请求未初始化；1=服务已连接；2=服务接收到请求；3=执行请求；4=完成，即数据接收完毕； if (xmlhttp.readyState == 4) { //数据接收完毕，此时可以通过通过responseBody和responseText获取完整的回应数据 if (xmlhttp.status == 200) {//如果状态码为200 则异步请求成功 document.getElementById("txt1").value = xmlhttp.responseText; //responseText属性为服务器返回的文本，即字符串 } else { alert("ajax服务器返回错误"); } } } xmlhttp.send(); //这个时候才是开始发送请求 } </script> </head> <body> <input type="text" id="txt1" /> <input type="button" value="提交" onclick="btnClick()" /> </body> </html>

处理页Handler1.ashx（服务器）

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace AJAX { /// <summary> /// Handler1 的摘要说明 /// </summary> public class Handler1 : IHttpHandler { /// <summary> /// 在页面输出当前时间 /// </summary> /// <param name="context"></param> public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/html"; //context.Response.Write("Hello World"); context.Response.Write(DateTime.Now); } public bool IsReusable { get { return false; } } } }

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<Dome>

HTML请求页HTMLPage1.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <title></title> <script type="text/javascript"> function btn_click() { //创建XMLHttpRequest对象 var xmlHttp = new XMLHttpRequest(); //获取值 var username = document.getElementById("txt_username").value; var age = document.getElementById("txt_age").value; //配置XMLHttpRequest对象。注意因为这里的username有可能是一个中文字符串，所以要用encodeURI编码一下，否则会乱码 xmlHttp.open("post", "Get.aspx?username=" + encodeURI(username) + "&age=" + age); //设置回调函数 xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { document.getElementById("result").innerHTML = xmlHttp.responseText; } } //发送请求 xmlHttp.send(null); } </script> </head> <body> <label for="txt_username">姓名:</label> <input type="text" id="txt_username" /><br /> <label for="txt_age">年龄:</label> <input type="text" id="txt_age" /><br /> <input type="button" value="提交" id="btn" onclick="btn_click();" /> <div id="result"> </div> </body> </html>
处理页Get.aspx （服务器） using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace AJAX_Dome { public partial class WebForm1 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Response.Clear(); string username = Request.QueryString["username"]; string age = Request.QueryString["age"]; Response.Write("姓名:" + username + "<br/>年龄:" + age + "<br/>时间:" + DateTime.Now.ToString() + ""); Response.End(); } } }

什是AJAX？