纯javascript实现ajax效果
ajax现在是一种非常流行的技术，现在虽然可以利用JQuery或者一些第三方插件甚至微软提供的一些控件可以方面的实现ajax功能，但是明白其原理也是非常重要的，下面是来使用纯javascript实现获取服务器端的功能来展示如何使用纯javascript实现ajax功能，以弄清其原理.
在使用ajax技术时XMLHttpRequest是它的核心部分，就是利用javascript的XMLHttpRequest对象来实现ajax功能，以便给用户带来好的体验，其他的方法实现ajax功能也都是实现此功能，
下面是XMLHttpRequest几个常用的方法、属性：
open（）方法：用于向服务器发送一个请求，这个方法有3个参数，其中第一个参数发送请求的方式如“GET”或者“POST”，第二个参数是要请求的URL，第三个参数是表示是否以异步方式发出请求，若为true则表示是异步，否则为同步.
send()方法：只用这个方法才能正确的请求服务器页面。
onreadystatechange事件：紧跟其后是一个函数名或是一个匿名函数，发送请求以后XMLHttpRequest对象一直处于等待状态，直到服务器响应后激发onreadystatechange事件，紧跟其后的方法就是当XMLHttpRequest对象的onreadystatechange事件激发之后的客户端方法。
readyState属性：XMLHttpRequest对象的状态，当这个状态等于4时表示服务器正确的响应
responseText属性：表示服务器用于响应请求的html文本。
下面是具体实现的代码：
首先新建一个客户端页面：如就是默认首页“Default.aspx”，删除其前台的html代码
只保留如下代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="javascript实现ajax版的获取服务器时间._Default" %>
其后台代码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace javascript实现ajax版的获取服务器时间
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//设置服务器上不缓存结果，保证每次都能获取到服务器上的时间
Response.Cache.SetCacheability(HttpCacheability.NoCache);
//获取返回时间格式
string format=Request["format"];
string dateFormat = string.Empty;
if (!string.IsNullOrEmpty(format))
{
format = format.ToLower();
switch (format)
{
case "yyyy-mm-dd": dateFormat = "yyyy-MM-dd"; break;
case "yyyy-mm-dd hh:mm:ss": dateFormat = "yyyy-MM-dd HH:mm:ss"; break;
case "mm-dd": dateFormat = "mm-dd"; break;
default: dateFormat = "yyyy-MM-dd HH:mm:ss"; break;
}
}
else
{
dateFormat = "yyyy-MM-dd HH:mm:ss";
}
//返回按预定格式系统时间
Response.Write(DateTime.Now.ToString(dateFormat));
}
}
}
然后新建一个普通html页面代码如下
<!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" language="javascript">
var request = false;
//实现浏览器是否支持XMLHttpRequest的判定，这是一个通用方法
function createXMLRequest() {
try {
request = new ActivexObject("Msxml2.XMLHTTP");
}
catch (e1) {
try {
request = new ActivexObject("Microsoft.XMLHTTP");
}
catch (e2) {
request = false;
}
}
if (!request && typeof XMLHttpRequest != 'undefined') {
request = new XMLHttpRequest();
}
}
//实现对时间的调用
function getServerTime(format) {
createXMLRequest();
//对特殊字符进行转义
var url = "Default.aspx?format=" + escape(format);
//通过get方式发送request请求，true表示是异步请求
request.open("GET", url, true);
request.onreadystatechange = update;
request.send(null);
}
function update() {
if (request.readyState == 4) {
document.getElementById("time").innerHTML=request.responseText;
}
}
</script>
</head>
<body>
<div>
服务器时间:<div id="time"></div>
<li><input type="button" value="完整时间" onclick="javascript:void getServerTime('yyyy-mm-dd hh:mm:ss')" /></li>
<li><input type="button" value="年月日" onclick="javascript:void getServerTime('yyyy-mm-dd')" /></li>
<li><input type="button" value="月日" onclick="javascript:void getServerTime('mm-dd')" /></li>
</div>
</body>
</html>
最后运行结果如下：
总结：
利用纯javascript实现ajax效果的主要步骤如下：
1、根据浏览器类型的不同实例化不同的XMLHttpRequest对象
2、利用XMLHttpRequest对象向服务器发出一个动态请求
3、编写XMLHttpRequest对象接收服务器的响应时要执行客户端代码，在客户端做一些设置来响应客户端操作
4、编写服务器方法，用于处理客户端请求并作出响应。
以上为用纯javascript实现ajax的方法，还会有用JQuery来实现ajax效果的文章，敬请关注....
