jquery 开发ajax

原创

mb64660286caedc 2023-05-19 00:00:58 博主文章分类：jQuery ©著作权

文章标签 javascript xhtml c# ViewUI html 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者mb64660286caedc的原创作品，请联系作者获取转载授权，否则将追究法律责任

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
	Response.Write("异步测试成功，很高兴");
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ajax获取数据过程</title>
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
	if(window.ActiveXObject)
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	else if(window.XMLHttpRequest)
		xmlHttp = new XMLHttpRequest();
}
function startRequest(){
	createXMLHttpRequest();
	xmlHttp.open("GET","14-1.aspx",true);
	xmlHttp.onreadystatechange = function(){
		if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
			document.getElementById("target").innerHTML = xmlHttp.responseText;
	}
	xmlHttp.send(null);
}
</script>
</head>
<body>
<input type="button" value="测试异步通讯" onClick="startRequest()">
<br><br>
<div id="target"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>jQuery简化Ajax步骤</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function startRequest(){
	$("#target").load("14-1.aspx");
}
</script>
</head>
<body>
<input type="button" value="测试异步通讯" onClick="startRequest()">
<br><br>
<div id="target"></div>
</body>
</html>

<%@ Page Language="C#" ContentType="text/xml" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
	Response.ContentType = "text/xml";
	Response.CacheControl = "no-cache";
	Response.AddHeader("Pragma","no-cache");

	string xml = "<p id='kk'>p标记<span>内套span标记</span></p><span>单独的span标记</span>";
	Response.Write(xml);
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>load()获取XML</title>
<style type="text/css">
p{
	font-weight:bold;
}
span{
	text-decoration:underline;
}
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function startRequest(){
	$("#target").load("14-3.aspx");
}
</script>
</head>
<body>
<input type="button" value="测试异步通讯" onClick="startRequest()">
<br><br>
<div id="target"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>load()添加标记</title>
<style type="text/css">
p{
	font-weight:bold;
}
span{
	text-decoration:underline;
}
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function startRequest(){
	//只获取<span>标记
	$("#target").load("14-3.aspx span");
}
</script>
</head>
<body>
<input type="button" value="测试异步通讯" onClick="startRequest()">
<br><br>
<div id="target"></div>
</body>
</html>

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
	if(Request.HttpMethod == "POST")
		Response.Write("POST: " + Request["firstName"] + ", your birthday is " + Request["birthday"]);
	else if(Request.HttpMethod == "GET")
		Response.Write("GET: " + Request["firstName"] + ", your birthday is " + Request["birthday"]);
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>GET VS. POST</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function createQueryString(){
	var firstName = encodeURI($("#firstName").val());
	var birthday = encodeURI($("#birthday").val());
	//组合成对象的形式
	var queryString = {firstName:firstName,birthday:birthday};
	return queryString;
}
function doRequestUsingGET(){
	$.get("14-5.aspx",createQueryString(),
		//发送GET请求
		function(data){
			$("#serverResponse").html(decodeURI(data));
		}
	);
}
function doRequestUsingPOST(){
	$.post("14-5.aspx",createQueryString(),
		//发送POST请求
		function(data){
			$("#serverResponse").html(decodeURI(data));
		}
	);
}
</script>
</head>

<body>
<h2>输入姓名和生日</h2>
<form>
	<input type="text" id="firstName" /><br>
	<input type="text" id="birthday" />
</form>
<form>
	<input type="button" value="GET" onclick="doRequestUsingGET();" /><br>
	<input type="button" value="POST" onclick="doRequestUsingPOST();" />
</form>
<div id="serverResponse"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>$.ajax()方法</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function createQueryString(){
	//必须两次编码才能解决中文问题
	var firstName = encodeURI(encodeURI($("#firstName").val()));
	var birthday = encodeURI(encodeURI($("#birthday").val()));
	//组合成对象的形式
	var queryString = "firstName="+firstName+"&birthday="+birthday;
	return queryString;
}
function doRequestUsingGET(){
	$.ajax({
		type: "GET",
		url: "14-5.aspx",
		data: createQueryString(),
		success: function(data){
			$("#serverResponse").html(decodeURI(data));
		}
	});
}
function doRequestUsingPOST(){
	$.ajax({
		type: "POST",
		url: "14-5.aspx",
		data: createQueryString(),
		success: function(data){
			$("#serverResponse").html(decodeURI(data));
		}
	});
}
</script>
</head>

<body>
<h2>输入姓名和生日</h2>
<form>
	<input type="text" id="firstName" /><br>
	<input type="text" id="birthday" />
</form>
<form>
	<input type="button" value="GET" onclick="doRequestUsingGET();" /><br>
	<input type="button" value="POST" onclick="doRequestUsingPOST();" />
</form>
<div id="serverResponse"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>$.ajaxSetup()方法</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$.ajaxSetup({
	//全局设定
	url: "14-5.aspx",
	success: function(data){
		$("#serverResponse").html(decodeURI(data));
	}
});
function createQueryString(){
	//必须两次编码才能解决中文问题
	var firstName = encodeURI(encodeURI($("#firstName").val()));
	var birthday = encodeURI(encodeURI($("#birthday").val()));
	//组合成对象的形式
	var queryString = "firstName="+firstName+"&birthday="+birthday;
	return queryString;
}
function doRequestUsingGET(){
	$.ajax({
		data: createQueryString(),
		type: "GET"
	});
}
function doRequestUsingPOST(){
	$.ajax({
		data: createQueryString(),
		type: "POST"
	});
}
</script>
</head>

<body>
<h2>输入姓名和生日</h2>
<form>
	<input type="text" id="firstName" /><br>
	<input type="text" id="birthday" />
</form>
<form>
	<input type="button" value="GET" onclick="doRequestUsingGET();" /><br>
	<input type="button" value="POST" onclick="doRequestUsingPOST();" />
</form>
<div id="serverResponse"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ajax事件</title>
<style type="text/css">
body{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}
p{
	margin:0px;
	padding:2px;
}
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$.ajaxSetup({
	//全局设定
	url: "14-5.aspx",
	success: function(data){
		$("#serverResponse").html(decodeURI(data));
	}
});
$(function(){
	$("#global").ajaxComplete(function(evt, request, settings){
		$.each(evt,function(property,value){$("#global").append("<p>evt: "+property + ":" + value + "</p>");});
		$("#global").append("<p>request: "+ typeof request + "</p>");
		$.each(settings,function(property,value){$("#global").append("<p>settings: "+property + ":" + value + "</p>");});
	});
});
function createQueryString(){
	//必须两次编码才能解决中文问题
	var firstName = encodeURI(encodeURI($("#firstName").val()));
	var birthday = encodeURI(encodeURI($("#birthday").val()));
	//组合成对象的形式
	var queryString = "firstName="+firstName+"&birthday="+birthday;
	return queryString;
}
function doRequestUsingGET(){
	$.ajax({
		data: createQueryString(),
		type: "GET"
	});
}
function doRequestUsingPOST(){
	$.ajax({
		data: createQueryString(),
		type: "POST"
	});
}
</script>
</head>

<body>
<h2>输入姓名和生日</h2>
<form>
	<input type="text" id="firstName" /><br>
	<input type="text" id="birthday" />
</form>
<form>
	<input type="button" value="GET" onclick="doRequestUsingGET();" /><br>
	<input type="button" value="POST" onclick="doRequestUsingPOST();" />
</form>
<div id="serverResponse"></div><div id="global"></div>
</body>
</html>

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
	Response.CacheControl = "no-cache";
	Response.AddHeader("Pragma","no-cache");

	for(int i=0;i<100000000;i++);	//为了测试返回速度慢
	if(Request["user"]=="isaac")
		Response.Write("Sorry, " + Request["user"] + " already exists.");
	else
		Response.Write(Request["user"]+" is ok.");
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>自动校验的表单</title>
<style type="text/css">
<!--
form{
	padding:0px; margin:0px;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}
input{
	border:1px solid #004082;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("#UserResult").ajaxSend(function(){
		//定义全局函数
		$(this).html("<font style='background:#990000; color:#FFFFFF;'>loading... </font>");
	});
});
function showResult(sText){
	var oSpan = document.getElementById("UserResult");
	oSpan.innerHTML = sText;
	if(sText.indexOf("already exists") >= 0)
		//如果用户名已被占用
		oSpan.style.color = "red";
	else
		oSpan.style.color = "black";
}
function startCheck(oInput){
	//首先判断是否有输入，没有输入直接返回，并提示
	if(!oInput.value){
		oInput.focus();		//聚焦到用户名的输入框
		$("#UserResult").html("User cannot be empty.");
		return;
	}

	$.get("14-9.aspx",{user:oInput.value.toLowerCase()},
		//用jQuery来获取异步数据
		function(data){
			 showResult(decodeURI(data));
		}
	);
}
</script>
</head>
<body>
<form name="register">
<table cellpadding="5" cellspacing="0" border="0">
	<tr><td>用户名:</td><td><input type="text" onblur="startCheck(this)" name="User"></td> <td><span id="UserResult"></span></td> </tr>
	<tr><td>输入密码:</td><td><input type="password" name="passwd1"></td> <td></td> </tr>
    <tr><td>确认密码:</td><td><input type="password" name="passwd2"></td> <td></td> </tr>
	<tr>
		<td colspan="2" align="center">
		<input type="submit" value="注册">
        <input type="reset" value="重置">
		</td> <td></td>
	</tr>
</table>
</form>
</body>
</html>

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
	Response.CacheControl = "no-cache";
	Response.AddHeader("Pragma","no-cache");
	string sInput = Request["sColor"].Trim();
	if(sInput.Length == 0)
		return;
	string sResult = "";

	string[] aColors = new string[]{"aliceblue","antiquewith","aquamarine","azure","beige","bisque","black","blanchedalmond","blue","blueviolet","brass","bronze","brown","burlywood","cadetblue","chartreuse","chocolate","copper","coral","cornfloewrblue","cornsilk","cyan","darkblue","darkcyan","darkgoldenrod","darkgray","darkgreen","darkhaki","darkmagenta","darkolivegreen","darkorchid","darkorenge","darkred","darksalmon","darkseagreen","darkslateblue","darkslategray","darkturquoise","darkviolet","deeppink","deepskyblue","dimgray","dodgerblue","feldspar","firebrick","floralwhite","forestgreen","fuchsia","gainsboro","gold","goldenrod","golenrod","gostwhite","gray","green","greenyellow","honeydew","hotpink","indianred","inen","ivory","khaki","lavender","lavenderblush","lawngreen","lemonchiffon","lightblue","lightcoral","lightcyan","lightgodenrod","lightgodenrodyellow","lightgray","lightgreen","lightpink","lightsalmon","lightseagreen","lightskyblue","lightslateblue","lightslategray","lightsteelblue","lightyellow","lime","limegreen","magenta","magenta","maroom","maroon","mediumaquamarine","mediumblue","mediumorchid","mediumpurpul","mediumseagreen","mediumslateblue","mediumspringgreen","mediumturquoise","mediumvioletred","midnightblue","mintcream","mistyrose","moccasin","navajowhite","navy","navyblue","oldlace","olivedrab","orange","orchid","orengered","palegodenrod","palegreen","paleturquoise","palevioletred","papayawhip","peachpuff","peru","pink","plum","powderblue","purple","quartz","red","rosybrown","royalblue","saddlebrown","salmon","sandybrown","scarlet","seagreen","seashell","sienna","silver","skyblue","slategray","snow","springgreen","steelblue","tan","thistle","tomato","turquoise","violet","violetred","wheat","whitesmoke","yellow","yellowgreen"};

	for(int i=0;i<aColors.Length;i++){
		if(aColors[i].IndexOf(sInput) == 0)
			sResult += aColors[i] + ",";
	}
	if(sResult.Length>0)									//如果有匹配项
		sResult = sResult.Substring(0,sResult.Length-1);	//去掉最后的“,”号
	Response.Write(sResult);
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>jQuery实现自动提示的文本框</title>
<style>
<!--
body{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px; padding:0px; margin:5px;
}
form{padding:0px; margin:0px;}
input{
	/* 用户输入框的样式 */
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px; border:1px solid #000000;
	width:200px; padding:1px; margin:0px;
}
#popup{
	/* 提示框div块的样式 */
	position:absolute; width:202px;
	color:#004a7e; font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	left:41px; top:25px;
}
#popup.show{
	/* 显示提示框的边框 */	
	border:1px solid #004a7e;
}
/* 提示框的样式风格 */
ul{
	list-style:none;
	margin:0px; padding:0px;
	color:#004a7e;
}
li.mouseOver{
	background-color:#004a7e;
	color:#FFFFFF;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var oInputField;	//考虑到很多函数中都要使用
var oPopDiv;		//因此采用全局变量的形式
var oColorsUl;
function initVars(){
	//初始化变量
	oInputField = $("#colors");
	oPopDiv = $("#popup");
	oColorsUl = $("#colors_ul");
}
function clearColors(){
	//清除提示内容
	oColorsUl.empty();
	oPopDiv.removeClass("show");
}
function setColors(the_colors){
	//显示提示框，传入的参数即为匹配出来的结果组成的数组
	clearColors();	//每输入一个字母就先清除原先的提示，再继续
	oPopDiv.addClass("show");
	for(var i=0;i<the_colors.length;i++)
		//将匹配的提示结果逐一显示给用户
		oColorsUl.append($("<li>"+the_colors[i]+"</li>"));
	oColorsUl.find("li").click(function(){
		oInputField.val($(this).text());
		clearColors();
	}).hover(
		function(){$(this).addClass("mouseOver");},
		function(){$(this).removeClass("mouseOver");}
	);
}
function findColors(){
	initVars();		//初始化变量
	if(oInputField.val().length > 0){
		//获取异步数据
		$.get("14-10.aspx",{sColor:oInputField.val()},
			function(data){
				var aResult = new Array();
				if(data.length > 0){
					aResult = data.split(",");
					setColors(aResult);	//显示服务器结果
				}
				else
					clearColors();
		});
	}
	else
		clearColors();	//无输入时清除提示框（例如用户按del键）
}
</script>
</head>
<body>
<form method="post" name="myForm1">
Color: <input type="text" name="colors" id="colors" onkeyup="findColors();" />
</form>
<div id="popup">
	<ul id="colors_ul"></ul>
</div>
</body>
</html>