AJAX入新手入门实例讲解

Bertha 。 2023-07-12 05:18 15阅读 0赞

### AJAX入新手入门实例讲解 ###

本文参考或借鉴一些公开资料，特此说明。

AJAX（ Asynchronous JavaScript and XML，异步的 JavaScript 和 XML），不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

同步的概念

同步，我的理解是一种线性执行的方式，执行的流程不能跨越。一般用于流程性比较强的程序，我们做的用户登录功能也是同步处理的，必须用户通过用户名和密码验证后才能进入系统的操作。同步可以看做是一个单线程操作，只要客户端请求了，在服务器没有反馈信息之前是一个线程阻塞状态。

异步的概念

异步，是一种并行处理的方式，不必等待一个程序执行完，可以执行其它的任务。异步肯定是个多线程。在客户端请求时，可以执行其他线程，并且在把这个线程存放在他的队列里面，有序的执行。在JavaScript中实现异步的方式主要有Ajax和H5新增的Web Worker。

而ajax就可以让我们实现这里所说的异步请求。

**简单地说，**同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

AJAX主要是实现页面和 web 服务器之间数据的异步传输，因此学习练习使用AJAX需要使用Web服务器。

**XMLHttpRequest 工作原理**

传统的web前端与后端的交互中，浏览器直接访问Tomcat的Servlet来获取数据。Servlet通过转发把数据发送给浏览器。

当我们使用AJAX之后，浏览器是先把请求发送到XMLHttpRequest异步对象之中，异步对象对请求进行封装，然后再与发送给服务器。服务器并不是以转发的方式响应，而是以流的方式把数据返回给浏览器。

XMLHttpRequest异步对象会不停监听服务器状态的变化，得到服务器返回的数据，就写到浏览器上，因为不是转发的方式，所以是无刷新就能够获取服务器端的数据。

**使用js发起一个ajax请求过程，图示如下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70][]

说明：js发起一个ajax请求过程

首先let xhr = new XMLHttpRequest();，新建一个XMLHttpRequest对象。此时xhr对象的readyState=0，表示请求未初始化。

您需要调用xhr.open(method,url,async)，告诉xhr请求的方式，URL，同步or异步，让其初始化。如果执行完了这句，xhr.readyState=1，表示连接已经建立好了。

但是，如果您想发出请求，您就需要调用xhr.send()方法，如果是POST请求，您需要设置send()的参数，send(data)。调用过xhr.send()后，xhr.readyState就变成了2,请求已接收状态，或者说我们已经发出了请求。

后面的几个状态，就不需要我们通过代码去改变他了。我们的请求会通过网络，到达指定服务器，服务器响应后，再通过网络返回给我们。这个状态，我们也无法通过代码去改变。但是我们可以通过监听函数onreadystatechange去获取请求传输的进度。

当我们受到第一个字节开始，xhr.readyState=3。

在接收完全部响应数据后，请求完成，此时xhr.readyState=4。

之后处理……。

**为对上面介绍有一个感性认识，下面是一个比较完整而简单的示例**

包含两个文件（放在同一目录中）：

一个名为demo.txt的文本文件，内容如下：

呵呵，这是来自demo.txt的内容

一个名为demo.html的网页文件，内容如下：

<!DOCTYPE html>

<html>

<head>

function loadXMLDoc()\{

var xmlhttp;

if (window.XMLHttpRequest)\{

xmlhttp=new XMLHttpRequest();

else\{

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

xmlhttp.onreadystatechange=function()\{

if(xmlhttp.readyState==4 && xmlhttp.status==200)\{

document.getElementById("show").innerHTML=xmlhttp.responseText;

xmlhttp.open("GET","demo.txt",true);

xmlhttp.send();

window.οnlοad=function()\{

var obt=document.getElementById("bt");

obt.οnclick=function()\{

loadXMLDoc();

</script>

</head>

<body>

<h2>原来的内容</h2>

</div>

</body>

</html>

用浏览器打开demo.html的网页文件，点击按钮读入demo.txt文本中的内容，参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 1][]

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

XMLHttpRequest对象的常见属性如下：

<table> 
 <tbody> 
  <tr> 
   <td style="border-color:#bdbdbd;"> <p style="margin-left:0cm;"><strong>属性</strong></p> </td> 
   <td> <p style="margin-left:0cm;"><strong><span style="color:#000000;">描述</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#000000;">onreadystatechange </span></p> </td> 
   <td style="border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#000000;">存储函数（或函数名），每当readyState的属性改变时，就会调用该函数。 </span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#000000;">readyState</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#000000;">存有的XMLHttpRequest的状态从0到4发生变化。<br> 0：请求未初始化<br> 1：服务器连接已建立<br> 2：请求已接收<br> 3：请求处理中<br> 4：请求已完成，且响应已就绪 </span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#000000;">reponseText</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#000000;">以文本形式返回响应。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#000000;">responseXML</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#000000;">以XML格式返回响应</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#000000;">status</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#000000;">将状态返回为数字（例如，“Not Found”为404，“OK”为200）</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#000000;">statusText</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#000000;">以字符串形式返回状态（例如，“Not Found”或“OK”）</span></p> </td> 
  </tr> 
 </tbody> 
</table>

**XMLHttpRequest对象的方法**

XMLHttpRequest对象的重要方法如下：

<table> 
 <tbody> 
  <tr> 
   <td style="border-color:#bdbdbd;"> <p style="margin-left:0cm;"><strong>方法</strong></p> </td> 
   <td> <p style="margin-left:0cm;"><strong><span style="color:#000000;">描述</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#000000;">abort() </span></p> </td> 
   <td style="border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#000000;">取消当前请求。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#000000;">getAllResponseHeaders() </span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#000000;">以字符串形式返回完整的HTTP标头集。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#000000;">getResponseHeader( headerName ) </span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#000000;">返回指定HTTP标头的值。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#000000;">void open</span><span style="color:#000000;">（method，URL）</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#000000;">打开指定获取或交的方法和URL的请求。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#000000;">void open</span><span style="color:#000000;">（method，URL，async）</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#000000;">与上面相同，但指定异步或不。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#000000;">void open</span><span style="color:#000000;">（method，URL，async，userName，password） </span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#000000;">与上面相同，但指定用户名和密码。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#000000;">void send</span><span style="color:#000000;">（content）</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#000000;">发送获取请求。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#dddddd;"> <p style="margin-left:0cm;"><span style="color:#000000;">setRequestHeader</span><span style="color:#000000;">（&nbsp;label，value） </span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#000000;">将标签/值对添加到要发送的HTTP标头。 </span></p> </td> 
  </tr> 
 </tbody> 
</table>

下面给出实例

**例1、利用ajax读取xml文件中的数据**

本例使用了两个文件，一个是data.xml——充当服务端，一个是ajaxTest.html——充当客户端。都可以用记事本建立，注意文件名的后缀（扩展名）。放在一个文件夹中。

**data.xml**内容如下：

<?xml version="1.0" encoding="utf-8"?>

<root>

<data>

这是一些样本数据……它存储在XML文件中，并由JavaScript检索。

</data>

</root>

**ajaxTest.html**内容如下：

<!DOCTYPE html>

<html>

<head>

<title>用Ajax开发Web应用程序之示例</title>

<!--

//此函数将在电击"View XML data"链接的时候执行

function ajaxRead(file)\{

//xmlObj,负责客户端和服务器中转

var xmlObj=null;

/\*

测试不同对象的可用性

不同的浏览器执行XMLHttpRequest对象的时候不同,所以定义"xmlObj"作为XMLHttpRequest对象的时候,必须区别对待

如果没有XMLHttpRequest可用,函数以return结束来取消错误报告

\*/

if(window.XMLHttpRequest)\{

xmlObj=new XMLHttpRequest();

\}else if(window.ActiveXObject)\{

xmlObj=new ActiveXObject("Microsoft.XMLHTTP");

\}else\{

return;

/\*

每当XMLHttpRequest状态改变时,onreadystatechange事件就触发

此事件共有5个状态,从0到4

\[0\]uninitialized未初始化(在XMLHttpRequest开始前)

\[1\]loading(一旦初始化)

\[2\]loaded(一旦XMLHttpRequest从服务器获得响应)

\[3\]interactive(当对象连接到服务器)

\[4\]complete(完成)

\*/

/\*

readyState()方法用来获得当前XMLHttpRequest的状态

状态5\[编号4\]是用来确认数据是否可用的,如果"是",则执行updateObj方法

此方法有2个参数:ID,填充的数据

\*/

/\*

xmlObj.responseXML属性是一个DOM对象,对于XML文件来说,它有点像网页中的"document"对象

通过getElementsByTagName可以获得XML文件中的任何节点

xmlObj.responseXML.getElementsByTagName('data')\[0\]是获得第1个名称为"data"的节点

它返回XML节点,无数据的---得到节点里的数据必须通过访问此节点的属性

firstChild.data

(firstChild获得<data>节点之间的文本节点,而"data"属性则是文本节点的实际文本)

\*/

/\*

xmlObj.open('GET',file,true);

xmlObj.send('');

这是ajaxRead函数中的最后一块

xmlObj的open方法打开一个通往服务器的连接(通过一个特殊的协议,这里指定为"GET"---也可以使用"POST"或其他)

请求一个文件(在这里,file变量---data.xml,是当作参数发送给了ajaxRead函数)

并且JavaScript可以操控这个请求是否为同步(false)或者异步(true,默认)

这是异步JavaScript和XML,将可以使用默认的异步方法---当使用同步之后,这个程序将不能运行

xmlObj.send('');

简单的发送了一个空字符串给服务器

如果没有这一行,xmlObj的readystate的值将不能为4,使得页面将不能更新

这个发送方法可以被用于其它东西,但是此程序仅仅从服务器得到数据,并没有发送数据给服务器,所以就到此为止

\*/

xmlObj.onreadystatechange=function()\{

if(xmlObj.readyState==4)\{

updateObj('xmlObj',xmlObj.responseXML.getElementsByTagName('data')\[0\].firstChild.data);

xmlObj.open('GET',file,true);

xmlObj.send('');

/\*

此函数更新在当前页有新值的其他任何元素

第1个参数,"obj",是当前页中一个元素的id---这是被更新的对象

第2个参数,"data",指明了将要替换"obj"对象的一个新的字符串

正常地,它是一个检查并且确认当前页有含有id值为"obj"的元素的很好的方法

\*/

function updateObj(obj,data)\{

//document.getElementById(obj).firstChild.data = data;

document.getElementById(obj).innerHTML=data;

//-->

</script>

</head>

<body>

<h1>用Ajax开发Web应用</h1>

<a href="data.xml" title="查看XML数据" οnclick="ajaxRead('data.xml');this.style.display='none';return false">查看XML数据</a>

</p>

</body>

</html>

用浏览器打开这个页面（双击ajaxTest.html文件即可），结果如下所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 2][]

要创建AJAX实例，需要使用服务器端,在这里使用data.xml相当于服务器端上的文件。

前面提到过，AJAX主要是实现页面和 web 服务器之间数据的异步传输，学习练习使用AJAX需要使用Web服务器，因此要想深入学习，就需要搭建Web服务器。

**搭建Web服务器**

Web服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等Web客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。常见Web服务器有Apache+PHP+MySQL。**在这里我们使用nodejs+express搭建web服务器。**

先安装先安装nodejs，进入下面这个nodejs中文网链接 下载nodejs

[https://nodejs.org/zh-cn/][https_nodejs.org_zh-cn]

选择对应的版本然后下载安装（比较简单就不多说了，如有疑惑可以百度），完了验证下nodejs安装是否成功。输入node -v命令查看版本：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 3][]

测试nodejs原生的HTTP服务器

新建一个目录（也称为文件夹）,例如在D:\\NodeTest下新建一个myServer文件夹，在这个目录中新建（可用记事本）一个serverA.js文件（文件名你自定，只要扩展名是.js就行），写入如下代码：

var http = require("http");            //导入http模块

//开启一个监听事件，每次HTTP请求都会触发这个事件

http.createServer(function(req, res)\{  //req用户请求信息 res服务器响应信息

res.write('<head><meta charset="utf-8"/></head>');   //设置编码

res.write("实验测试！");      //设置响应体

res.end();                           //结束事件

\}).listen(3000);                      //设置监听端口号

// 终端打印如下信息

console.log('Server running at http://127.0.0.1:3000 or http://localhost:3000 ');

用node 命令执行

在cmd中输入 node D:\\NodeTest\\serverA.js

启动服务，如下所示：

![2020030712351464.png][]

打开浏览器访问 http://127.0.0.1:3000 或 http://localhost:3000，如下所示：

![20200307123537286.png][]

简单例子运行成功了，这其实是用node.js搭建了一个服务器，然后来监听端口的访问事件，最后做出相应的回应，需要指出的是，当我们关闭CMD或按CTRL+C键之后服务就关闭了。如果修改了nodejs服务器端的代码，都需要重启服务器才会生效。

在此基础上，就可以使用nodejs服务器

**例、有注册和登录功能的服务器**

建立一个目录D:\\AJAXTest2，再在此建立一个www目录，将server.js放入AJAXTest2目录，

将user.html和ajax.js放入www目录，参见下图：

![20200307124105899.png][]

**server.js内容**如下：

const http = require('http');

const fs = require('fs');

const querystring = require('querystring');

const urlLib = require('url');

var users = \{\};

var server = http.createServer(function (req, res) \{

//解析数据

var str = '';

req.on('data', function (data) \{

str += data;

\});

req.on('end', function () \{

var obj = urlLib.parse(req.url, true);

const url = obj.pathname;

const GET = obj.query;

const POST = querystring.parse(str);

//区分——接口、文件

if (url == '/user') \{ //接口

switch (GET.act) \{

case 'reg':

//1.检查用户名是否已经有了

if (users\[GET.user\]) \{

res.write('\{"ok": false, "msg": "此用户已存在"\}');

\} else \{

//2.插入users

users\[GET.user\] = GET.pass;

res.write('\{"ok": true, "msg": "注册成功"\}');

break;

case 'login':

//1.检查用户是否存在

if (users\[GET.user\] == null) \{

res.write('\{"ok": false, "msg": "此用户不存在"\}');

//2.检查用户密码

\} else if (users\[GET.user\] != GET.pass) \{

res.write('\{"ok": false, "msg": "用户名或密码有误"\}');

\} else \{

res.write('\{"ok": true, "msg": "登录成功"\}');

break;

default:

res.write('\{"ok": false, "msg": "未知的act"\}');

res.end();

\} else \{ //文件

//读取文件

var file\_name = './www' + url;

console.log(file\_name);

fs.readFile(file\_name, function (err, data) \{

if (err) \{

console.log(err)

res.write('404');

\} else \{

res.write(data);

res.end();

\});

server.listen(8080);

//终端提示

console.log('Server running at  http://localhost:8080')

**ajax.js内容**如下：

function json2url(json)\{

var arr=\[\];

for(var name in json)\{

arr.push(name+'='+json\[name\]);

return arr.join('&');

function ajax(json)\{

json=json || \{\};

if(!json.url)return;

json.data=json.data || \{\};

json.type=json.type || 'get';

var timer=null;

if(window.XMLHttpRequest)\{

var oAjax=new XMLHttpRequest();

\}else\{

var oAjax=new ActiveXObject('Microsoft.XMLHTTP');

switch(json.type)\{

case 'get':

oAjax.open('GET',json.url+'?'+json2url(json.data),true);

oAjax.send();

break;

case 'post':

oAjax.open('POST',json.url,true);

oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

oAjax.send(json2url(json.data));

break;

oAjax.onreadystatechange=function()\{

if(oAjax.readyState==4)\{

clearTimeout(timer);

if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304)\{

json.success && json.success(oAjax.responseText);

\}else\{

json.error && json.error(oAjax.status);

\};

**user.html**内容如下：

<!DOCTYPE html>

<html>

<head>

window.οnlοad=function ()\{

var oTxtUser=document.getElementById('user');

var oTxtPass=document.getElementById('pass');

var oBtnReg=document.getElementById('reg\_btn');

var oBtnLogin=document.getElementById('login\_btn');

oBtnLogin.οnclick=function ()\{

ajax(\{

url: '/user',

data: \{act: 'login', user: oTxtUser.value, pass: oTxtPass.value\},

type: 'get',

success: function (str)\{

var json=eval('('+str+')');

if(json.ok)\{

alert('登录成功');

\}else\{

alert('登录失败：'+json.msg);

\},

error: function ()\{

alert('通信错误');

\});

\};

oBtnReg.οnclick=function ()\{

ajax(\{

url: '/user',

data: \{act: 'reg', user: oTxtUser.value, pass: oTxtPass.value\},

type: 'get',

success: function (str)\{

var json=eval('('+str+')');

if(json.ok)\{

alert('注册成功');

\}else\{

alert('注册失败：'+json.msg);

\},

error: function ()\{

alert('通信错误');

\});

\};

</script>

</head>

<body>

用户：<input type="text" id="user"><br>

密码：<input type="password" id="pass"><br>

</body>

</html>

先cd到D:\\AJAXTest2目录

cd /d D:\\AJAXTest2

启动  node server.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 4][]

浏览器访问localhost:8080/user.html

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 5][]

输入用户名和密码，开始注册或登录，试试了。

**关于express**

express 是nodejs的一个web框架，使用express,能够更便捷的使用nodejs.

express-generator是express应用生成器，相当于express 的骨架，进入一个web项目中后，使用express projectname命令，能快速构建projectname这个应用的目录结构。

npm install express --save -g

npm install express-generator --save -g

![20200307123659385.png][]

之后，在找到其所在位置：

![20200307123718963.png][]

现在可以使用express框架构建express项目

在cmd中使用命令：express ‘你的项目名’ -e

其中，-e 表示使用EJS模板。

例如：

express myStudy -e

安装成功后就可以使用express框架构建项目了，在当前目录中生成了一个与项目名相同目录。最后有3个选项，先不深究，意思是：

改变目录：cd expressDemo

安装依赖：npm install

运行应用程序：npm start

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 6][]

关于express就不进一步介绍了，感兴趣的朋友可以参考他文。

下面介绍jQueryd的Ajax方法。

**jQueryd的Ajax方法**

$.ajax()方法中的参数很多，我在实例中使用的只是一小部分，这里只介绍实例中所需要的参数的使用，其余更多参数还将继续学习。

$.ajax(\{

url:"发送请求（提交或读取数据）的地址",

dataType:"预期服务器返回数据的类型",

type:"请求方式",

async:"true/false",

data:\{发送到/读取后台（服务器）的数据\},

success:function(data)\{请求成功时执行\},

error:function()\{请求失败时执行\}

\});

说明： 这些参数均为选填，如果不设置，按默认值处理。

<1> url  默认为当前页地址

<2> dataType 可用类型：

（如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递）

xml：返回XML文档，可用JQuery处理。

html：返回纯文本HTML信息。

script：返回纯文本JavaScript代码。

json：返回json数据。

jsonp：(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

text：返回纯文本字符串。

说明：对于json和jsonp的区别，本小白暂时没有深入了解，目前只知道jsonp可以跨域读取数据，有待进一步学习~

<3> type 可用类型主要为post和get两种（默认为get）

get：从指定的资源请求数据（从服务器读取数据）

post：向指定的资源提交要被处理的数据（向服务器提交数据）

<4> async 异步方式，默认为true，即异步方式。当设置为false时，为同步方式。

异步方式：ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发ajax里的success方法，这时候执行的是两个线程。

同步方式：在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

说明：这里的同步和异步有待深入理解，以下实例均使用默认的异步方式

<5> data 请求的数据，\{ \}中可以填入多项数据。如果不填（一般为get请求），则读取对应地址的全部数据，此时可以在console中通过console.log(res)显示数据情况。

<6> success 和 error 两个函数 一般需要设置，方便确定请求是否成功，以及请求成功后的提示或是对数据的处理和显示。

**例、实现在页面上输入一个地址，点击获取经纬度，弹出该地址的经纬度。**

（本例来源：[https://blog.csdn.net/Yuan\_mingyu/article/details/86748591][https_blog.csdn.net_Yuan_mingyu_article_details_86748591] ）

url=“https://restapi.amap.com/v3/geocode/geo” key:“7486e10d3ca83a934438176cf941df0c”

（此处的key值是从此地址请求数据所需的，为data数据中的一项，直接使用即可）

<!DOCTYPE html>

<html>

<head>

<title>查询经纬度</title>

function showAdress()

var str = document.getElementById("text").value;

$.ajax

(\{

url: "https://restapi.amap.com/v3/geocode/geo",

dataType: "json",

type: "get",

data: \{

address: str,

key: "7486e10d3ca83a934438176cf941df0c",

\},

success:function(data)\{

alert(data.geocodes\[0\].formatted\_address+"经纬度："+data.geocodes\[0\].location);

console.log(data);  //在console中查看数据

\},

error:function()\{

alert('failed!');

\},

\});

</script>

</head>

<body>

.button\{

width: 100px;

height: 29px;

font-size: 16px;

color: white;

background-color: black;

padding: 0;

vertical-align: top;

border: 0;

.textbox\{

height: 25px;

padding: 0;

vertical-align: top;

span\{

font-size: 16px;

height: 29px;

line-height: 29px;

</style>

<p>利用 https://restapi.amap.com/v3/geocode/geo服务 </p>

<div>

</form>

</div>

</body>

</html>

将上述代码，保存文件名为：jQuery的Ajax实例.html。用浏览器打开这个页面（双击“jQuery的Ajax实例.html”文件即可），结果如下所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 7][]

AJAX官网：

[http://api.jquery.com/category/ajax/][http_api.jquery.com_category_ajax]

AJAX教程

[https://www.softwhy.com/qiduan/ajax\_source/][https_www.softwhy.com_qiduan_ajax_source]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200319163803272.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200319162505117.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200307123432936.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[https_nodejs.org_zh-cn]: https://nodejs.org/zh-cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200307123452475.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[2020030712351464.png]: https://img-blog.csdnimg.cn/2020030712351464.png
[20200307123537286.png]: https://img-blog.csdnimg.cn/20200307123537286.png
[20200307124105899.png]: https://img-blog.csdnimg.cn/20200307124105899.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200307123628121.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200307123642399.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[20200307123659385.png]: https://img-blog.csdnimg.cn/20200307123659385.png
[20200307123718963.png]: https://img-blog.csdnimg.cn/20200307123718963.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200307123745680.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_Yuan_mingyu_article_details_86748591]: https://blog.csdn.net/Yuan_mingyu/article/details/86748591
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200307123829944.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[http_api.jquery.com_category_ajax]: http://api.jquery.com/category/ajax/
[https_www.softwhy.com_qiduan_ajax_source]: https://www.softwhy.com/qiduan/ajax_source/