原生javascript和jquery实现简单的ajax例子

时间:2021-08-23 09:09:07

后台C#代码

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string name = context.Request["Name"]; var data = new T_UsersTableAdapter().GetDataByName(name);
JavaScriptSerializer jss = new JavaScriptSerializer(); if (data.Count <= )
{
var user = jss.Serialize(new Users() { Status = "error", Age = });
context.Response.Write(user);
}
else
{
var user = jss.Serialize(new Users() { Status = "ok", Age = data.Single().Age });
context.Response.Write(user);
}
} public class Users
{
public string Status { set; get; }
public int Age { set; get; }
}

html页面

<body>
<input id="user" type="text" />
<input id="btnSearch" onclick="search();" type="button" value="查询" />
<input id="btnSearch1" onclick="search1();" type="button" value="Jquery查询" />
<div id="userInfo"></div>
</body>

前台javascript和jquery分别实现ajax

<script type="text/javascript">
function search() {
var xmlhttp;
var name = document.getElementById("user").value; if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
} xmlhttp.open("post", "HandlerUsers.ashx?name=" + name, false);
var div = document.getElementById("userInfo");
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var arr = xmlhttp.responseText;
arr = JSON.parse(arr);
if (arr.Status == "ok") {
div.innerHTML = arr.Age;
} else {
div.innerHTML = "查找的用户名不存在!";
}
} else {
div.innerHTML = "ajax错误!";
}
}
}
xmlhttp.send();
} function search1() {
$(function () {
var name = $("#user").val();
var div = $("#userInfo"); $.post("HandlerUsers.ashx", { "name": name }, function (data, status) {
if (status == "success") {
var user = $.parseJSON(data);
alert(user);
if (user.Status == "ok") {
div.html(user.Age);
} else {
div.html("查询的用户名不存在!");
}
} else {
div.html("ajax错误!");
}
});
});
}
</script>