jquery ajax异步请求;ajax异步调用 收藏 0

一文详解AJAX异步请求

想要泡茶，首先要烧水，等水烧开了，我们再去洗杯子，洗完杯子以后，用热水和杯子去泡茶。像这种一件一件事去做，等上一件做完了才能做下一件事的过程，在程序中就叫做同步。

同步是比较浪费时间的，所以产生了异步的方法。我们可以边烧水边洗杯子，这样等水烧好，杯子也已经洗好，就可以直接进行泡茶了。那像这种可以同时做两件或者几件事情，在程序中，称为异步。

举个同步的例子。比如说，我们想请求天气网站，首先要发送请求到服务器，服务器接收后返回响应，在浏览器中我们就可以看到天气网站了。

如果想知道今天白天的气温，同步请求，就会重新发送请求给服务器，这个过程中，页面就会进入等待状态，直到正确响应，页面才能显示。同样的，想看今天夜间的气温，还是要继续等待。直到正确响应，可是等待过程让用户体验很不好，而异步请求就可以解决这个问题。

AJAX中的“A”代表 Asynchronous异步；“J”代表JavaScript是浏览器端的脚步语言；第三个字母“A”代表and和的意思；最后一个“X”代表了XML可扩展标记语言。AJAX就是“Asynchronous JavaScript and XML”的缩写。通俗的说AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

JQuery是一个丰富的js库，就好比是一个工具箱。它的内部对js很多复杂的方法进行了封装和加工，我们可以理解成封装成了很多个工具。AJAX也被简化封装成了一个工具，我们可以把他叫做JQuery-AJAX，另外JQuery还有一个外号，叫做‘$’。

接下来通过一道题目练习一下，要使用学习的知识完成这样的效果：点击页面左侧的故事背景之后，就会在页面中对应的地方，出现故事背景的内容。

服务器返回给浏览器的响应数据，一般情况下都是字符串，如果服务器返回字符串：“我是3年级2班的Pony，擅长开发游戏，想玩的带着钱来找我哦！”，那浏览器想从其中取出名字，年级，班级，擅长的技巧这些，就有点麻烦了。于是聪明的人们想了一个办法，将数据格式化为{\”name\”:\”Pony\”,\”grade\”:3,\”class\”:2,\”skill\”:\”开发游戏\”}，这样浏览器就可以很方便根据name、grade取到名字，年级了。

那这种格式就是大名鼎鼎的JSON，全称是 Javascript Object Notation，本质上仍然是字符串，是服务器和浏览器间交换数据使用最多的格式。JSON格式和JavaScript中的对象的格式是相似的，最外层是一对大括号，里面有键和值，键是字符串，值的类型可以是字符串，也整数等，键值对之间呢用逗号分隔。大家注意，在JSON中，字符串必须用双引号引起来，不可以是单引号。在这一点上和js中的对象是不一样的，我们知道js中对象的属性可以有引号也可以没有，可以是单引号，也可以是双引号。

当我们返回字符串时，响应的默认类型是 text/html，这表示响应内容是html。如果要表示响应内容是JSON格式，响应类型应该改为application/json。

将JSON字符串赋值给变量str，在视图函数中return str，那它的响应内容的类型就是 text/html，其实可以在响应内容设置响应头，覆盖默认的设置，比如{\’Content-Type\’:\’application/json\’}，那响应内容的类型就被设置为JSON了。

可以返回一个元组，这样的元组必须是 (response, status, headers) 的形式，且至少包含一个元素。 status 值会覆盖状态代码， headers 可以是一个列表或字典，作为额外的消息标头值。

Jquery实现Ajax请求的几种常见方式总结

1.1、JQuery的GET方式实现AJAX

核心语法：$.get(url,[data],[callback],[type]);

url：请求的资源路径。

data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。

callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。

type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

代码实现

1.2、JQuery的POST方式实现AJAX

核心语法：$.post(url,[data],[callback],[type]);

url：请求的资源路径。

data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。

callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。

type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

代码实现

1.6、JQuery的通用方式实现AJAX

核心语法：$.ajax({name:value,name:value,…});

url：请求的资源路径。

async：是否异步请求，true-是，false-否 (默认是 true)。

data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。

type：请求方式，POST 或 GET (默认是 GET)。

dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

success：请求成功时调用的回调函数。

error：请求失败时调用的回调函数。

代码实现

1.7、小结

AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。

通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部 分内容进行局部更新。

同步和异步

同步：服务器端在处理过程中，无法进行其他操作。

异步：服务器端在处理过程中，可以进行其他操作。

GET 方式实现：$.get();

POST 方式实现：$.post();

url：请求的资源路径。

data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。

callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。

type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

通用方式实现：$.ajax();

url：请求的资源路径。

async：是否异步请求，true-是，false-否 (默认是 true)。

data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。

type：请求方式，POST 或 GET (默认是 GET)。

dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

success：请求成功时调用的回调函数。

error：请求失败时调用的回调函数。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com