jQuery之ajax技术的详细介绍_jquery

作者：我是一颗菠菜 | 来源：互联网 | 2018-06-20 16:01

本篇文章是对jQuery中的ajax技术进行了详细的分析介绍，需要的朋友参考下

1：Ajax技术包含以下几点：
基于Web标准(XHTML + CSS)的展示
使用DOM进行动态显示和交互
使用XMLHttpRequest进行数据交换和相关操作
使用Javascript将所有内容绑定在一起
Ajax的核心是Javascript的XMLHttpRequest对象，它是一种支持异步请求的技术。简而言之，使用JS可以控制XMLHttpRequest对象向服务器提出请求并处理响应，
而不影响用户对页面的正常访问。对于XMLHttpRequest对象，不同的浏览器提供了不同的支持，IE是将其作为ActiveX控件集成到浏览器中的，而其他主流的浏览器直接
作为一般的JS对象来创建。

2：JS中的Ajax

XMLHttpRequest对象的属性及简要说明

名称	说明
readyState	通信的状态，当XMLHttpRequest对象把一个HTTP请求发送到服务器，到接收到服务器响应信息，整个过程将经历5种状态，该属性取值为为0-4
onreadystatechange	设置回调事件处理程序，当readyState属性的值改变时，会激发此事件
responseText	服务器返回的text/html格式的文档
responseXML	服务器返回的text/xml格式的文档
status	描述了HTTP响应short类型的状态代码，100表示Continue, 101表示Switching protocols数据交换，200表示执行正常，404表示未找到页面，500表示内部程序错误
statusText	HTTP响应的状态代码对应的文本(OK, not found)

readyState属性代码

代码	说明
0	代表未初始化的状态。创建了一个XMLHttpRequest对象，尚未初始化
1	代表连接状态，已经调用了open方法，并且已经准备好发送请求
2	代表发送状态，已经调用了send方法发出请求，尚未得到响应结果
3	代表正在接收状态，已经接收了HTTP响应的头部信息，正在接收响应内容
4	代表已加载状态，此时响应内容已完全被接收

代码如下:

ajax.js的内容：

代码如下:

var xmlRequest;
function CreateRequest()
{
/* 创建XMLHttpRequest对象 */
if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
}
function ResponseHandler()
{
if(xmlRequest.readyState == 4 && xmlRequest.status == 200)
{
/* 如果通信成功，并且响应正常，执行以下操作 */

var reqCOntent= xmlRequest.responseText;
document.getElementById("browser").innerHTML = reqContent;
document.getElementById("content").value = reqContent;
}
}
function AjaxAccess()
{
/* 异步请求百度首页 */

xmlRequest = CreateRequest(); //创建XMLHttpRequest对象
xmlRequest.Onreadystatechange= ResponseHandler; //设置回调函数
xmlRequest.open("GET","http://www.baidu.com"); //初始化请求对象
xmlRequest.send(null); //发送请求信息

/* 触发事件以后提示正在打开百度首页 */
var brow = document.getElementById("browser");
brow.innerHTML = "

正在打开百度搜索

";
}
window.Onload= function()
{
document.getElementById("Access").Onclick= AjaxAccess; //设置按扭单击事件
}

3：jQuery中的Ajax
$.ajax(options)方法
options是以“键/值”对的形式设置的，用于设置Ajax请求的参数，如请求方式、请求URL、回调函数等。
常用属性如下：
url: 发送请求的地址
type:请求方式，GET和POST，默认为GET
timeout: 设置请求超时时间，该属性为数值型，单位为毫秒
data: 发送到服务器的数据，“键/值”对形式，该属性可以是对象或者字符串，如果是对象，则自动转换为字符串
dataType: 预期服务器返回的数据类型，该属性为字符串类型。可选值如下： xml、html：返回纯文本HTML信息，包含的标签(script标签或者style标签)会在
文本插入DOM的时候执行、 script：返回纯文本JS代码、json、jsonp、text
contentType: 发送信息至服务器时内容编码类型，该属性为字符串类型，默认值为"application/x-www-form-urlencoded"，一般不用设置，因为默认值适合大多数应用场合
beforeSend: 请求发送前的事件，该属性为其设置事件处理程序，可用于发送前修改XMLHttpRequest的参数，如头信息。

代码如下:

function(XMLHttpRequest) {
this; /*这里this关键字用于访问.ajax()方法的options参数对象*/
}
complete: 请求完成后的事件，无论请求成功与否，都将触发该事件。
function(XMLHttpRequet, textStatus) {
this; /*这里this关键字用于访问.ajax()方法的options参数对象*/
}
textStatus参数返回当前请求的执行状态(succss和error等)
success: 请求执行成功时的事件。
function(data, textStatus) {
this; /*这里this关键字用于访问.ajax()方法的options参数对象*/
}
error: 请求执行失败时的事件
function(XMLHttpRequest, textStatus, errorThrown) {
this; /*这里this关键字用于访问.ajax()方法的options参数对象*/
}
global: 是否触发全局Ajax事件，该属性为Boolean类型，默认值为false

代码如下:

$(document).ready(function(){
$("#Access").click(function(){
var xmlReq = $.ajax({
type:'GET',
url:'http://www.sougou.com',
success:function(reqContent)
{
$("#browser").html(reqContent);
$("#content").text(reqContent);
}});
$("#browser").html("

正在打开搜狗搜索

");
});
});

4：load方法
load(url, [data], [callback]);

代码如下:

回复列表

Load.js

代码如下:

$(document).ready(function(){
$("#refresh").click(function(){
/* 要访问的页面URL，根据你实际情况做相应修改 */
var url = "http://www.sogou.com";
$("#commentList").load(url); //加载相应内容
});
});

5：$.get()方法
是一个全局方法，该方法使用GET方式来进行异步请求，语法格式如下：

代码如下:

var xmlReq = $.get(url, [data], [callback], [type]);
$.get("www.baidu.com",
{
user: 'zhangsan'
}
);
callback: function(data, textStatus) {}

代码如下:

分类：

Get.js

代码如下:

$(document).ready(function(){
$("#Search").click(function(){

/* 使用Get方式请求指定URL */
$.get("http://localhost:2154/Web/BlogList.aspx",
{
key : $("#blogClass").val()
},
function(data){
$("#blogList").html(data);
});
});

$("#Search").click(); //触发一次单击事件
});

BlogList.aspx

代码如下:

<%@ Page Language="C#" %>
<%
/*
* 分别向数组里添加一些数据，
* 这些数据一般来自数据库，
* 这里只是模拟，就静态添加了
*/
string[] blogClass = { "CSS", "CSS", ".NET", ".NET", ".NET", ".NET" };
string[] blogTitle = { "CSS中的padding", "CSS入门", "C#中的类",
"C#基础知识", "C#面向对象", "C#设计模式" };

string key = Request["key"]; //获取请求服务器的关键字
/*
* 遍历数组集合
*/
for (int i = 0; i {
/*
* 如果关键字为空，显示所有的记录
* 如果关键字等于分类名称，显示该分类下的记录
*/
if (key == null || key == string.Empty || key == blogClass[i])
{
%>

<%= blogClass[i]%><%= blogTitle[i]%>

<%
}
}
%>

6：$.post()方法
var xmlReq = $.post(url, [data], [callback], [type]);
$.get()方法是以GET方式提交的数据，所有的参数信息都将追加到URL后面，而Web请求一般对URL长度有一定限制，所以$.get()方法传递的数据长度也有一定的上限，
而$.post()方法是将参数作为消息的实体发送到服务器的，对数据无长度上的影响。

代码如下:

用户登录

Username:

Password:

Post.js

代码如下:

$(document).ready(function(){
$("#submit").click(function(){
$.post("http://localhost:2154/Web/Login.aspx",
{
username : $("input[name='username']").val(),
password : $("input[name='password']").val()
},
function(data){
$("#login").html(data);
});
});
});

Login.aspx

代码如下:

<%@ Page Language="C#" %>
欢迎你 <%= Request.Form["username"] %>

你的身份是管理员

7：$.getJSON()方法
var xmlReq = $.getJSON(url, [data], [callback]);

代码如下:

Name	Age	Sex

getJSON.js

代码如下:

$(document).ready(function(){
/* 异步请求，载入 JSON 数据 */
$.getJSON("http://localhost:2154/Web/PeopleList.aspx",
function(data){
/* 遍历请求结果 */
$.each(data,
function(index, p){
var html = "" + p.name + "" + p.age +
"" + (p.isMale ? "male" : "female") + ""
$("#peoples>tbody").append(html);
});
});
});

PeopleList.aspx

代码如下:

<%@ Page Language="C#" %>
[{
"name" : "David li",
"age" : 61,
"isMale" : true
},{
"name" : "Michael Clinton",
"age" : 53,
"isMale" : true
},{
"name" : "Brook Ann",
"age" : 23,
"isMale" : false
},{
"name" : "Mary Johnson",
"age" : 35,
"isMale" : false
},{
"name" : "Elizabeth Jones",
"age" : 33,
"isMale" : false
},{
"name" : "James Smith",
"age" : 25,
"isMale" : true
}]

8：$.getScript()方法
var xmlReq = $.getScript(url, [callback]);

代码如下:

使用getScript()方法异步加载Javascript文件

getScript.js

代码如下:

$(document).ready(function(){
$("#input").click(function(){
$.getScript("Test.js?6.1.3", function(data){
showMsg();
});
});
});

Test.js

代码如下:

function showMsg(){
alert("This is Message");
}

9：序列化表单数据
jQuery为了解决参数很多的问题，提供了序列化的方法简化对表单数据的收集和格式化。

代码如下:

Username:
Age:
Sex:
Email:
Details:

serialize.js

代码如下:

$(document).ready(function(){
$("button[name='btnSubmit']").click(function(){
$.post("http://localhost:2154/Web/Register.aspx",
$("form").serialize(), //序列化表单数据
function(data){
$("table tbody").append("" + data + "");
});
});
});

Register.aspx

代码如下:

<%@ Page Language="C#" %>
Username:<%= Request["username"] %>

Age:<%= Request["age"] %>

IsMale:<%= Request["isMale"]%>

Email:<%= Request["email"]%>

Details:<%= Request["details"]%>

10：serializeArray()方法
该方法将页面表单序列化成一个JSON结构的对象，该对象以"键/值"对集合的形式封装了表单里的所有元素值。
这里注意的是该方法返回的是一个JSON对象，而不是JSON字符串
该JSON对象结构如下：

代码如下:

[
{"name": "name1" , "value": "value1"},
{"name": "name2" , "value": "value2"},
{"name": "name3" , "value": "value3"}
]
var jsOnData= $("form").serializeArray();
var textName = jsonData[0].name;
var textValue = jsonData[0].value;

11：设置全局Ajax默认选项
在应用中，经常编写大量的Ajax方法来实现各种功能，每次都在$.ajax()方法中设置大量参数，非常不方便，jQuery提供了$.ajaxSetup()方法，可以设置
全局的Ajax默认参数项。
$.ajaxSetup([options]);

代码如下:

$.ajaxSetup({
url: 'Test.html',
type: 'POST',
global: false, //禁止触发全局事件
dataType: 'json',
error: function(xhr, textStatus, errorThrown) {
alert(textStatus);
}
});

12：jQuery全局事件
ajaxComplete(callback); //请求完成时触发该事件
ajaxError(callback); //请求出现错误时触发该事件
ajaxSend(callback); //请求发送前触发该事件
ajaxStart(callback); //请求开始时触发该事件
ajaxStop(callback); //请求结束时触发该事件
ajaxSuccess(callback); //请求成功时触发该事件
ajaxStart()方法和ajaxStop方法的事件处理程序是一个无参的函数，其余都可以有3个参数，语法格式如下：

代码如下:

function(event, XHR, settings) {
event是触发的事件对象
XHR是XMLHttpRequest对象
settings是Ajax请求配置参数
}

代码如下:

AjaxGlobalEvent.js

代码如下:

$(document).ready(function(){
$("#show").ajaxStart(function(){
$(this).append("

Run ajaxStart

");
});
$("#show").ajaxStop(function(){
$(this).append("

Run ajaxStop

");
});

$("#show").ajaxComplete(function(){
$(this).append("

Run ajaxComplete

");
});

$("#show").ajaxError(function(){
$(this).append("

Run ajaxError

");
});

$("#show").ajaxSend(function(){
$(this).append("

Run ajaxSend

");
});

$("#show").ajaxSuccess(function(){
$(this).append("

Run ajaxSuccess

");
});
$("button[name='btnLoad']").click(function(){
$.get("http://www.sohu.com");
});
});

推荐阅读

java
前端人员必须知道的三个问题及其发展阶段

本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ... [详细]

蜡笔小新 2023-12-12 12:45:59
io
单击时动态创建
元素 - Dynamically create
element on click

Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]

蜡笔小新 2023-12-12 15:59:36
post
使用jQuery / AJAX实现两个div的动态更新

本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串，可以将不同的文本分别插入到两个div中，从而实现页面的动态更新。 ... [详细]

蜡笔小新 2023-12-11 10:07:32
io
详细介绍附代码：使用jquery，和php文件构建一个简单的在线聊天室，通过ip显示googlemap

最近学习了关于使用最为流行的jquery发送请求，在实践中以最为简单的聊天室作为测验的辅助工具，对相关网页开发有一个初步的认识，希望大家能够一起学习进步。首先介绍一下 ... [详细]

蜡笔小新 2023-10-16 18:21:05
get
Google Contacts API未返回输出 - Google Contacts API not returning output

Itwasworkingcorrectly,butyesterdayitstartedgiving401.IhavetriedwithGooglecontactsAPI ... [详细]

蜡笔小新 2023-10-15 16:40:16
io
VScode格式化文档换行或不换行的设置方法

本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]

蜡笔小新 2023-12-14 17:15:38
jsp
Java实战之电影在线观看系统的实现

本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述，然后展示了系统的效果图。接着介绍了系统的核心代码，包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明，包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]

蜡笔小新 2023-12-14 15:52:03
io
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
java
高校天文共享平台开发过程中的思考与规划

本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面，并总结了项目存在的问题，如前后端未分离、代码混乱等。作者表示希望通过记录和规划，能够理清思路，进一步完善该平台。 ... [详细]

蜡笔小新 2023-12-13 18:08:58
io
MooTools和JQuery并排 - MooTools and JQuery Side by Side

IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]

蜡笔小新 2023-12-12 13:43:58
io
HTML5网页模板怎么加百度统计？

本文介绍了如何在HTML5网页模板中加入百度统计，并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题，并介绍了如何使用Visual Studio 2010创建HTML5模板。此外，还提到了使用Jquery编写美好的HTML5前端框架模板的方法，以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]

蜡笔小新 2023-12-11 12:06:41
io
Java消息队列Spring整合ActiveMq我是小强zz

1、概述首先和大家一起回顾一下Java消息服务，在我之前的博客《Java消息队列-JMS概述》中，我为大家分析了：然后在另一篇博客《Java消息队列-ActiveMq实战》中 ... [详细]

蜡笔小新 2023-10-17 10:34:08
io
jqueryajax怎么通过header传递参数？

/这个是全局的ajax请求头设置，所有的ajax请求都会加上这个请求头 ... [详细]

蜡笔小新 2023-10-17 09:23:24
post
djangoAjax发送POST请求csrf跨站请求的三种方式

第一种&amp;lt;script&amp;gt;$(&quot;.eq&quot;).on(&qu ... [详细]

蜡笔小新 2023-10-16 19:11:46
io
简单的ajax与struts2实例

前言对于从事技术的人员来说ajax是这好东西，都会使用，而且乐于使用。但对于新手，开发一个ajax实例，还有是难度的，必竟对于他们这是新东西。leo开发一个简单的ajax实例,用的是 ... [详细]

蜡笔小新 2023-10-16 17:08:23

我是一颗菠菜

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章