当前位置: 首页 > HTML5培训 > 前端开发 > Ajax > 完整的Ajax实例
完整的Ajax实例 时间:2018-08-10     来源:未知

什么是Ajax

Ajax的全称是Asynchronous Javascript And XML.AJax由HTML,Javascript,DHTML和DOM组成.HTML用于建立Web表单,Javascript代码用于运行Ajax应用程序的核心代码,用于和服务器引用程序进行通信;DHTML用于动态更新表单;DOM用于处理HTML结构和服务器返回的XML时至今日,Js中可以处理的数据包括了字符串,JSON,XML数据.

ajax实例

优点

通过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按钮,就会从服务器获取到数据.

前台专线:010-82525158 企业培训洽谈专线:010-82525379 院校合作洽谈专线:010-82525379 Copyright © 2004-2022 北京华清远见科技集团有限公司

Android培训

版权所有 ,京ICP备16055225号-5,京公海网安备11010802025203号