您的位置：首页 > Web前端 > JQuery

ASP.NET Ajax和Jquery Ajax实例

2015-06-19 16:54 716 查看
在图书信息管理系统中，用到了Ajax和JQueryAjax，算是都体验了一把。刚开始用的时候很陌生，迟迟不敢下手。但是不动手什么时候也成功不了，就上网找例子，照着敲吧。当然，中间也遇到了一些小的错误，最终还是成功了。

Ajax

AJAX即“AsynchronousJavascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下对网页的某部分进行更新。

下面做了Ajax的demo

JS代码

<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>

HTML部分代码

<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>

JQuery Ajax

编写常规的Ajax代码并不容易，因为不同的浏览器对Ajax的实现并不相同。这意味着必须编写额外的代码对浏览器进行测试。不过，JQuery团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现Ajax功能。

JQuery Ajax的demo

js代码

<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>

HTML部分代码

<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>


总结：现在还只是限于运用，对于理论知识还有很多的欠缺。还需要不断的学习。在学习这方面知识的时候，参考了很多例子。有一个网站做的额很不错，里面有很多的例子，在这里推荐一下：http://www.w3school.com.cn/

 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Ajax JQuery Ajax
相关文章推荐
新的分享
章节导航