标签：ajax jquery ajax
在图书信息管理系统中，用到了Ajax和JQueryAjax，算是都体验了一把。刚开始用的时候很陌生，迟迟不敢下手。但是不动手什么时候也成功不了，就上网找例子，照着敲吧。当然，中间也遇到了一些小的错误，最终还是成功了。
AJAX即“AsynchronousJavascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下对网页的某部分进行更新。
<span style="font-size:18px;"> <script type="text/javascript">
//第一步：创建xmlHttp对象
var xmlHttp = createXmlHttp();
function createXmlHttp() {
var request;
if (typeof (XMLHttpRequest) == "undefined") {
//IE老版本中创建的方式
request = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
//支持标准的浏览器创建的方式
request = new XMLHttpRequest();
}
return request;
}
function ajax() {
//第二步：open(true，表示异步)
xmlHttp.open("GET", "ajax.aspx?haha=" + document.getElementById("first").value, true);
//第三步：获取查询回来的值
xmlHttp.onreadystatechange = function () {
//4表示xmlHttp交互完成，200与后台交互返回的状态码表示正常交互完成，404表示文件未找到。500是出现内部服务器错误
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById("second").value = xmlHttp.responseText;
}
}
//第四步：发送
xmlHttp.send();
}
</script></span>
<span style="font-size:18px;"><body>
<input type="text" id="first" onkeyup="ajax()" />
<input type="text" id="second" />
</body></span>
<span style="font-size:18px;">using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace 图书管理系统demo
{
public partial class ajax : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//string.IsNullOrEmpty("string")来判断string是否为null或者空，是空或Null返回true
if (! string.IsNullOrEmpty(Request.QueryString["haha"]) )
{
Response.Write(Request.QueryString["haha"]); //输出要输出的内容
Response.End(); //提示输出，要不然会输出整个html
}
}
}
}</span>
<span style="font-size:18px;"><head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<%-- 用jquery的时候一定要记得加引用 --%>
<script src="Scripts/jquery-2.1.4.js"></script>
<script type="text/javascript">
function jqueryAjax()
{
$.ajax({
//指定将值传给谁，然后用了Math.random防止页面缓存（因为执行的Page_Load，所以加上了haha这个get方式提交，来在前段判断提交是否为空
url: 'ajax.aspx?soso=' + Math.random(), //跳转的action
//post传递的数据
data: {
//是键、值得形式
chuandi: document.getElementById("second").value //传递第二个文本框的值
},
type:'post', //post方式
cache: false, //防止缓存
success: function (data)
{
document.getElementById("first").value = data;
}
});
}
</script>
</head></span>
<span style="font-size:18px;"><body>
<input type="text" id="first" />
<input type="text" id="second" onkeyup="jqueryAjax()" />
</body></span>服务器端代码<span style="font-size:18px;">using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace 图书管理系统demo
{
public partial class ajax : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (! string.IsNullOrEmpty(Request.QueryString["soso"]))
{
Response.Write(Request.Form["chuandi"]);
Response.End();
}
}
}
}</span>
标签：ajax jquery ajax
原文地址：http://blog.csdn.net/mascf/article/details/46563057
