- 浏览: 150303 次
- 性别:
- 来自: 保定
文章分类
最新评论
-
hellostory:
高级查询的查询参数放哪里?
SSH超实用分页实现(原创开源)! -
topbox163:
不错。。。。。。。。。
拥有属于自己的SVN(Google SVN)(更新版) -
shiyangxt:
忧_零 写道不知道这个问题LZ是否解决了啊,今天同样碰到这个问 ...
救助贴???关于Mysql插入二进制文件 -
忧_零:
不知道这个问题LZ是否解决了啊,今天同样碰到这个问题了,错误相 ...
救助贴???关于Mysql插入二进制文件 -
sornor:
不错!总算对servlet和jsp之间的关系有了了解了!感谢感 ...
JSP与Servlet的关系和实例分析(转帖)
jQuery这个开源js继承框架现在已经被非常广泛的关注和使用了,jQuery实现很帅的功能,只用了少量的代码。
可以说极大的方便了开发,我这里就不做过多介绍了,前几天看了看网上铺天盖地的jQuery插件和jQuery Demo,
也自己动手实现了jQuery表单无刷新验证和jQuery弹出层登陆。但我决定还是从基础抓起,学好基础,虽然接下来的一个项目,要用
这项技术(当然为了实现无刷新操作数据库这个最帅的效果)。我决定还是快速的搞搞基础,要不然jQuery基础
代码都看不懂,用起来自然就吃力了。
下面是我整理的jQuery+Ajax入门学习笔记,供和我一样的新手们学习参考。
****************Ajax笔记***************
Ajax组成:
JavaScript
CSS(页面样式)
DOM(页面局部管理)
xmlHttpRequest(异步对象)
异步对象链接服务器
创建:
function createXMLHttpRequest(){
if(window.ActionXObject) //判断浏览器的兼容性
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
else if(window.XMLHttpRequest)
xmlHttp=new XMLHttpRequest();
}
建立请求:
xmlHttp.open("GET","9-1.aspx",true); //"GET"传值方法,"9-1.aspx"异步请求的地址,true表示异步
请求
判断交互状态:
onreadystatechange事件
xmlHttp.onreadystatechange=function(){ //服务器状态发生变化时调用此函数。
if(xmlHttp.readyState==4&&xmlHttp.status==200) //判断异步交互是否成功
//do something
}
send()发送
xmlHttp.send(null); //get方法只需send(null)
########################################################
example:
ajax.html
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActionXObject) //判断浏览器的兼容性
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
else if(window.XMLHttpRequest)
xmlHttp=new XMLHttpRequest();
}
function startRequest(){
createXMLHttpRequest();
xmlHttp.open("GET","success.jsp",true);
xmlHttp.onreadystatechange=function(){ //服务器状态发生变化时调用此函数。
if(xmlHttp.readyState==4 && xmlHttp.status==200) //判断异步交互是否成功
alert("服务器返回:"+xmlHttp.responseText);
}
xmlHttp.send(null);
}
</script>
</head>
<body>
<form action="" method="get">
<input type="button" value="测试异步通讯" onClick="startRequest()">
</form>
</body>
</html>
success.jsp
<!----><%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%
out.print("恭喜你,异步测试成功!");
%>
########################################################
GET VS POST
GET
var queryString="firstName=isaac&birthday=0624"; //向服务器发送数据的所有请求
var url="9-3.aspx?"+queryString+"×tamp="+new Date().getTime(); //绑定在“9-3.aspx?”的
后面,“"×tamp="+new Date().getTime()”表示每次点击发送不同数据,防止IE自动缓存
xmlHttp.open("GET",url);
xmlHttp.send(null); //该语句只发送null
POST
var queryString="firstName=isaac&birthday=0624";
var url="9-3.aspx?"+queryString+"×tamp="+new Date().getTime(); //POST方法不绑定
xmlHttp.open("POST",url);
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //重置头部
xmlHttp.send(queryString); //该语句负责发数据
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
jQuery+Ajax
获取异步数据:
单纯的Ajax代码
ajax.html
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax获取数据过程</title>
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActionXObject) //判断浏览器的兼容性
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
else if(window.XMLHttpRequest)
xmlHttp=new XMLHttpRequest();
}
function startRequest(){
createXMLHttpRequest();
xmlHttp.open("GET","success.jsp",true);
xmlHttp.onreadystatechange=function(){ //服务器状态发生变化时调用此函数。
if(xmlHttp.readyState==4 && xmlHttp.status==200) //判断异步交互是否成功
document.getElementById("target").innerHTML=xmlHttp.responseText;
}
xmlHttp.send(null);
}
</script>
</head>
<body>
<form action="" method="get">
<input type="button" value="测试异步通讯" onClick="startRequest()">
</form>
<div id="target"></div>
</body>
</html>
jQuery的load()方法代码
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax获取数据过程</title>
<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript">
function startRequest(){
$("#target").load("success.jsp");
}
</script>
</head>
<body>
<form action="" method="get">
<input type="button" value="测试异步通讯" onClick="startRequest()">
</form>
<div id="target"></div>
</body>
</html>
jQuery的两个方法:
$.get(url,[data],[callback]) //url,发送数据,回调函数
$.post(url,[data],[callback],[type]) //url,发送数据,回调函数,服务器返回类型(文本,xml,
json,......)
实现代码:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GET VS POST</title>
<script language="javascript" src="js/jquery-1.2.6.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("success.jsp",createQueryString(),
//发送GET请求
function(data){
$("#serverResponse").html(decodeURI(data));
}
);
}
function doRequestUsingPOST(){
$.post("success.jsp",createQueryString(),
//发送POST请求
function(data){
$("#serverResponse").html(decodeURI(data));
}
);
}
</script>
</head>
<body>
<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>
设置Ajax的细节
$.ajax(options)
实现代码:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GET VS POST</title>
<script language="javascript" src="js/jquery-1.2.6.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(){
$.ajax({
type:"GET",
http://www.cnblogs.com/shiyangxt/admin/%22success.jsp",
data:createQueryString(),
success:function(data){
$("#serverResponse").html(decodeURL(data));
}
});
}
function doRequestUsingGET(){
$.ajax({
type:"POST",
http://www.cnblogs.com/shiyangxt/admin/%22success.jsp",
data:createQueryString(),
success:function(data){
$("#serverResponse").html(decodeURL(data));
}
});
}
</script>
</head>
<body>
<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>
全局设定Ajax
$.ajaxSetup(options)
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GET VS POST</title>
<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript">
$.ajaxSetup({
//全局设定
http://www.cnblogs.com/shiyangxt/admin/%22success.jsp",
seccess:function(data){
$("#serverResponse").html(decodeURL(data));
}
});
//必须两次编码才能解决中文问题
function createQueryString(){
var firstName=encodeURI($("#firstName").val());
var birthday=encodeURI($("#birthday").val());
//组合成对象形式
var queryString="firstName="+firstName+"&birthday="+birthday;
return queryString;
}
function doRequestUsingGET(){
$.ajax({
type:"GET",
data:createQueryString(),
});
}
function doRequestUsingGET(){
$.ajax({
type:"POST",
data:createQueryString(),
});
}
</script>
</head>
<body>
<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>
施杨教程!!!转载请注明www.cnblogs.com/shiyangxt
发表评论
-
欢迎访问我的主博(http://shiyangxt.cnblogs.com)
2008-12-31 11:26 1170JavaEye的朋友,大家好。我是一名大二的 ... -
DOS下命令大全!
2008-06-27 21:00 1186最近一直忙期末考试,时间比较紧,所以好几天,没有新帖子。现在整 ... -
Windows XP远程桌面连接图解(转载)
2008-07-09 22:15 3041... -
Tomcat中Context元素详解(转)
2008-07-31 10:09 1045Context元素代表一个web应用,运行在某个特定的虚拟主机 ... -
Proxool建立数据库连接池(源码)
2008-08-02 22:24 1172最近搞数据库连接池,着实很让我郁闷,首先是 ... -
超赞!的装机软件(我的推荐)
2008-08-05 12:03 677现在的应用软件非常多,花样也很繁杂,功能各异,但 ... -
正则表达式在mysql中的一些应用
2008-08-09 13:31 873正则表达式是定义复杂查询的一个强有力的工具。 正则表达式定 ... -
郁闷的两天(Windows系统两个问题解决方案汇总)
2008-08-15 15:06 1136这两天我的笔记本电脑总是出一些很莫名奇妙的问题。 前天出现 ... -
救助贴???关于Mysql插入二进制文件
2008-08-17 01:04 1569尝试把图片文件转化成二进制存入Mysql数据库的blob类型的 ... -
精品文章导读!!!(不断更新中......)
2008-08-24 13:48 900... -
C++学习第一天!
2008-09-02 21:28 736新的学 ... -
SVN协同开发配置方案!
2008-09-27 19:41 1013现在很多公司都是使用SVN来实现,多线协同开发的,我们中心 ... -
轻松Ghost XP系统!
2008-09-29 00:28 829今天和一个哥们学习了ghost系统备份。一般装系统总会为驱 ... -
XML语法结构总结!
2008-10-04 17:46 839XML作为可扩展的标记语言,应用范围非常之广泛。XML所关注的 ... -
键盘快捷键大全!(转载)
2008-10-05 15:53 1277******************键盘快捷 ... -
拥有属于自己的SVN(Google SVN)(更新版)
2008-10-06 15:52 15827今天中午抽时间搞了一下Google的SVN,感觉非常好使!所以 ... -
cookie 和session 的区别详解
2008-10-07 14:16 684这些都是基础知识,不 ... -
超赞!的装机软件推荐!(第二季)
2008-10-11 16:10 721... -
jQuery插件积累(转载)
2008-10-17 12:15 4236概述 jQuery 是继 prototype 之后又一个优秀的 ... -
深入浅出DOM模型(源码分析)!
2008-10-26 21:54 1254Ajax由四部分组成:JavaScript,css,DOM,x ...
相关推荐
从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件...
从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) ...
从零开始学习jQuery pdf,第一篇:开天辟地入门篇;第二篇:jQuery最重要的部分——万能的选择器;第三章:管理Jquery包装集;第四章:使用jQuery操作元素的属性与样式;第五篇:事件与事件对象…… 通过一步步的...
从零开始学习jQuery (六) jQuery 中的Ajax 从零开始学习jQuery (七) jQuery 动画-让页面动起来! 从零开始学习jQuery (八) 插播:jQuery 实施方案 从零开始学习jQuery (九) jQuery 工具函数 从零开始学习jQuery (十) ...
从零开始学习jQuery (六) AJAX快餐 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学习jQuery (九) jQuery工具函数 从零开始学习jQuery (十) jQueryUI常用功能实战 从零开始学习jQuery (十一) 实战...
从零开始学习jQuery。从初始环境设置开始,讲解如何在Visual是土地哦下利用JQUERY进行AJAX开发。
从零开始学习jQuery,可以放在手机上看 word文档
《从零开始学JQuery》Word版书籍 1-15章整理成word版 附带常用jquery ajax函数表 加一个用户名验证实例
从零开始学习jQuery (一) 开天辟地入门篇 2 一.摘要 2 二.前言 3 三.什么是jQuery 3 四.Hello World jQuery 4 五.启用Visual Studio 对jQuery的智能感知 6 六.在独立的.JS文件中启用脚本智能感知 8 七.总结 9 从零...
然后建议去看看 张子秋大哥的 从零开始学jQuery系列 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ...
JQuery快速学习教材,简单易懂,快速上手。.Net集成开发环境中使用更快!
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. ...原始Ajax与jQuery中的Ajax 首先通过实例, 来看一下jQuery实现
2.ajax技术从零开始学,深入研究ajax的原理及使用,通过一些使用案例讲解;3.easyui从入门到精通课程,详细介绍各种常用控件的使用方法,结合项目模块实战;4.jquery应用:主要讲解对复杂及常用ui界面的设计,利用...
我决定尝试从零开始实现jQuery,作为学习普通JS的一种方法。 但是,通过此练习,我知道了它对您有多大的作用,使我对jQuery有了更大的赞赏! dollabill DOM操作(dom_manip.js) addClass removeClass ...
使用Struts2和jQuery EasyUI实现简单CRUD系统,从零开始,从基础的ajax与Servlet的交互开始。
使用Struts2和jQuery EasyUI实现简单CRUD系统,从零开始,从基础的ajax与Struts2的交互开始。
使用Struts2和jQuery EasyUI实现简单CRUD系统,从零开始,从基础的ajax与Struts2的使用json格式进行交互开始。
使用Node.js,Express,MySQL,Bulma,jQuery和Ajax从头开始使用docker化的博客应用程序。 假设您已在计算机上正确安装了Docker ,则需要执行以下操作:导航至终端上的项目文件夹内,然后键入make 。
而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整形)。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' ...