学习.net与ajax的详细案例总结
首先了解什么是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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.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") {
补充:Web开发 , ASP.Net ,