什么是Ajax
Ajax的全称是Asynchronous JavaScript And XML.AJax由HTML,JavaScript,DHTML和DOM组成.
HTML用于建立Web表单
JavaScript代码用于运行Ajax应用程序的核心代码,用于和服务器引用程序进行通信
DHTML用于动态更新表单
DOM用于处理HTML结构和服务器返回的XML
时至今日,Js中可以处理的数据包括了字符串,JsON,XML数据.
优点
通过XMLHttpRequest对象来和服务器进行通信;在与服务器进行异步数据传输时,传输的数据更少;更好的用户体验.
实例
get.htm页面HTML代码如下:
<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="GET" id="btn" onclick="btn_click();" /> <div id="result"> < !--div> < !--body>
Js代码如下:
<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对象xmlHttp.open("get", "Get.Aspx?username=" + username + "&age=" + age);//设置回调函数xmlHttp.onreadystatechange = function () {if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { document.getElementById("result").innerHTML = xmlHttp.responseText; } }//发送请求xmlHttp.send(null); }</ Script>
新建Get.Aspx页,Get.Aspx.cs代码如下:
protected void Page_Load(Object sender, EventArgs e) { Response.Clear();string username = Request.QueryString["username"]; string age = Request.QueryString["age"]; Response.Write("姓名:'" + username + "' 年龄:" + age + " 时间:'" + DateTime.Now.ToString() + "'"); Response.End(); }
结果:
输入姓名和年龄,点击Get按钮,就会从服务器获取到数据.
