Ajax数据异步
示例
前台页面
View Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ajaxTest.aspx.cs" Inherits="WebApplication1.ajaxTest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
//ajax
//创建一个XMLHttpRequest对象 ,利用此对象与服务器进行通信 是AJAX技术的核心
function object_ajaxFunction() {
var xmlHttp;
try { // Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e) {
try {// Internet Explorer
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
if (!xmlHttp) {
alert('Cannot create XMLHTTP instance');
return null;
}
}
}
}
return xmlHttp;
}
//GET方式提交
function object_ajaxGetRequest(ajaxObject,url, changeFunction) {
ajaxObject.open('GET', url, true);
ajaxObject.onreadystatechange = changeFunction;
ajaxObject.send(null);
}
//POST方式提交
function object_ajaxPostRequest(ajaxObject, parameters, urlPage, changeFunction) {
ajaxObject.open('POST', urlPage, true);
ajaxObject.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajaxObject.onreadystatechange = changeFunction;
ajaxObject.send(parameters);//注意键值对之间要有&符号
}
var ajaxObject;
//ajax接收状态检测
function bool_status(ajaxObject) {
if (ajaxObject.readyState == 4 && ajaxObject.status == 200)//状态完成
{
return true;
}
return false;
}
//test get
function changeGet() {
if(bool_status(ajaxObject))
document.getElementById("divget").innerHTML = ajaxObject.responseText;
}
//test post
function changePost() {
if (bool_status(ajaxObject))
document.getElementById("divpost").innerHTML = ajaxObject.responseText;
}
function OnAjaxGetTest()
{
var url = "ajaxTest.aspx?" + "method=get&name=getvalue";
if (!ajaxObject)
ajaxObject = object_ajaxFunction();
if (!ajaxObject) return;
//get
object_ajaxGetRequest(ajaxObject, url, changeGet);
}
function OnAjaxPostTest()
{
var urlPage = "ajaxTest.aspx";
if (!ajaxObject)
ajaxObject = object_ajaxFunction();
if (!ajaxObject) return;
var parameters = "method=post&name=postvalue";
//post
object_ajaxPostRequest(ajaxObject, parameters, urlPage, changePost);
}
//getData
//XML
/*
function getXmlData(ajaxObject,XmlBody)
{
var bodyNodes=ajaxObject.responseXML.getElementsByTagName(XmlBody);
}
//JOSN
function getJosnData(ajaxObject)
{
//将json格式字符转换为javascript对象
return JSON.parse(ajaxObject.responseText);
}*/
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="background-color:blue;100px;height:100px;" onclick="OnAjaxGetTest()">get点击我</div>
<div style="background-color:yellow;100px;height:100px;" onclick="OnAjaxPostTest()">post点击我</div>
<div id="divget" style="border:1px solid #000"></div>
<div id="divpost" style="border:1px solid #f00"></div>
</form>
</body>
</html>
后台
View Code
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace WebApplication1 { public partial class ajaxTest : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { //Encoding myEncoding = Encoding.GetEncoding("gb2312"); if (!IsPostBack) { //string s = Request.RawUrl.ToString(); //get string s = Request.QueryString["method"];//get的取值方式 if (s == "get") { Response.Write(Request.QueryString["name"].ToString()); Response.End(); } string post=Request.Form["method"];//post的取值方式 if (post=="post") { Response.Write(Request.Form["name"].ToString()); Response.End(); } } } } }