`

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

分享到:
评论

相关推荐

    jquery 入门文档 从零开始学校jquery

    从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件...

    从零开始学习jQuery-张子秋

    从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) ...

    Ajax入门:从零开始学习jQuery pdf

    从零开始学习jQuery pdf,第一篇:开天辟地入门篇;第二篇:jQuery最重要的部分——万能的选择器;第三章:管理Jquery包装集;第四章:使用jQuery操作元素的属性与样式;第五篇:事件与事件对象……  通过一步步的...

    jQuery使用手册 jquery入门教程

    从零开始学习jQuery (六) jQuery 中的Ajax 从零开始学习jQuery (七) jQuery 动画-让页面动起来! 从零开始学习jQuery (八) 插播:jQuery 实施方案 从零开始学习jQuery (九) jQuery 工具函数 从零开始学习jQuery (十) ...

    从零开始学习JQuery

    从零开始学习jQuery (六) AJAX快餐 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学习jQuery (九) jQuery工具函数 从零开始学习jQuery (十) jQueryUI常用功能实战 从零开始学习jQuery (十一) 实战...

    JQuery教程-从零开始学习jQuery

    从零开始学习jQuery。从初始环境设置开始,讲解如何在Visual是土地哦下利用JQUERY进行AJAX开发。

    从零开始学习jQuery

    从零开始学习jQuery,可以放在手机上看 word文档

    《从零开始学JQuery》Word版书籍及常用jquery资料

    《从零开始学JQuery》Word版书籍 1-15章整理成word版 附带常用jquery ajax函数表 加一个用户名验证实例

    jQuery学习资料

    从零开始学习jQuery (一) 开天辟地入门篇 2 一.摘要 2 二.前言 3 三.什么是jQuery 3 四.Hello World jQuery 4 五.启用Visual Studio 对jQuery的智能感知 6 六.在独立的.JS文件中启用脚本智能感知 8 七.总结 9 从零...

    jQuery的学习步骤

    然后建议去看看 张子秋大哥的 从零开始学jQuery系列 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ...

    从零开始学习jQuery.pdf

    JQuery快速学习教材,简单易懂,快速上手。.Net集成开发环境中使用更快!

    从零开始学习jQuery (六) jquery中的AJAX使用

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. ...原始Ajax与jQuery中的Ajax 首先通过实例, 来看一下jQuery实现

    js+ajax+jquery+easyui从入门到精通(项目实战)

    2.ajax技术从零开始学,深入研究ajax的原理及使用,通过一些使用案例讲解;3.easyui从入门到精通课程,详细介绍各种常用控件的使用方法,结合项目模块实战;4.jquery应用:主要讲解对复杂及常用ui界面的设计,利用...

    dollabill:从零开始的jQuery精简版实现

    我决定尝试从零开始实现jQuery,作为学习普通JS的一种方法。 但是,通过此练习,我知道了它对您有多大的作用,使我对jQuery有了更大的赞赏! dollabill DOM操作(dom_manip.js) addClass removeClass ...

    ajax与Servlet交互

    使用Struts2和jQuery EasyUI实现简单CRUD系统,从零开始,从基础的ajax与Servlet的交互开始。

    ajax与Struts2交互实例

    使用Struts2和jQuery EasyUI实现简单CRUD系统,从零开始,从基础的ajax与Struts2的交互开始。

    ajax与Struts2使用json格式交互实例

    使用Struts2和jQuery EasyUI实现简单CRUD系统,从零开始,从基础的ajax与Struts2的使用json格式进行交互开始。

    阿尔巴尼亚人:使用Node.js,Express,MySQL,Bulma,jQuery和Ajax从零开始使用的docker化博客应用程序(我在学习Node.js时创建-022018):)

    使用Node.js,Express,MySQL,Bulma,jQuery和Ajax从头开始使用docker化的博客应用程序。 假设您已在计算机上正确安装了Docker ,则需要执行以下操作:导航至终端上的项目文件夹内,然后键入make 。

    jQuery完全实例.rar

    而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整形)。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' ...

Global site tag (gtag.js) - Google Analytics