学习Ajax的同胞，Come on（给你完整的Ajax源码学习）

来源：互联网发布：淘宝买家怎么删除差评编辑：程序博客网时间：2024/05/21 09:41

Ajax，就是对象在客户端和服务器之间的异步传递请求与响应。

概念的东西，我先不说。直接来源代码：

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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> <title>无标题页</title> <script type="text/javascript" > var xmlHttp; //实例化XMLHttpRequest对象 function ajaxFunction() { try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您的浏览器不支持AJAX！"); return false; } } } } function Validation() { ajaxFunction(); //找到名为“Text1”的文本框 var name=document.getElementById ("Text1"); //利用Open方法向指定URL //查询字符串“name”将文本框中的数据传送到目标页面 xmlHttp.open("Get","Default.aspx?name="+name.value,true); //设置当服务器响应返回时用于处理响应的函数名 xmlHttp.onreadystatechange=OnMessageBack; //送发请求 xmlHttp.send(null); } function OnMessageBack() { //判断请求状态及HTTP状态是否都能满足条件 if (xmlHttp.readyState==4) { if(xmlHttp.status==200) { //将返回的文本打印到页面上 document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } } } </script></head><body> <form id="form1" action=""> <div> <input type="text" id="Text1"/> <input type="button" onclick="Validation()" value="确定" /> <div id="txtHint">  </div> </div> </form></body></html>

Default.aspx.cs（这里面用了数据库名为Access的test.mdf,表为user，这表里你只要有name字段就OK了）

using System;using System.Data;using System.Configuration;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;using System.Data.SqlClient;public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string name = this.Request.QueryString["name"]; if (name != null) { SqlConnection con = new SqlConnection(@"Data Source=./SQLEXPRESS;AttachDbFilename=D:/WebSite/AjaxTest/App_Data/test.mdf;Integrated Security=True;User Instance=True"); string sql = "select name from [user] where name='" + name + "'"; System.Data.SqlClient.SqlDataAdapter sqlAdpter = new System.Data.SqlClient.SqlDataAdapter(sql, con); System.Data.DataSet ds = new DataSet(); sqlAdpter.Fill(ds); con.Close(); if (ds != null) { if (ds.Tables[0].Rows.Count == 1) { this.Response.Write("该用户名不可以使用"); Response.End(); } else { this.Response.Write("该用户名可以使用"); Response.End(); } } } }}

如果你觉得用了数据库不好演练的话，那我改成不用数据库的

Default.aspx.cs

代码就到此结束

下面主要对Ajax的知识粗略几笔带过（主要是摘自别人的资料，但是忘了链接哪的文章了）

首先我们需要知道的是Ajax，它是对象在客户端和服务器之间的异步传递请求与响应。

而Ajax的核心是XmlHttpRequest对象，但是不同的浏览器创建XMLHttpResquest对象的方法有所不同，所以你可以看到上例的ajaxFunction()是怎么创建XMLHttpResquest对象的。

其次， XMLHttpRequest 对象有三个属性非常重要。它们分别是onreadystatechange 属性、readyState 属性和responseText 属性。

onreadystatechange 属性是存有处理服务器响应的函数。

readyState 属性是存有服务器响应的状态信息。当 readyState 改变时，onreadystatechange 函数就会被执行。

这是 readyState 属性可能的值： 1请求已提出（调用 send() 之前）2请求已发送（这里通常可以从响应得到内容头部）3请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）4请求已完成（可以访问服务器响应并使用它）

responseText属性，可以通过 responseText 属性来取回由服务器返回的数据。

要想把请求发送到服务器，我们就需要使用 open() 方法和 send() 方法。

open() 方法需要三个参数。第一个参数定义发送请求所使用的方法（GET 还是 POST）。第二个参数规定服务器端脚本的 URL。第三个参数规定应当对请求进行异步地处理。

send() 方法可将请求送往服务器。

注：JavaScript也是区分大小写的，所以这里面的属性跟方法都是区分大小写，如果不重视这个的话，怕是你抓破头皮也找不出个所以然来。还有一点那就是，响应流必须加上Response.end();来结束页面源代码的响应。不这样的话，则会看到响应流是结果加上整个页面的源代码，也就是页面的内容重复了。

好拉，今天就写到这里，谢谢！