Ajax传值原理.aspx文档

公告

View Post

<%@ 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>

posted on 2018-03-12 16:33 sunshinezjb 阅读(172) 评论(0) 收藏举报

刷新页面返回顶部