`

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

jQueryAjaxJavaScriptJSPXHTML 
阅读更多

     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

分享到：
| Struts2拦截器权限验证（源码）！
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    从零开始学jquery

    【从零开始学jQuery】这个教程旨在帮助初学者全面理解并掌握jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互，是Web开发中的常用工具。 ### (一) 开天辟地入门篇 在入门...

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

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

    从零开始学习jQuery

    通过《从零开始学习jQuery》的系列教程，你将逐步掌握jQuery的核心概念，理解其工作原理，并能够运用到实际项目中，提升网页开发的效率和质量。记得动手实践，结合实例加深理解，祝你学习愉快！

    jQuery使用手册 jquery入门教程

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

    从零开始学习JQUERY

    ### 从零开始学习JQUERY #### 一、开天辟地入门篇 ##### 摘要 本文作为“从零开始学习JQUERY”系列的第一篇文章，旨在为读者提供一个全面且实用的学习指南，无论你是初学者还是有一定基础的开发者都能从中受益。...

    jquery从零开始学习

    ### jQuery从零开始学习 #### 一、简介与概述 jQuery作为一款流行的JavaScript库，极大地简化了HTML文档遍历、事件处理、动画等任务，并且兼容多种浏览器。它以其轻量级、易用性和强大的功能著称，在Web前端开发...

    从零开始学jquery doc

    ### 从零开始学jQuery：全面解析与实践 #### 引言：为何选择jQuery？ jQuery，作为一款跨浏览器的JavaScript库，自问世以来便迅速占领了前端开发领域的一席之地。它之所以广受开发者青睐，究其原因在于其提供了...

    从零开始学习JQuery

    每篇文章都旨在帮助读者从零开始，逐步深入学习和掌握jQuery的各种使用技巧。 ### 开发环境搭建 学习jQuery的第一步是搭建开发环境。在Visual Studio中可以方便地配合使用jQuery，可以通过包管理器如NuGet安装...

    从零开始学习jQuery word格式完整版

    《从零开始学习jQuery》是一本面向初学者的教程，旨在帮助读者系统地掌握JavaScript的基础以及jQuery库的应用。本文档采用Word格式，由知名博主“子秋”编写，提供了全面而深入的学习路径。 1. 你必须知道的...

    从零开始学习jQuery(带目录)

    ### 从零开始学习jQuery（核心知识点概览） #### 一、引言 随着Web技术的发展，JavaScript作为前端开发的核心语言之一，其地位日益重要。然而，原生JavaScript的复杂性和浏览器之间的兼容性问题给开发者带来了不小...

Magicbox
Global site tag (gtag.js) - Google Analytics