从零开始学jQuery：jQuery与Ajax入门

     jQuery这个开源js继承框架现在已经被非常广泛的关注和使用了，jQuery实现很帅的功能，只用了少量的代码。

可以说极大的方便了开发，我这里就不做过多介绍了，前几天看了看网上铺天盖地的jQuery插件和jQuery Demo，

也自己动手实现了jQuery表单无刷新验证和jQuery弹出层登陆。但我决定还是从基础抓起，学好基础，虽然接下来的一个项目，要用

这项技术（当然为了实现无刷新操作数据库这个最帅的效果）。我决定还是快速的搞搞基础，要不然jQuery基础

代码都看不懂，用起来自然就吃力了。

下面是我整理的jQuery+Ajax入门学习笔记，供和我一样的新手们学习参考。

 

****************Ajax笔记***************

Ajax组成：

JavaScript
CSS（页面样式）
DOM（页面局部管理）
xmlHttpRequest（异步对象）

异步对象链接服务器

创建：

var xmlHttp;
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

<!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>
<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

Code

 

########################################################

GET VS POST
GET

var queryString="firstName=isaac&birthday=0624";        //向服务器发送数据的所有请求
var url="9-3.aspx?"+queryString+"&timestamp="+new Date().getTime();        //绑定在“9-3.aspx？”的

后面，“"&timestamp="+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+"&timestamp="+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

 

<!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>
<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()方法代码

 

<!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>
<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,......）

实现代码：

 

<!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>
<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)

实现代码：

 

<!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>
<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)

 

<!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>
<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

posted on 2008-10-25 22:40  俱正Steven  阅读(7501)  评论(5)  编辑  收藏  举报

导航