从零开始学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
<!----><%@ 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+"&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