jQuery 与 Ajax

最新推荐文章于 2025-05-10 13:25:59 发布
原创 最新推荐文章于 2025-05-10 13:25:59 发布 · 4k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ajax #jquery #javascript

博客介绍了使用$.ajax替代$.getScript()的相关内容，涉及JavaScript、jQuery和Ajax技术，体现了在编程中不同方法的替换应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一 ajax 是什么？
AJAX (Ansnchronous javascript and XML) 异步 JavaScript 和 XML。是一种用于创建快速动
态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着
可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果
需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、
开心网等等。
二 ajax 用在哪里？
简单说是需要连接数据库的地方，但是连接数据库传输的信息量很少，用不着刷新整个页面，这
种类型的适合用 ajax，避免了属性整个页面带来的资源浪费。
三 为什么要使用 ajax？
减轻服务器的负担，按需取数，可以最大程度的减少冗余请求和响应对服务造成的负担。无需
更新页面，减少用户心理和实际的等待时间。带来更好的用户体验。可以把以前一些服务器负担的工
作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和速写的负担，节约空间和宽带租用成
本。可以调用外部数据。基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。进一步促
进页面呈现和数据的分离。
优势:
1. 不需要插件支持
2. 优秀的用户体验 (无刷新更新网页)
3. 提高 web 程序的性能(即时提交)
4. 减轻服务器与带宽的负担
缺点:
1. 浏览器对 XMLHttpRequest 的支持不足
2. 破坏浏览器的前进后退按钮的正常功能
3. 对搜索引擎的支持不足(百度爬虫)
4. 开发和调试工具的缺乏
安装服务器环境
下载 AppServ(php 网站架构工具组合包)
http://www.appservnetwork.com
安装好后服务器的默认文件夹是 AppServ\www，
将包含程序相关文件夹 copy 至本目录 在地址栏输入 http://localHost/相关文件夹/相关文件
Js 与 Ajax
<script language="javascript" type="text/javascript">
//通过这个函数来异步获取信息
function Ajax(){
var xmlHttpReq = null; //声明一个空对象用来装入XMLHttpRequest
if (window.ActiveXObject){
//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest){
//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象
xmlHttpReq = new XMLHttpRequest();//实例化一个XMLHttpRequest
}
if(xmlHttpReq != null){ //如果对象实例化成功
xmlHttpReq.open("GET","test.php",true); //调用open()方法并采用异步方式
xmlHttpReq.onreadystatechange=RequestCallBack; //设置回调函数
xmlHttpReq.send(null); //因为使用get方式提交，所以可以使用null参数调用
}
function RequestCallBack(){//一旦readyState值改变，将会调用这个函数
if(xmlHttpReq.readyState == 4){//完成加载
if(xmlHttpReq.status == 200){//响应成功
//将xmlHttpReq.responseText的值赋给ID为 resText 的元素
document.getElementById("resText").innerHTML =
xmlHttpReq.responseText;
}
}
}
}
</script>
<input type="button" value="Ajax 提交" onclick="Ajax();" />
<div id="resText" ></div>
Test.php :
<?php
echo "Hello Ajax!";
?>
一 ajax 是什么？
AJAX (Ansnchronous javascript and XML) 异步 JavaScript 和 XML。是一种用于创建快速动
态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着
可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果
需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、
开心网等等。
二 ajax 用在哪里？
简单说是需要连接数据库的地方，但是连接数据库传输的信息量很少，用不着刷新整个页面，这
种类型的适合用 ajax，避免了属性整个页面带来的资源浪费。
三 为什么要使用 ajax？
减轻服务器的负担，按需取数，可以最大程度的减少冗余请求和响应对服务造成的负担。无需
更新页面，减少用户心理和实际的等待时间。带来更好的用户体验。可以把以前一些服务器负担的工
作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和速写的负担，节约空间和宽带租用成
本。可以调用外部数据。基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。进一步促
进页面呈现和数据的分离。
优势:
1. 不需要插件支持
2. 优秀的用户体验 (无刷新更新网页)
3. 提高 web 程序的性能(即时提交)
4. 减轻服务器与带宽的负担
缺点:
1. 浏览器对 XMLHttpRequest 的支持不足
2. 破坏浏览器的前进后退按钮的正常功能
3. 对搜索引擎的支持不足(百度爬虫)
4. 开发和调试工具的缺乏
安装服务器环境
下载 AppServ(php 网站架构工具组合包)
http://www.appservnetwork.com安装好后服务器的默认文件夹是 AppServ\www，将包含程序相关文件夹 copy 至本目录
在地址栏输入 http://localHost/相关文件夹/相关文件
Js 与 Ajax
<script language="javascript" type="text/javascript">
//通过这个函数来异步获取信息
function Ajax(){
var xmlHttpReq = null; //声明一个空对象用来装入XMLHttpRequest
if (window.ActiveXObject){
//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest){
//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象
xmlHttpReq = new XMLHttpRequest();//实例化一个XMLHttpRequest
}
if(xmlHttpReq != null){ //如果对象实例化成功
xmlHttpReq.open("GET","test.php",true); //调用open()方法并采用异步方式
xmlHttpReq.onreadystatechange=RequestCallBack; //设置回调函数
xmlHttpReq.send(null); //因为使用get方式提交，所以可以使用null参数调用
}
function RequestCallBack(){//一旦readyState值改变，将会调用这个函数
if(xmlHttpReq.readyState == 4){//完成加载
if(xmlHttpReq.status == 200){//响应成功
//将xmlHttpReq.responseText的值赋给ID为 resText 的元素
document.getElementById("resText").innerHTML =
xmlHttpReq.responseText;
}
}
}
}
</script>
<input type="button" value="Ajax 提交" onclick="Ajax();" />
<div id="resText" ></div>
Test.php :
<?php
echo "Hello Ajax!";
?>

为什么要学习 jquery Ａjax
用 js 原生的 XMLHttpRequest 对象的很多属性与方法极其庞大,学习起来效率极其低下，而 jquery
提供了一些快捷的日常操作，使 Ajax 的开发变得极其简单,这样开发人员就可以将精力集中在业务和
用户体验上，而不必理会那些繁烦的 XMLHttpRequest 的对象。jQuery 中的 Ajax
jQuery 对 Ajax 中的方法进行了封装
第一层方法 :$.ajax() 最底层
第二层方法 :$.load()、$.get()、$.post(); 使用频率最高
第三层方法 :$.getScript()和$.getJSON();
1 、Load()方法
载入远程的 html 代码并插入到相关 DOM 中

实例 2：将整个 html 页面载入
NO1.首先创建一个被 load 方法加载的页面:test.html
<div class="comment">
<h6>张三:</h6>
<p class="para">沙发.</p>
</div>
<div class="comment">
<h6>李四:</h6>
<p class="para">板凳.</p>
</div>
<div class="comment">
<h6>王五:</h6>
<p class="para">地板.</p>
</div>
NO2.创建一个空白页面，在上面追加如下元素
$(function(){
$("#send").click(function(){
$("#resText").load("test.html");
})
})
<input type="button" id="send" value="Ajax 获取" />
<div class="comment">
已有评论：
</div>
<div id="resText" ></div>

实例 3：如果只需要加载页面中的某些元素，可以通过 load 方法中的 url 参数指定选择符,可以方便的筛选出内
容
语法结构为 ”url selector”
$("#resText").load("test.html .para"); //只加载页在中 para 的内容
效果如下

传递方式

回调函数

$(function(){
$("#send").click(function(){
$("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){
//responseText:请求返回的内容
//textStatus:请求状态:success、error、notmodified、timeout4 种
// XMLHttpRequest: XMLHttpRequest 对象
})
注:
在 load 方法中,只要 ajax 请求成功(complete)，回调函数就会被触发,下面对应介绍 ajax 对
应的回调函数↓

2 、$.get()方法与$.post()方法
Get 01 返回html片断
<script type="text/javascript">
$(function(){
$("#send").click(function(){
$.get("get1.php", { //数据文件
username : $("#username").val() , //data参数
content : $("#content").val()
}, function (data, textStatus){
//回调函数(data返回内容XML/JSON/HTML,textStatus请求状态
//-success/error/notmodified/timeout)
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
})
</script>
<form id="form1" action="#">
<p>评论:</p>
<p>姓名: <input type="text" name="username" id="username" /></p>
<p>内容: <textarea name="content" id="content" rows="2"
cols="20"></textarea></p>
<p><input type="button" id="send" value="提交"/></p>
</form>
<div class='comment'>已有评论：</div>
<div id="resText" >
</div>Get 02 返回XML文档[详见案例]
相比返回html，返回XML技术要复杂些，但XML的可移植性优点是无可比拟的……不过XML体积
庞大，解析起来要慢一些，所以现在以返回json为主
如果要返回xml，需要在php文件中声明
header("Content-Type:text/xml; charset=utf-8");
Get 03 返回json（详见案例）
优点:简洁，容易阅读，重用方便
总结：以上３种方法返回html最为简单;
如果数据需要重用，则选择json，它在性能和大小方面具有优势;
如果远程数据未知，则选择XML,它是计算网络的“万能语”
Post 01
$(function(){
$("#send").click(function(){
$.post("post1.php", {
Username:$("#username").val() ,
Content:$("#content").val()
}, function (data, textStatus){ // textStatus代表状态，成功才
返回
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
})
<form id="form1" action="#">
<p>评论:</p>
<p>姓名: <input type="text" name="username" id="username" /></p>
<p>内容:
<textarea name="content" id="content" rows="2" cols="20">
</textarea>
</p> <p>
<input type="button" id="send" value="提交"/>
</p>
</form>
<div class='comment'>已有评论:</div>
<div id="resText" >
</div>
如果 load 方式带有参数传递的话就会使用 post 发送请求
$("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){
alert($(this).html()); // 在 这 里 this 指 向 的 是 当 前 的 DOM 对象，即
$("#iptText")[0]
alert(responseText); //请求返回的内容
alert(textStatus);
//请求状态：success，error
alert(XMLHttpRequest); //XMLHttpRequest 对象
});
})
3 $.getScript()与$.getJson()

此外还可以通过 jsonp 的形式来跨域选择外网的 json

详见实例:

前面所讲的$.load/$.get/$.post/$.getScript/$.getJSON 这些方法都是基于
$.ajax 方法创建的，$.ajax 方法是 jquery 最底层的 Ajax 实现，因此它可以替代前
面所有的方法

 

 

例如：

 $.ajax 替代$.getScript()

$.ajax 替代$.getJson()
先看一段代码
$("#send").click(function(){
$.get("get1.php", { //数据文件
username : $("#username").val() , //data 参数
content : $("#content").val()
}, function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
});
})
分析：如果少量的表单元素还可以，但如果表单元素有好多，这种方式费时费力,为此 jquery 提供了
一个简化的操作――serialize()方法，使得这一问题得以解决
$("#send").click(function(){$.get("get1.php", $("#form1").serialize() , function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
07 serialize() 方法
$.get("get1.php", {
user : $("#username").val() , //data 参数
cont : $("#content").val()
}, function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
1 serialize
以上的$.get 方法逐个添加 data 的键/值对，少量的字段还可以勉强用，字段多了操作极为不便，为此
jquery 为这一常用操作添加了一个 serialize 方法，可以将ＤＯＭ元素序列化为字符串
通过序列化表单值，创建 URL 编码文本字符串。
您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
$(function(){
$("#send").click(function(){
var $data = $(":checkbox,:radio").serialize();
alert( $data );
})
结果如下:

2 serializeArray()
方法通过序列化表单值来创建对象数组（名称和值）。您可以选择一个或多个表单元素(比如 input 及/或 textarea,或者 form 元素本身。
<script type="text/javascript">
$(function(){
var fields = $(":checkbox,:radio").serializeArray();
console.log(fields); //Firebug输出
$.each( fields, function(i, field){
$("#results").append(field.value + " , ");
});
})
</script>
<p id="results"><b>结果：</b> </p>
<input type="checkbox" name="check" value="1" checked="checked"/>篮球<br/>
<input type="checkbox" name="check" value="2" checked="checked"/>足球<br/>
<input type="checkbox" name="check" value="3" checked="checked"/>乒乓球<br/>
<input type="checkbox" name="check" value="4" />羽毛球<br/>
<input type="radio" name="radio" value="1" checked="checked"/>篮球<br/>
<input type="radio" name="radio" value="2" />足球<br/>
<input type="radio" name="radio" value="3" />乒乓球<br/>
<input type="radio" name="radio" value="4" />羽毛球<br/>
3 serializeArray()
param() 方法创建数组或对象的序列化表示。
该序列化值可在进行 AJAX 请求时在 URL 查询字符串中使用。
语法:jQuery.param(object,traditional)
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
personObj=new Object();
personObj.firstname="Bill";
personObj.lastname="Gates";
personObj.age=60;
personObj.eyecolor="blue";
$("button").click(function(){
$("div").text($.param(personObj));
});
});
</script>
</head>
<body>
<button>序列化对象</button>
<div></div>
</body>
</html>
4 ajax 中的全局事件ajaxStart(callback)：Ajax 请求开始时触发该事件
ajaxSend(callback)：Ajax 请求发送前触发该事件
ajaxSuccess(callback)：Ajax 请求成功时触发该事件
ajaxComplete(callback)：Ajax 请求完成时触发该事件
ajaxStop(callback)：Ajax 请求结束时触发该事件
ajaxError(callback)：Ajax 请求出现错误时触发该事件
事件的顺序如下：
ajaxStart 全局事件
开始新的 Ajax 请求，并且此时没有其他 ajax 请求正在进行。
beforeSend 局部事件
当一个 Ajax 请求开始时触发。如果需要，你可以在这里设置 XHR 对象。
ajaxSend 全局事件
请求开始前触发的全局事件
success 局部事件
请求成功时触发。即服务器没有返回错误，返回的数据也没有错误。
ajaxSuccess 全局事件
全局的请求成功
error 局部事件
仅当发生错误时触发。你无法同时执行 success 和 error 两个回调函数。
ajaxError 全局事件
全局的发生错误时触发
complete 局部事件
不管你请求成功还是失败，即便是同步请求，你都能在请求完成时触发这个事件。
ajaxComplete 全局事件
全局的请求完成时触发
ajaxStop 全局事件
当没有 Ajax 正在进行中的时候，触发。
为什么要学习 jquery Ａjax
用 js 原生的 XMLHttpRequest 对象的很多属性与方法极其庞大,学习起来效率极其低下，而 jquery
提供了一些快捷的日常操作，使 Ajax 的开发变得极其简单,这样开发人员就可以将精力集中在业务和
用户体验上，而不必理会那些繁烦的 XMLHttpRequest 的对象。jQuery 中的 Ajax
jQuery 对 Ajax 中的方法进行了封装
第一层方法 :$.ajax() 最底层
第二层方法 :$.load()、$.get()、$.post(); 使用频率最高
第三层方法 :$.getScript()和$.getJSON();
1 、Load()方法
载入远程的 html 代码并插入到相关 DOM 中
实例 2：将整个 html 页面载入
NO1.首先创建一个被 load 方法加载的页面:test.html
<div class="comment">
<h6>张三:</h6>
<p class="para">沙发.</p>
</div>
<div class="comment">
<h6>李四:</h6>
<p class="para">板凳.</p>
</div>
<div class="comment">
<h6>王五:</h6>
<p class="para">地板.</p>
</div>
NO2.创建一个空白页面，在上面追加如下元素
$(function(){
$("#send").click(function(){
$("#resText").load("test.html");
})
})
<input type="button" id="send" value="Ajax 获取" />
<div class="comment">
已有评论：
</div>
<div id="resText" ></div>实例 3：如果只需要加载页面中的某些元素，可以通过 load 方法中的 url 参数指定选择符,可以方便的筛选出内
容
语法结构为 ”url selector”
$("#resText").load("test.html .para"); //只加载页在中 para 的内容
效果如下
传递方式
回调函数
$(function(){
$("#send").click(function(){
$("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){
//responseText:请求返回的内容
//textStatus:请求状态:success、error、notmodified、timeout4 种
// XMLHttpRequest: XMLHttpRequest 对象
})
注:
在 load 方法中,只要 ajax 请求成功(complete)，回调函数就会被触发,下面对应介绍 ajax 对
应的回调函数↓2 、$.get()方法与$.post()方法
Get 01 返回html片断
<script type="text/javascript">
$(function(){
$("#send").click(function(){
$.get("get1.php", { //数据文件
username : $("#username").val() , //data参数
content : $("#content").val()
}, function (data, textStatus){
//回调函数(data返回内容XML/JSON/HTML,textStatus请求状态
//-success/error/notmodified/timeout)
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
})
</script>
<form id="form1" action="#">
<p>评论:</p>
<p>姓名: <input type="text" name="username" id="username" /></p>
<p>内容: <textarea name="content" id="content" rows="2"
cols="20"></textarea></p>
<p><input type="button" id="send" value="提交"/></p>
</form>
<div class='comment'>已有评论：</div>
<div id="resText" >
</div>Get 02 返回XML文档[详见案例]
相比返回html，返回XML技术要复杂些，但XML的可移植性优点是无可比拟的……不过XML体积
庞大，解析起来要慢一些，所以现在以返回json为主
如果要返回xml，需要在php文件中声明
header("Content-Type:text/xml; charset=utf-8");
Get 03 返回json（详见案例）
优点:简洁，容易阅读，重用方便
总结：以上３种方法返回html最为简单;
如果数据需要重用，则选择json，它在性能和大小方面具有优势;
如果远程数据未知，则选择XML,它是计算网络的“万能语”
Post 01
$(function(){
$("#send").click(function(){
$.post("post1.php", {
Username:$("#username").val() ,
Content:$("#content").val()
}, function (data, textStatus){ // textStatus代表状态，成功才
返回
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
})
<form id="form1" action="#">
<p>评论:</p>
<p>姓名: <input type="text" name="username" id="username" /></p>
<p>内容:
<textarea name="content" id="content" rows="2" cols="20">
</textarea>
</p> <p>
<input type="button" id="send" value="提交"/>
</p>
</form>
<div class='comment'>已有评论:</div>
<div id="resText" >
</div>
如果 load 方式带有参数传递的话就会使用 post 发送请求
$("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){
alert($(this).html()); // 在 这 里 this 指 向 的 是 当 前 的 DOM 对象，即
$("#iptText")[0]
alert(responseText); //请求返回的内容
alert(textStatus);
//请求状态：success，error
alert(XMLHttpRequest); //XMLHttpRequest 对象
});
})
3 $.getScript()与$.getJson()
此外还可以通过 jsonp 的形式来跨域选择外网的 json
详见实例:
前面所讲的$.load/$.get/$.post/$.getScript/$.getJSON 这些方法都是基于
$.ajax 方法创建的，$.ajax 方法是 jquery 最底层的 Ajax 实现，因此它可以替代前
面所有的方法例如：
$.ajax 替代$.getScript() $.ajax 替代$.getJson()
先看一段代码
$("#send").click(function(){
$.get("get1.php", { //数据文件
username : $("#username").val() , //data 参数
content : $("#content").val()
}, function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
});
})
分析：如果少量的表单元素还可以，但如果表单元素有好多，这种方式费时费力,为此 jquery 提供了
一个简化的操作――serialize()方法，使得这一问题得以解决
$("#send").click(function(){$.get("get1.php", $("#form1").serialize() , function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
07 serialize() 方法
$.get("get1.php", {
user : $("#username").val() , //data 参数
cont : $("#content").val()
}, function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
1 serialize
以上的$.get 方法逐个添加 data 的键/值对，少量的字段还可以勉强用，字段多了操作极为不便，为此
jquery 为这一常用操作添加了一个 serialize 方法，可以将ＤＯＭ元素序列化为字符串
通过序列化表单值，创建 URL 编码文本字符串。
您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
$(function(){
$("#send").click(function(){
var $data = $(":checkbox,:radio").serialize();
alert( $data );
})
结果如下:
2 serializeArray()
方法通过序列化表单值来创建对象数组（名称和值）。您可以选择一个或多个表单元素(比如 input 及/或 textarea,或者 form 元素本身。
<script type="text/javascript">
$(function(){
var fields = $(":checkbox,:radio").serializeArray();
console.log(fields); //Firebug输出
$.each( fields, function(i, field){
$("#results").append(field.value + " , ");
});
})
</script>
<p id="results"><b>结果：</b> </p>
<input type="checkbox" name="check" value="1" checked="checked"/>篮球<br/>
<input type="checkbox" name="check" value="2" checked="checked"/>足球<br/>
<input type="checkbox" name="check" value="3" checked="checked"/>乒乓球<br/>
<input type="checkbox" name="check" value="4" />羽毛球<br/>
<input type="radio" name="radio" value="1" checked="checked"/>篮球<br/>
<input type="radio" name="radio" value="2" />足球<br/>
<input type="radio" name="radio" value="3" />乒乓球<br/>
<input type="radio" name="radio" value="4" />羽毛球<br/>
3 serializeArray()
param() 方法创建数组或对象的序列化表示。
该序列化值可在进行 AJAX 请求时在 URL 查询字符串中使用。
语法:jQuery.param(object,traditional)
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
personObj=new Object();
personObj.firstname="Bill";
personObj.lastname="Gates";
personObj.age=60;
personObj.eyecolor="blue";
$("button").click(function(){
$("div").text($.param(personObj));
});
});
</script>
</head>
<body>
<button>序列化对象</button>
<div></div>
</body>
</html>
4 ajax 中的全局事件ajaxStart(callback)：Ajax 请求开始时触发该事件
ajaxSend(callback)：Ajax 请求发送前触发该事件
ajaxSuccess(callback)：Ajax 请求成功时触发该事件
ajaxComplete(callback)：Ajax 请求完成时触发该事件
ajaxStop(callback)：Ajax 请求结束时触发该事件
ajaxError(callback)：Ajax 请求出现错误时触发该事件
事件的顺序如下：
ajaxStart 全局事件
开始新的 Ajax 请求，并且此时没有其他 ajax 请求正在进行。
beforeSend 局部事件
当一个 Ajax 请求开始时触发。如果需要，你可以在这里设置 XHR 对象。
ajaxSend 全局事件
请求开始前触发的全局事件
success 局部事件
请求成功时触发。即服务器没有返回错误，返回的数据也没有错误。
ajaxSuccess 全局事件
全局的请求成功
error 局部事件
仅当发生错误时触发。你无法同时执行 success 和 error 两个回调函数。
ajaxError 全局事件
全局的发生错误时触发
complete 局部事件
不管你请求成功还是失败，即便是同步请求，你都能在请求完成时触发这个事件。
ajaxComplete 全局事件
全局的请求完成时触发
ajaxStop 全局事件
当没有 Ajax 正在进行中的时候，触发。
要讲故事
关注
Ajax与jQuery
yananye的博客
03-29 402
认识Ajax 在传统的Web应用中，每次请求服务器都会生成新的页面，用户在提交请求后，总是要等待服务器的响应。如果前一个请求没有得到响应，则后一个请求就不能发送。由于这是一种独占式的请求，因此如果服务器响应没有结束，用户就只能等待或者不断刷新页面。在等待期间，由于新的页面没有生成，整个浏览器一片空白，而用户只能继续等待。对于用户而言，这是一种不连续的体验，同时，不断的刷新页面也会使服务器的负担加重。 Ajax技术正是为了弥补以上不足在诞生的，Ajax应用在使用javaScript异步发送请求，不用每次请求都
Ajax和jQuery
weixin_56341892的博客
04-09 4461
Ajax和jQuery 一、Ajax 1、Ajax概述 ajax：Asynchronous JavaScript and XML（Asynchronous：异步的 JavaScript 和 XML）。 Asynchronous: 异步的意思 JavaScript：javascript脚本，在浏览器中执行 xml : 是一种数据格式 ajax是一种做局部刷新的方法，不是一种语言。 是浏览器客户端上的前端技术，是多个技术联合实现的产物。 ajax包含的技术主要有javascript，dom，css,，x
JQuery和ajax
KImdaML的博客
09-18 424
今天我们简单的介绍一下JQuery和ajax的介绍 1、 对ajax的认识 Ajax：交互式网页应用开发技术 优势：通过异步提升用户体验，减轻服务器压力 特点：实现局部刷新，提升用户体验度 2、 手写ajax $.ajax({ url:”http://www.baidu.com”, type:’post’, data:data, cache:true, headers:{}, success:function(){}, }) 3、 简单介绍ajax Ajax= 异步的javascript和xml 动态网页技
JavaScript学习教程，从入门到精通，Ajax 与 jQuery 操作 Ajax 的语法知识点及案例代码（41）
最新发布
qq_45746668的博客
05-10 1091
本文介绍了 Ajax 技术及其在 jQuery 中的应用。Ajax 允许网页在不重新加载的情况下，通过异步通信与服务器交互，提升用户体验。文章详细讲解了 Ajax 的基本概念、工作原理及优点，并对比了 XML 和 JSON 两种数据格式的特点。此外，本文还介绍了如何使用 jQuery 提供的 Ajax 方法（如 $.ajax()、$.get()、$.post() 等）简化开发流程，并通过两个实际案例（用户登录和用户信息列表）展示了 jQuery 操作 Ajax 的具体实现。这些案例涵盖了表单提交、数据序列化
Ajax和JQuery
捌椒的博客
09-18 2561
是什么?javascript 的代码框架。有什么用?简化代码，提高效率。核心write less do more , 写得更少，做的更多。
AJAX和Jquery
qq_50794782的博客
03-30 1691
目录 一、什么是Ajax 二、工作原理 三、AJAX如何实现 一、JQuery简介 一、什么是Ajax Ajax是(Asynchronous JavaScript And XML)是异步的JavaScript和xml。也就是异步请求更新技术。Ajax是一种对现有技术的一种新的应用，不是一门新语言。它是用JavaScript编写。 二、工作原理 XMLHttpRequest 对象的常用属性 属性 描述 onreadystatechange 定义当ready..
AJAX与jQuery
ddccaaxXasac的博客
08-23 652
无刷新技术：刷新页面不跳转，在当前页面刷新，是局部的刷新。例如：地图的缩放和移动都是在当前页面完成的，没有刷新整个页面。
jQuery与Ajax教程WORD版
07-22
资源名称：jQuery与Ajax教程 WORD版内容简介：本文档是jQuery与Ajax教程；jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写Javaｓｃｒｉｐｔ代码的习惯。希望本文档...
jQuery与Ajax以及序列化
01-19
关于AJAX 所谓Ajax，全名Asynchronous JavaScript and XML。（也就异步的JS和XML） 简单点来讲就是不刷新页面来发送和获取数据，然后更新页面。 Ajax的优势 •无需插件支持 •优秀的用户体验 •提高web程序的性能...
JavaScript、jQuery与Ajax的关系
11-27
在上篇文章给大家介绍了javascript jquery ajax的小结，今天接着给大家介绍javascript jquery与ajax的关系，感兴趣的朋友一起学习吧 简单总结： 1、JS是一门前端语言。 2、Ajax是一门技术，它提供了异步更新的机制...
JQuery与Ajax常用代码实现对比
01-19
传统ajax Code 代码如下: [removed] var xmlHttp; function createXMLHttpRequest(){ if(window.ActiveXObject) xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”); else if(window.XMLHttpRequest) xmlHttp = ...
jquery与ajax获取特殊字符实例详解
10-20
在用jquery加ajax写的时候，发现如果传进去的数据包含&则无法获取数据而+号的话就会被判定为空，解决办法就是使用encodeURIComponent()函数对要发送的数据进行编码,需要的朋友可以参考下
jQuery与Ajax
weixin_44318484的博客
03-04 1096
文章目录jQuery知识点总结1、jQuery简单介绍Document 对象属性Document 对象方法HTML DOM Element 对象HTML DOM 节点HTML DOM Event 对象Event 对象事件句柄　(Event Handlers)鼠标 / 键盘属性IE 属性标准 Event 属性标准 Event 方法2、jQuery的引入方式有两种：3、jQuery对象和dom对象4、jQuery选择器5、基本选择器（同css）6、基本筛选器（选择之后进行过滤）：7、属性选择器：8、表单筛选器9
jQuery与Ajax的应用
IT农民jQuery研究与优化
08-26 627
6.1 Ajax发展历史AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 该技术在1998年前后得到了应用。允许客户端脚本发送HTTP请求(XMLHTTP)的第一个组件由Outlook Web Access小组写成。该组件原属于微软Exchange Server，并且迅速
jQuery和ajax
xy2937131682的博客
05-19 360
$('#showMobile').click(function () {             $.ajax({                 type: "POST",                 url: "${base}/grf/phone/${grfHeader.id}",                 async: false,                 suc
jQuery ajax
JustinNeil的博客
06-20 596
简介 ajax 就是异步的javascript和xml，通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 原生JS实现AJAX var request = new XMLHttpRequest();　　//创建XMLHttpRequest()对象 //启动一个HTTP请求，但未发送请求到服务端，最后一个参数默...
jQuery和AJAX基础
weixin_30514745的博客
03-19 127
jQuery和AJAX基础 jQuery 基础： 1.jQuery 选择器： 元素选择器：$("p")； #id 选择器：$("#test")； .class 选择器：$(".test")； 举例子：选取所有元素$("*")；选取当前 HTML 元素 $(this)；选取所有 type="button" 的 <input> 元素 和 <button> 元素$...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值