首先了解什么是ajax。 AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
通过 AJAX,您的 JavaScript 可使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信。通过这个对象,您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。
AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。
一提到javascript,大家都会想到浏览器的兼容性问题,其实ajax也需要考虑到这个问题。因为不同浏览器使用的web的javascript的类不一样,所以产生的效果也不会一样的。下面不瞎说了,直接引入代码供大家参考。
{
var xmlhttp;//非IE浏览器创建XmlHttpRequest对象
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
//IE浏览器创建XmlHttpRequest对象
if (window.ActiveXObject) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
try {
xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
}
catch (ex) { }
}
}
if (!xmlhttp) {
alert("创建xmlhttp对象异常");
return false;
}
// xmlhttp.open("POST", "GetDate.ashx?nd=" + new Date(), false); //向服务器某个页面发出请求
xmlhttp.open("GET", "URL“, false);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {//如果是状态码则显示成功
//document.getElementById("Text1").value = xmlhttp.responseText;
xxxxx = xmlhttp.responseText;//在此处我们可以将我们传递的参数返回给我们的html标签,或者其他变量处理问题
} //responseText为服务器返回的文本
else {
alert("AJAX服务器返回错误");
}
}
}
xmlhttp.send();//开始发送请求
}这只是前台的代码,就这些代码就已经足够了,实现了局部刷新页面的功能,剩下的后台代码是根据项目的不同而定,我在这里不必引入了。
大家看到这些代码感觉怎么样,对于刚学习javascript或者ajax的同学,要想记住这些代码,真的是很难啊,还有怎么去理解这些东西 呢,我上面基本都有注释,大家一般可以理解。但是如果每个页面都需要局部刷新的话,这样就会感觉每个页面都要写这样的代码是不是很麻烦啊,jQuery帮 助我们完成了很多东西,这样可以减轻我们开发项目的难度,以下是使用jQuery的代码:
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});另一种方式
$.post("test.php", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});是不是很简单啊,在这里我们这是调用他写好的函数,我们就可以实现我们的无刷新代码了,现在感觉是不是无刷新页面是不是很简单了,但是我们这只是传递个小数据而已,如果从数据库中提取数据时就会很麻烦的,以下引入我的部分代码,让大家思考一下
以下是我实现无刷新评论并显示的前台和后台代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxComment.aspx.cs" Inherits="ajax学习.无刷新评论.AjaxComment1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=".w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../js/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btnComment").click(function () {
var comment = $("#txtComment").val();
$.post("AjaxComment.ashx",{"msg":comment},
function (data, status) {
if (status != "success") {
alert("发表评论失败,请重试");
return;
}
if (data == "ok") {
var newComment = $("<li>评论日期:"+new Date().toString()+",IP:,"+"本机"+"内容:"+comment+"</li>");
$("#ulComment").append(newComment);
alert("评论发表成功");
}
else {
alert("评论发表有问题");
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
DeleteMethod="Delete" InsertMethod="Insert"
OldValuesParameterFormatString="original_{0}" SelectMethod="GetData"
TypeName="ajax学习.DataSetCommentTableAdapters.T_CommentTableAdapter"
UpdateMethod="Update">
<DeleteParameters>
<asp:Parameter Name="Original_Id" Type="Int64" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="IP" Type="String" />
<asp:Parameter Name="Msg" Type="String" />
<asp:Parameter Name="PostDate" Type="String" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="IP" Type="String" />
<asp:Parameter Name="Msg" Type="String" />
<asp:Parameter Name="PostDate" Type="String" />
<asp:Parameter Name="Original_Id" Type="Int64" />
</UpdateParameters>
</asp:ObjectDataSource>
<ul id="ulComment">
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource1">
<ItemTemplate>
<li>评论日期:<%#Eval("PostDate")%>,IP:<%#Eval("IP")%>,内容:<%#Eval("Msg")%><br/></li>
</ItemTemplate>
</asp:Repeater>
</ul>
<textarea id="txtComment" cols="20" rows="10"></textarea><br/>
<input id="btnComment" type="button"
value="提交" />
</div>
</form>
</body>
</html>
后台代码(AjaxComment.ashx)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using ajax学习.DataSetCommentTableAdapters;
using System.Web.Services;
namespace ajax学习.无刷新评论
{
/// <summary>
/// AjaxComment 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class AjaxComment : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string msg = context.Request["msg"];
new T_CommentTableAdapter().Insert(context.Request.UserHostAddress,msg,DateTime.Now.ToString());//使用的是强类型DataSet
context.Response.Write("ok");
}
public bool IsReusable
{
发表回复