<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo1.aspx.cs" Inherits="ajax.demo1" %>
<!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 language="javascript" type="text/javascript"> /*兼容方式*/ var makeXHR = function () { //声明异步对象变量 var xmlHttp = false; var xmlHttpObj = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp"]; //判断浏览器是否支持XMLHttpRequest,如果支持，则是新式浏览器，可以直接创建 if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } //否则，只能循环遍历老式浏览器异步对象名，一一尝试创建，直到创建成功为止 else if (window.ActiveObject) { for (var i = 0; i < xmlHttpObj.length; i++) { xmlHttp = new ActiveXObject(xmlHttpObj[i]); if (xmlHttp) { break; } } } //判断异步对象是否创建成功，如果成功，则返回异步对象，否则返回false return xmlHttp ? xmlHttp : false; } window.onload = function () { document.getElementById("btnGetTime").onclick = function () {//创建异步对象
var xhr = makeXHR(); //设置参数 xhr.open("get", "GetTime.ashx?name=xuj", true); //true表示异步，false表示同步 //get请求默认会使用浏览器的缓存，post不会使用，下面让get请求不从浏览器获取缓存数据 xhr.setRequestHeader("If-Modified-Since", "0"); //设置回调函数 xhr.onreadystatechange = function () { //当完全接收完响应报文后，并相应状态码味200的时候 if (xhr.readyState == 4 && xhr.status == 200) { //获取相应报文体 var res = xhr.responseText; alert(res); } }; //发送异步请求 xhr.send(null); };
document.getElementById("btnPostTime").onclick = function () {
//创建异步对象 var xhr = makeXHR(); //设置参数 xhr.open("post", "GetTime.ashx", true); //true表示异步，false表示同步 //设置请求报文体的编码格式 xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //设置回调函数 xhr.onreadystatechange = function () { //当完全接收完响应报文后，并相应状态码味200的时候 if (xhr.readyState == 4 && xhr.status == 200) { //获取相应报文体 var res = xhr.responseText;//如返回的格式是json格式，[{"id":1,"name":"1班"},{"id":2,"name":"2班"}]
//将数据转成js数组 //方式一：var resJson = eval(res); //方式二 var resJson = JSON.parse(res); for (var i = 0; i < resJson.length; i++) { alert(resJson[i].name); } //alert(resJson.length); } }; //发送异步请求，key=value&key1=value2 xhr.send("name=xuj"); }; }; </script></head><body> <input type="button" id="btnGetTime" value="get获取服务器时间" /> <input type="button" id="btnPostTime" value="post获取服务器时间" /></body></html>