ajax 原理

最新推荐文章于 2024-10-18 17:51:23 发布

iteye_19314

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量74

点赞数

分类专栏： ajax 文章标签： javascript xhtml ViewUI

本文链接：https://blog.csdn.net/iteye_19314/article/details/82581748

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、Ajax的全称是Asynchronous Javascript And XML.AJax
2、包含技术：
基于web标准（standards-based presentation）XHTML+CSS的表示；

使用 DOM（Document Object Model）进行动态显示及交互；

使用 XML 和 XSLT 进行数据交换及相关操作；

使用 XMLHttpRequest 进行异步数据查询、检索；

使用 JavaScript 将所有的东西绑定在一起
3、Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。
属性有：

　　onreadystatechange 每次状态改变所触发事件的事件处理程序。

　　responseText 从服务器进程返回数据的字符串形式。

　　responseXML 从服务器进程返回的DOM兼容的文档数据对象。

　　status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）

　　status Text 伴随状态码的字符串信息

　　readyState 对象状态值

　　　　0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

　　　　1 (初始化) 对象已建立，尚未调用send方法

　　　　2 (发送数据) send方法已调用，但是当前的状态及http头未知

　　　　3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

　　　　4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
创建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" οnclick="btn_click();" />
<div id="result">
</div>
</body>
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);
}

新建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 + "'<br/>年龄:" + age + "<br/>时间:'" + DateTime.Now.ToString() + "'");

Response.End();
}