为了简单明了,我只在html中测试;注释里写的很清楚,我就不多废话了;
很多家公司在面试的时候可能会让你不使用任何Ajax的框架实现Ajax效果,虽然这段代码看上去挺痛苦,但也没有别的办法,记不记也得记(其实理解起来就没那么难记了……)
<!
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 > 不使用Ajax框架实现Ajax效果 </ title >
< script type ="text/javascript" language ="javascript" >
function btnClick() {
var xmlhttp = new ActiveXObject( " Microsoft.XMLHTTP " ); // 创建XMLHTTP对象,相当于WebClient
if ( ! xmlhttp) {
alert( " 创建xmlhttp对象异常! " );
return false ;
}
xmlhttp.open( " POST " , " GetDate.ashx " , false ); // 准备向服务器的GetDate.ashx(一般处理程序)发出POST请求。
// XMLHTTP默认(也推荐)不是同步请求的,也就是open方法并不像WebClient的DownloadString那样把服务器返回的数据拿到才返回,是异步的,因此需要用匿名监听onreadystatechange事件;
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 ) { //如果XMLHTTPRequest对象读取服务器响应结束;
if (xmlhttp.status == 200 ) { // 如果状态码为200则表示处理成功;
document.getElementById( " GetDate " ).value = xmlhttp.responseText; // responseText属性为服务器返回的文本
} else {
alert( " AJAX服务器返回错误 " );
}
}
}
xmlhttp.send(); // 这时才开始发送请求
}
</ script >
</ head >
< body >
< input id ="GetDate" type ="text" />
< input type ="button" value ="请求时间" onclick ="btnClick()" />
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 不使用Ajax框架实现Ajax效果 </ title >
< script type ="text/javascript" language ="javascript" >
function btnClick() {
var xmlhttp = new ActiveXObject( " Microsoft.XMLHTTP " ); // 创建XMLHTTP对象,相当于WebClient
if ( ! xmlhttp) {
alert( " 创建xmlhttp对象异常! " );
return false ;
}
xmlhttp.open( " POST " , " GetDate.ashx " , false ); // 准备向服务器的GetDate.ashx(一般处理程序)发出POST请求。
// XMLHTTP默认(也推荐)不是同步请求的,也就是open方法并不像WebClient的DownloadString那样把服务器返回的数据拿到才返回,是异步的,因此需要用匿名监听onreadystatechange事件;
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 ) { //如果XMLHTTPRequest对象读取服务器响应结束;
if (xmlhttp.status == 200 ) { // 如果状态码为200则表示处理成功;
document.getElementById( " GetDate " ).value = xmlhttp.responseText; // responseText属性为服务器返回的文本
} else {
alert( " AJAX服务器返回错误 " );
}
}
}
xmlhttp.send(); // 这时才开始发送请求
}
</ script >
</ head >
< body >
< input id ="GetDate" type ="text" />
< input type ="button" value ="请求时间" onclick ="btnClick()" />
</ body >
</ html >
GetDate.ashx (一般处理程序)代码:
using
System;
using System.Web;
namespace AJAX
{
/// <summary>
/// GetDate 获取服务器的时间
/// </summary>
public class GetDate : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = " text/plain " ;
context.Response.Write(DateTime.Now.ToString());
}
public bool IsReusable
{
get
{
return false ;
}
}
}
}
using System.Web;
namespace AJAX
{
/// <summary>
/// GetDate 获取服务器的时间
/// </summary>
public class GetDate : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = " text/plain " ;
context.Response.Write(DateTime.Now.ToString());
}
public bool IsReusable
{
get
{
return false ;
}
}
}
}