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

最新推荐文章于 2022-05-09 00:37:41 发布
最新推荐文章于 2022-05-09 00:37:41 发布
阅读量633 收藏
点赞数
文章标签： jquery ajax javascript button function xmlhttprequest
从零开始学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


<%@ 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

Winko_Z
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery入门基础
eshine Lau 的博客
03-31 917
jQuery是javascript类库，简称JS库。它预定义了一套对象和函数，简化了javascript的开发，帮开发者建立高难度交互的web2.0特性的富客户端页面。jQuery常用API
jQuery入门
Princess_Y
11-22 2631
jQuery 讲师：尚硅谷-张春胜 邮箱：zhangchunsheng_it@163.com 第1章： jQuery简介 为了简化 JavaScript 的开发，一些 JavsScript 库诞生了。 JavaScript库封装了很多预定义的对象和实用函数，简化HTML与JavaScript之间的操作，能帮助使用者建立有高难度交互的页面， 并且兼容各大浏览器。 当前流行的 JavaScript 库有 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AME0RNig
AJAX&JQuery基础（适合入门-新手）
ttxxi_的博客
11-12 1301
关于原生AJAX基础我在我自己的上一篇博客进行了简单阐述，需要的话自提https://blog.csdn.net/ttxxi_/article/details/83991752 在申明一下：我只是个大二学生，写的东西很基础，因为我也只是刚刚才接触，所有这个个人觉得也适合和我一样刚刚开始学的人看一下，大佬们喷的时候可以肆无忌惮一点，我觉得我就需要骂一骂hhh 一、AJAX简介 Ajax 即“A...
[转]jQuery Ajax 全解析
weixin_30480075的博客
01-14 207
本文地址: jQuery Ajax 全解析 本文作者：QLeelulu 转载请标明出处！ jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。 废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQu...
从零开始学习jQuery (六) jQuery中的Ajax
ywheel的专栏
02-14 414
节选转载自http://www.cnblogs.com/engine1984/archive/2012/02/28/2371782.html jQuery Ajax详解 jQuery提供了几个用于发送Ajax请求的函数. 其中最核心也是最复杂的是jQuery.ajax( options ),所有的其他Ajax函数都是它的一个简化调用. 当我们想要完全控制Ajax时可以使
jQuery插件---轻量级的弹出窗口wBox
weixin_33998125的博客
08-05 161
Box Demo wBox——轻量级的弹出窗口jQuery插件，基于jQuery1.4.2开发，主要实现弹出框的效果，并且加入了很多有趣的功能，比如可img灯箱效果，callback函数，显示隐藏层，Ajax页面，iframe嵌入页面…… 背景透明度可以根据实际情况进行调节，甚至不设置背景 可以根据需要添加wBox标题 支持设置窗口位置，默认为在中心显示 支持callback函数...
从零开始学习jQuery (六) jquery中的AJAX使用
12-02
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. ...原始Ajax与jQuery中的Ajax 首先通过实例, 来看一下jQuery实现
从零开始学习jQuery (一) 开天辟地入门篇
10-28
jQuery是一个流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互，使得开发Web应用程序更加高效和简便。在正式展开讨论之前，需要明确一点，jQuery是一个脚本库，而不是一个框架。脚本库提供了...
基于jquery实现多功能日历插件(weekcalendar)1.2版本下载
07-03
基于jquery实现多功能日历插件(weekcalendar)1.2版本下载
从零开始学习jQuery教程_c#.net版.zip
01-24
总结，这份《从零开始学习jQuery教程_c#.net版》涵盖了jQuery的基本操作、DOM操作、事件处理、动画制作和Ajax通信等关键知识点，结合C# .NET的背景，能够帮助你快速上手并精通jQuery，从而提升你的前端开发技能。...
jquery 循环ajax,jQuery异步AJAX调用的While循环
weixin_42380646的博客
08-05 447
小编典典最好的选择是重组代码以使用异步ajax调用，并在第一个调用完成时启动下一个调用，依此类推。这将允许页面在图像获取之间重新显示。这也将使浏览器有机会喘口气并进行其他家务管理，而不会认为它已被锁定或挂起。而且，使用async: 'false'是一个坏主意。我没有理由理解为什么结构正确的代码无法在此处使用异步ajax调用，并且在获取此数据时不会挂起浏览器。您可以使用异步ajax来做到这一点，如下...
jQuery中Cookie及Ajax的使用方法总结
qq_42724864的博客
03-30 4696
jQuery: 1.快速简洁的JavaScript框架 2.jQuery设计的宗旨是”write less，Do More“ 3.兼容各种主流浏览器 jQuery的好处 1.简化js的复杂操作 2.不在需要关心兼容性 3.提供大量使用的方法 jQuery中方法有很多，这里先总结一下jQuery中对Cookie的处理 以及Ajax的方法 介绍一下cookie cookie的构成： name=val...
【2022跨年】最浪漫的表白烟花，送给新的一年的自己（源码）
热门推荐
m0_67391121的博客
03-06 3万+
先建立一个images文件夹： 放入一张小表情图片：a8.png jquery.min.js： /*! jQuery v2.0.0 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license //@ sourceMappingURL=jquery.min.map */ (function(e,undefined){var t,n,r=typeof undefined,i=e.location,o=e.document,s=o.document.
7.2 QuickJS核心代码流程-新建上下文
kking_edc的博客
05-09 612
1 JS_NewContext函数介绍 JS_NewContext 函数会通过 JS_NewContextRaw 初始化一个上下文。 JS_NewContext函数体如下： JSContext *JS_NewContext(JSRuntime *rt){ JSContext *ctx; ctx = JS_NewContextRaw(rt); if (!ctx) return NULL; JS_AddIntrinsicBaseObjects(ctx)
JavaScript、jQuery、Ajax
weixin_36020178的博客
01-17 374
JavaScript、jQuery1、JavaScript内置对象2、JavaScript HTML DOM对象3、jQuery面试题 1、JavaScript内置对象 2、JavaScript HTML DOM对象 3、jQuery 面试题 1、下来不属于JavaScript语法关键/保留字的是（var、$、function、while） ...
ajax入门,jQuery+ashx （二）
jeff's blog
12-12 1556
      上节说到一般处理程序，由于时间关系就晚上继续了。下面按照一个实例项目来具体说明一下。      首先新建一个空白解决方案"AjaxPj"      添加一个新的项目（asp.net web application）"Ajax.Website"      修改配置文件，如下图所示      新建文件MyHandler.ashx,代码如下using System; using System.Collections; using System.Data; using System.Linq;
js Hook Ajax
qq_41236493的博客
03-17 622
(function() { var origOpen = XMLHttpRequest.prototype.open; XMLHttpRequest.prototype.open = function() { // console.log('request started!'); this.addEventListener('load', ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值