ajax实现google效果
以前完ajax都是用控件糊里糊涂的用,也没有看他的原理, ajax无刷新,就是通过javascript 调用另一个页面,然后在另一个页面刷新,然后获取数据
原理就是这样简单,代码更简单,,效果图
这个demo,原理很简单，就是首先获取 getHttpObject的对象模型,然后去post,WebForm1.aspx,然后还回结果,然后解析!
default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AjaxWebApp._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script language="javascript">
function getHttpObject()
{
var waystation = null;
if(window.ActiveXObject)
{
waystation = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
waystation = new XMLHttpRequest();
}
else
{
waystation = false;
}
return waystation;
}
function addTest()
{
inputField = document.getElementById("textfield");
completeTable = document.getElementById("table1");
completeDiv = document.getElementById("popup");
completeBody = document.getElementById("body1");
var s = document.all.item("textfield").value;
// alert(s);
var aa= encodeURI(s);
if(s=="")
return;
var xmlrequest =getHttpObject();
xmlrequest.open("post","WebForm1.aspx?id="+aa);
xmlrequest.onreadystatechange = function()
{
if(xmlrequest.readyState==4)
{
//xmlrequest.responseText为你AddCity中输出的那段字符串；
setNames(xmlrequest.responseText);
}
}
xmlrequest.send(null);
}
function setNames(names)
{
if(names=="")
{
clearNames();
return ;
}
clearNames();
setOffsets();
var row,cell,txtNode;
var s = names.split("$");
for (var i = 0; i < s.length; i++)
{
//s[i]为td的
var nextNode =s[i];
row = document.createElement("tr");
cell = document.createElement("td");
cell.onmouseout = function() {this.style.backgroundColor='';};
cell.onmouseover = function() {this.style.backgroundColor='#ffff00';};
cell.onclick = function() { completeField(this); } ;
cell.pop="T";
txtNode = document.createTextNode(nextNode);
cell.appendChild(txtNode);
row.appendChild(cell);
document.getElementById("body1").appendChild(row);
}
}
//用来设置当鼠标失去焦点后文本框的隐藏
document.onmousedown=function()
{
if(!event.srcElement.pop)
clearNames();
}//填写输入框
function completeField(cell)
{
inputField.value = cell.firstChild.nodeValue;
clearNames();
}
function clearNames()
{
completeBody = document.getElementById("body1");
var ind = completeBody.childNodes.length;
for(var i= ind-1;i>=0;i--)
{
completeBody.removeChild(completeBody.childNodes[i]);
}
completeDiv= document.getElementById("popup");
completeDiv.style.border = "none";
}
function setOffsets()
{
completeTable.style.width = inputField.offsetWidth;+"px";
var left = calculateOffset(inputField,"offsetLeft");
var top = calculateOffset(inputField,"offsetTop")+inputField.offsetHeight;
completeDiv.style.border = "black 1px solid";
completeDiv.style.left = left + "px";
completeDiv.style.top = top + "px";
}
function calculateOffset(field, attr) {
var offset = 0;
while(field) {
offset += field[attr];
field = field.offsetParent;
}
return offset;
}
</script>
</head>
<body>
<input name="textfield" id="textfield" type="text" class="input1" onkeyup="addTest();" maxlength="20" style="width: 68px" /><div id="popup" style="POSITION: absolute">
<table id="table1" cellspacing="0" cellpadding="0" bgcolor="#fffafa" border="0" >
<tbody id="body1" >
</tbody>
</table>
</div>
</body>
</html>
WebForm1.aspx 是用来后台刷新的,所以
不需要前台页面,可以把前台页面的html去掉
如图:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="AjaxWebApp.WebForm1" %>
WebForm1.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
namespace AjaxWebApp
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string result = Request.QueryString["id"].ToString();
//可以在这里面进行数据库的操作，然后把得到的结果作为字符串返回过去，然后再去解析那段字符串；主意看看这个页面的HTML
Response.Write("A$AA$AAA$AAAA");
//测试demo所以比较简单,刷新在这个页面,所以你可以在这个页面做任何事情
}
}
}
Demo不是最好，只是说明一些问题．．．／
