从零开始学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

ContractedBlock.gif 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 >
复制代码

 本文转自施杨博客园博客,原文链接:http://www.cnblogs.com/shiyangxt/archive/2008/10/25/1319598.html,如需转载请自行联系原作者

相关文章
N..
|
2月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
44 1
|
2月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
35 0
|
1月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
22 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
22天前
|
JavaScript 前端开发 API
jQuery 入门:轻松创建与插入节点
jQuery 入门:轻松创建与插入节点
18 1
|
1月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
2月前
|
XML JSON 前端开发
Ajax – JSON入门指南
Ajax – JSON入门指南
24 1
|
2月前
|
前端开发 JavaScript PHP
【PHP开发专栏】jQuery与PHP实现Ajax通信
【4月更文挑战第30天】本文介绍了使用jQuery和PHP实现Ajax通信的步骤。首先,讲解了Ajax的基础和jQuery简化Ajax操作的概念。接着,展示了如何使用jQuery的`$.get()`、`$.post()`和`$.ajax()`方法发送GET和POST请求,以及如何控制请求细节。在PHP端,讨论了接收和响应Ajax请求的方法,包括处理数据、设置响应类型和错误处理。结合jQuery与PHP,开发者能实现高效、无缝的异步数据传输,提升Web应用的用户体验。
|
2月前
|
JSON 前端开发 JavaScript
jQuery ajax读取本地json文件 三级联动下拉框
jQuery ajax读取本地json文件 三级联动下拉框
|
8月前
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
65 0
|
2月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
81 0