`

jquery 开发ajax

 
阅读更多
<%@ 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>
分享到:
评论

相关推荐

    jquery,ajax的几个小例子

    在Web开发中,jQuery是实现动态和交互性网页的关键工具。Ajax(Asynchronous JavaScript and XML)则是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。在jQuery中,Ajax功能被封装得十分友好,使得开发者...

    Jquery跨域Ajax请求测试

    本示例"Jquery跨域Ajax请求测试"将详细讲解如何利用jQuery实现这一功能。 首先,了解同源策略是理解跨域问题的关键。同源策略是浏览器为了保障用户安全而设定的一项机制,它规定了只有来自同一协议、同一域名和同一...

    jQuery-ajax-用户名异步请求

    在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理以及Ajax交互。本主题聚焦于jQuery中的Ajax功能,特别是如何利用它进行异步用户名验证。Ajax,即Asynchronous JavaScript and ...

    jquery-ajax实例

    AJAX(异步JavaScript和XML)技术在现代Web开发中扮演着关键角色,而jQuery的ajax方法则提供了简洁的API来实现这一功能。 首先,我们来看`bean - json`的转化。在Web服务中,我们经常需要在服务器端处理Java Bean...

    php+jquery+ajax最简单例子

    在IT行业中,PHP、jQuery和Ajax是Web开发中的三大核心技术,它们共同构建了现代动态网页交互的基础。这个“php+jquery+ajax最简单例子”旨在教你如何使用这些工具实现一个基本的异步数据交换功能。 首先,让我们...

    jquery,jquery是Ajax的一个框架

    jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了前端开发中的许多任务,尤其是处理 AJAX(Asynchronous JavaScript and XML)请求。AJAX 是一种在不刷新整个网页的情况下,允许部分网页内容异步更新的技术。...

    jquery的ajax方法

    在Web开发中,jQuery的Ajax功能极大地简化了XMLHttpRequest对象的使用,使得前端与后端的数据交换变得更加便捷。 **$.ajax()**是jQuery中最全面的Ajax请求函数,它允许我们自定义各种参数以满足不同的需求。通过这...

    Struts2+Jquery+Ajax

    通过理解MVC模式、熟练掌握Struts2的配置和Action处理、灵活运用Jquery和Ajax,可以大大提高开发效率,提升用户使用体验。在实际开发过程中,还需要关注安全问题,如Struts2的安全漏洞,确保应用的稳定性和安全性。

    jQuery的Ajax实现异步传输List、Map

    在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互。Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个页面的情况下与服务器进行数据交换,极大地提升...

    Ajax\使用jQuery简化Ajax+开发.zip

    Ajax\使用jQuery简化Ajax+开发.zipAjax\使用jQuery简化Ajax+开发.zipAjax\使用jQuery简化Ajax+开发.zipAjax\使用jQuery简化Ajax+开发.zipAjax\使用jQuery简化Ajax+开发.zip

    使用jQuery简化Ajax 开发.pdf

    ### 使用jQuery简化Ajax开发 #### 引言 随着网络应用的日益复杂,异步数据交换的需求也随之增加。Ajax(Asynchronous JavaScript + XML)作为一种技术,允许网页在不重新加载整个页面的情况下,通过JavaScript异步...

    jquery+AJAX小小项目

    在Web开发中,jQuery和AJAX是两种非常重要的技术,它们使得前端与后端的数据交互变得更加便捷和高效。本项目主要展示了如何利用jQuery库来实现AJAX的增删改查功能,帮助开发者更好地理解和运用这两种技术。 **一、...

    jQuery简化Ajax开发

    资源名称:jQuery简化Ajax开发内容简介:Ajax 并不是一种语言,它只是几种旧技术如 Javascript 和 XML 以及 DOM 的综合应用,全称为 Asynchronous Javascript and XML,即 异步 Javascript 和 XML...

    jQuery+ajax实现三级级联

    在IT行业中,jQuery和ajax是两个非常重要的技术,它们在构建动态、交互性强的Web应用程序时发挥着关键作用。在这个“jQuery+ajax实现三级级联”的实例中,我们主要探讨如何利用这两种技术来创建一个能够逐级联动的...

    项目组管理系统,Java+json+jQuery+ajax

    总结起来,这个【项目组管理系统】结合了Java的稳定性和强大的功能,利用JSON进行数据交换,借助jQuery简化前端开发,并通过Ajax提供流畅的用户体验。对于想要学习Web应用开发的人来说,这是一个很好的实践案例,...

    jquery、ajax学习电子书.zip

    《jQuery与Ajax学习指南》是一本专为初学者和有一定JavaScript基础的开发者设计的电子书,旨在帮助读者深入理解和熟练掌握这两个在实际Web开发中不可或缺的技术。jQuery是一个强大的JavaScript库,它极大地简化了DOM...

    jquery+ajax的视频讲解

    在Web开发中,jQuery和AJAX是两个不可或缺的重要技术,它们大大简化了前端与服务器端的交互过程。本教程通过一个详细的视频讲解,旨在帮助新手和初学者快速掌握这两个工具的核心知识。 **jQuery简介** jQuery是一...

    PHP-JQuery-Ajax-json

    标题“PHP-JQuery-Ajax-json”揭示了这个压缩包文件主要涉及的是Web开发中的核心技术,具体包括PHP、jQuery、Ajax以及JSON。这四个元素在构建动态、交互式的Web应用程序时起着至关重要的作用。 1. **PHP(Hypertext...

    Jquery和ajax结合使用的小例子

    **jQuery和Ajax结合使用是Web开发中的常见技术组合,它能帮助开发者实现页面无刷新的数据交互,提升用户体验。Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下更新部分网页内容的技术...

Global site tag (gtag.js) - Google Analytics