当前位置: 开发笔记 > 编程语言 > 正文

JavaWeb快速入门AJAX使用

作者：糖就是甜咯 | 来源：互联网 | 2023-09-14 11:21

目录一、什么是AJAX？1.AJAX工作原理：2.AJAX是基于现有的Internet标准3.GoogleSuggest二、AJAX实例解析三、A

一、什么是 AJAX &＃xff1f;

1.AJAX 工作原理&＃xff1a;

2.AJAX是基于现有的Internet标准

3.Google Suggest

二、AJAX 实例解析

三、AJAX - 创建 XMLHttpRequest 对象

1.XMLHttpRequest 对象

2.创建 XMLHttpRequest 对象

3.实例

四、AJAX - 向服务器发送请求

1.向服务器发送请求

2.GET 还是 POST&＃xff1f;

3.GET 请求

实例

4.POST 请求

实例

实例:

5.url - 服务器上的文件

6.异步 - True 或 False&＃xff1f;

7.Async&＃61;true

实例:

8.Async &＃61; false

实例&＃xff1a;

五、AJAX - 服务器响应

1.服务器响应

2.responseText 属性

实例

3.responseXML 属性

实例

六、AJAX - onreadystatechange 事件

1.onreadystatechange 事件

实例

2.使用回调函数

实例

七、AJAX ASP/PHP 实例

1.AJAX ASP/PHP 实例

2.实例解析 - showHint() 函数

AJAX 服务器页面 - ASP 和 PHP

1.ASP 文件

2.PHP 文件

AJAX Database 实例

1.AJAX 数据库实例

实例

2.实例解释 - showCustomer() 函数

AJAX 服务器页面

AJAX XML 实例

1.实例解析 - loadXMLDoc() 函数

2.异步加载 XML 文档

AJAX 服务器页面

AJAX JSON 实例

1.实例解析 - loadXMLDoc() 函数

2.异步加载 JSON 文档

AJAX 服务器页面

1.json_ajax.jso 文件&＃xff1a;

八、总结&＃xff1a;

1.小结&＃xff08;常用部分&＃xff09;

1.JSON使用&＃xff08;需要进行导包&＃xff09;

JSON工具&＃xff08;导包部分&＃xff09;&＃xff1a;

2.异步与同步

3.jQuery之AJAX使用

2.总结部分 &＃xff1a;

1.引入

2.Ajax介绍

2.1 概述

2.2 为什么需要使用AJAX技术&＃xff1f;

2.3 特点

2.4 应用场景

2.5 运行原理

3.jQuery的AJAX

一、什么是 AJAX &＃xff1f;

思维导图部分&＃xff1a;

实现流程&＃xff1a;

AJAX &＃61; 异步 Javascript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换&＃xff0c;AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下&＃xff0c;对网页的某部分进行更新。

传统的网页&＃xff08;不使用 AJAX&＃xff09;如果需要更新内容&＃xff0c;必需重载整个网页面。

有很多使用 AJAX 的应用程序案例&＃xff1a;新浪微博、Google 地图、开心网等等。

1.AJAX 工作原理&＃xff1a;

2.AJAX是基于现有的Internet标准

AJAX是基于现有的Internet标准&＃xff0c;并且联合使用它们&＃xff1a;

XMLHttpRequest 对象 (异步的与服务器交换数据)
Javascript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)

AJAX应用程序与浏览器和平台无关的&＃xff01;

3.Google Suggest

在 2005 年&＃xff0c;Google 通过其 Google Suggest 使 AJAX 变得流行起来。

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面&＃xff1a;当您在谷歌的搜索框输入关键字时&＃xff0c;Javascript 会把这些字符发送到服务器&＃xff0c;然后服务器会返回一个搜索建议的列表。

二、AJAX 实例解析

上面的 AJAX 应用程序包含一个 div 和一个按钮。

div 部分用于显示来自服务器的信息。当按钮被点击时&＃xff0c;它负责调用名为 loadXMLDoc() 的函数&＃xff1a;

`使用 AJAX 修改该文本内容`

接下来&＃xff0c;在页面的 head 部分添加一个

三、AJAX - 创建 XMLHttpRequest 对象

XMLHttpRequest 是 AJAX 的基础。

1.XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象&＃xff08;IE5 和 IE6 使用 ActiveXObject&＃xff09;。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下&＃xff0c;对网页的某部分进行更新。

2.创建 XMLHttpRequest 对象

所有现代浏览器&＃xff08;IE7&＃43;、Firefox、Chrome、Safari 以及 Opera&＃xff09;均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法&＃xff1a;

variable&＃61;new XMLHttpRequest();

老版本的 Internet Explorer &＃xff08;IE5 和 IE6&＃xff09;使用 ActiveX 对象&＃xff1a;

variable&＃61;new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器&＃xff0c;包括 IE5 和 IE6&＃xff0c;请检查浏览器是否支持 XMLHttpRequest 对象。如果支持&＃xff0c;则创建 XMLHttpRequest 对象。如果不支持&＃xff0c;则创建 ActiveXObject &＃xff1a;

3.实例

var xmlhttp; if (window.XMLHttpRequest) { // IE7&＃43;, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp&＃61;new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp&＃61;new ActiveXObject("Microsoft.XMLHTTP"); }

四、AJAX - 向服务器发送请求

XMLHttpRequest 对象用于和服务器交换数据。

1.向服务器发送请求

如需将请求发送到服务器&＃xff0c;我们使用 XMLHttpRequest 对象的 open() 和 send() 方法&＃xff1a;

xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send();

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method&＃xff1a;请求的类型&＃xff1b;GET 或 POST url&＃xff1a;文件在服务器上的位置 async&＃xff1a;true&＃xff08;异步&＃xff09;或 false&＃xff08;同步&＃xff09;
send(string)	将请求发送到服务器。 string&＃xff1a;仅用于 POST 请求

方法

描述

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

method&＃xff1a;请求的类型&＃xff1b;GET 或 POST
url&＃xff1a;文件在服务器上的位置
async&＃xff1a;true&＃xff08;异步&＃xff09;或 false&＃xff08;同步&＃xff09;

send(string)

将请求发送到服务器。

string&＃xff1a;仅用于 POST 请求

2.GET 还是 POST&＃xff1f;

与 POST 相比&＃xff0c;GET 更简单也更快&＃xff0c;并且在大部分情况下都能用。

然而&＃xff0c;在以下情况中&＃xff0c;请使用 POST 请求&＃xff1a;

不愿使用缓存文件&＃xff08;更新服务器上的文件或数据库&＃xff09;
向服务器发送大量数据&＃xff08;POST 没有数据量限制&＃xff09;
发送包含未知字符的用户输入时&＃xff0c;POST 比 GET 更稳定也更可靠

3.GET 请求

一个简单的 GET 请求&＃xff1a;

实例

xmlhttp.open("GET","/try/ajax/demo_get.php",true); xmlhttp.send();

在上面的例子中&＃xff0c;您可能得到的是缓存的结果。

为了避免这种情况&＃xff0c;请向 URL 添加一个唯一的 ID&＃xff1a;

实例

xmlhttp.open("GET","/try/ajax/demo_get.php?t&＃61;" &＃43; Math.random(),true); xmlhttp.send();

如果您希望通过 GET 方法发送信息&＃xff0c;请向 URL 添加信息&＃xff1a;

实例

xmlhttp.open("GET","/try/ajax/demo_get2.php?fname&＃61;Henry&lname&＃61;Ford",true); xmlhttp.send();

4.POST 请求

一个简单 POST 请求&＃xff1a;

实例

xmlhttp.open("POST","/try/ajax/demo_post.php",true); xmlhttp.send();

如果需要像 HTML 表单那样 POST 数据&＃xff0c;请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据&＃xff1a;

实例:

xmlhttp.open("POST","/try/ajax/demo_post2.php",true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send("fname&＃61;Henry&lname&＃61;Ford");

方法	描述
setRequestHeader(header,value)	向请求添加 HTTP 头。 header: 规定头的名称 value: 规定头的值

方法

描述

setRequestHeader(header,value)

向请求添加 HTTP 头。

header: 规定头的名称
value: 规定头的值

5.url - 服务器上的文件

open() 方法的 url 参数是服务器上文件的地址&＃xff1a;

xmlhttp.open("GET","ajax_test.html",true);

该文件可以是任何类型的文件&＃xff0c;比如 .txt 和 .xml&＃xff0c;或者服务器脚本文件&＃xff0c;比如 .asp 和 .php &＃xff08;在传回响应之前&＃xff0c;能够在服务器上执行任务&＃xff09;。

6.异步 - True 或 False&＃xff1f;

AJAX 指的是异步 Javascript 和 XML&＃xff08;Asynchronous Javascript and XML&＃xff09;。

XMLHttpRequest 对象如果要用于 AJAX 的话&＃xff0c;其 open() 方法的 async 参数必须设置为 true&＃xff1a;

xmlhttp.open("GET","ajax_test.html",true);

对于 web 开发人员来说&＃xff0c;发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前&＃xff0c;这可能会引起应用程序挂起或停止。

通过 AJAX&＃xff0c;Javascript 无需等待服务器的响应&＃xff0c;而是&＃xff1a;

在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理

7.Async&＃61;true

当使用 async&＃61;true 时&＃xff0c;请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数&＃xff1a;

实例:

xmlhttp.onreadystatechange&＃61;function() { if (xmlhttp.readyState&＃61;&＃61;4 && xmlhttp.status&＃61;&＃61;200) { document.getElementById("myDiv").innerHTML&＃61;xmlhttp.responseText; } }xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); xmlhttp.send();

8.Async &＃61; false

如需使用 async&＃61;false&＃xff0c;请将 open() 方法中的第三个参数改为 false&＃xff1a;

xmlhttp.open("GET","test1.txt",false);

我们不推荐使用 async&＃61;false&＃xff0c;但是对于一些小型的请求&＃xff0c;也是可以的。

请记住&＃xff0c;Javascript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢&＃xff0c;应用程序会挂起或停止。

注意&＃xff1a;当您使用 async&＃61;false 时&＃xff0c;请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可&＃xff1a;

实例&＃xff1a;

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false); xmlhttp.send(); document.getElementById("myDiv").innerHTML&＃61;xmlhttp.responseText;

五、AJAX - 服务器响应

1.服务器响应

如需获得来自服务器的响应&＃xff0c;请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

2.responseText 属性

如果来自服务器的响应并非 XML&＃xff0c;请使用 responseText 属性。

responseText 属性返回字符串形式的响应&＃xff0c;因此您可以这样使用&＃xff1a;

实例

document.getElementById("myDiv").innerHTML&＃61;xmlhttp.responseText;

3.responseXML 属性

如果来自服务器的响应是 XML&＃xff0c;而且需要作为 XML 对象进行解析&＃xff0c;请使用 responseXML 属性&＃xff1a;

实例

请求 cd_catalog.xml 文件&＃xff0c;并解析响应&＃xff1a;

xmlDoc&＃61;xmlhttp.responseXML; txt&＃61;""; x&＃61;xmlDoc.getElementsByTagName("ARTIST"); for (i&＃61;0;i"; } document.getElementById("myDiv").innerHTML&＃61;txt;

六、AJAX - onreadystatechange 事件

1.onreadystatechange 事件

当请求被发送到服务器时&＃xff0c;我们需要执行一些基于响应的任务。

每当 readyState 改变时&＃xff0c;就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性&＃xff1a;

属性	描述
onreadystatechange	存储函数&＃xff08;或函数名&＃xff09;&＃xff0c;每当 readyState 属性改变时&＃xff0c;就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成&＃xff0c;且响应已就绪
status	200: "OK" 404: 未找到页面

属性

描述

onreadystatechange

存储函数&＃xff08;或函数名&＃xff09;&＃xff0c;每当 readyState 属性改变时&＃xff0c;就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成&＃xff0c;且响应已就绪

status

200: "OK"
404: 未找到页面

在 onreadystatechange 事件中&＃xff0c;我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时&＃xff0c;表示响应已就绪&＃xff1a;

实例

xmlhttp.onreadystatechange&＃61;function() { if (xmlhttp.readyState&＃61;&＃61;4 && xmlhttp.status&＃61;&＃61;200) { document.getElementById("myDiv").innerHTML&＃61;xmlhttp.responseText; } }

注意&＃xff1a; onreadystatechange 事件被触发 4 次&＃xff08;0 - 4&＃xff09;, 分别是&＃xff1a; 0-1、1-2、2-3、3-4&＃xff0c;对应着 readyState 的每个变化。

2.使用回调函数

回调函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务&＃xff0c;那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数&＃xff0c;并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务&＃xff08;每次调用可能不尽相同&＃xff09;&＃xff1a;

实例

function myFunction() { loadXMLDoc("/try/ajax/ajax_info.txt",function() { if (xmlhttp.readyState&＃61;&＃61;4 && xmlhttp.status&＃61;&＃61;200) { document.getElementById("myDiv").innerHTML&＃61;xmlhttp.responseText; } }); }

七、AJAX ASP/PHP 实例

AJAX 用于创造动态性更强的应用程序。

1.AJAX ASP/PHP 实例

下面的例子将为您演示当用户在输入框中键入字符时&＃xff0c;网页如何与 web 服务器进行通信&＃xff1a; 请在下面的输入框中键入字母&＃xff08;A - Z&＃xff09;&＃xff1a;

2.实例解析 - showHint() 函数

当用户在上面的输入框中键入字符时&＃xff0c;会执行函数 "showHint()" 。该函数由 "onkeyup" 事件触发&＃xff1a;

源代码解析&＃xff1a;

如果输入框为空 str.length&＃61;&＃61;0&＃xff0c;则该函数清空 txtHint 占位符的内容&＃xff0c;并退出函数。

如果输入框不为空&＃xff0c;showHint() 函数执行以下任务&＃xff1a;

创建 XMLHttpRequest 对象
当服务器响应就绪时执行函数
把请求发送到服务器上的文件
请注意我们向 URL 添加了一个参数 q &＃xff08;带有输入框的内容&＃xff09;

AJAX 服务器页面 - ASP 和 PHP

以上实例 Javascript 调用的服务器页面是 PHP 文件&＃xff0c;名为 gethint.php。

下面&＃xff0c;我们创建了两个版本的服务器文件&＃xff0c;一个用 ASP 编写&＃xff0c;另一个用 PHP 编写。

1.ASP 文件

"gethint.asp" 中的源代码会检查一个名字数组&＃xff0c;然后向浏览器返回相应的名字&＃xff1a;

<% response.expires&＃61;-1 dim a(30) &＃39;Fill up array with names a(1)&＃61;"Anna" a(2)&＃61;"Brittany" a(3)&＃61;"Cinderella" a(4)&＃61;"Diana" a(5)&＃61;"Eva" a(6)&＃61;"Fiona" a(7)&＃61;"Gunda" a(8)&＃61;"Hege" a(9)&＃61;"Inga" a(10)&＃61;"Johanna" a(11)&＃61;"Kitty" a(12)&＃61;"Linda" a(13)&＃61;"Nina" a(14)&＃61;"Ophelia" a(15)&＃61;"Petunia" a(16)&＃61;"Amanda" a(17)&＃61;"Raquel" a(18)&＃61;"Cindy" a(19)&＃61;"Doris" a(20)&＃61;"Eve" a(21)&＃61;"Evita" a(22)&＃61;"Sunniva" a(23)&＃61;"Tove" a(24)&＃61;"Unni" a(25)&＃61;"Violet" a(26)&＃61;"Liza" a(27)&＃61;"Elizabeth" a(28)&＃61;"Ellen" a(29)&＃61;"Wenche" a(30)&＃61;"Vicky"&＃39;get the q parameter from URL q&＃61;ucase(request.querystring("q"))&＃39;lookup all hints from array if length of q>0 if len(q)>0 thenhint&＃61;""for i&＃61;1 to 30if q&＃61;ucase(mid(a(i),1,len(q))) thenif hint&＃61;"" thenhint&＃61;a(i)elsehint&＃61;hint & " , " & a(i)end ifend ifnext end if&＃39;Output "no suggestion" if no hint were found &＃39;or output the correct values if hint&＃61;"" thenresponse.write("no suggestion") elseresponse.write(hint) end if %>

2.PHP 文件

下面的代码用 PHP 编写&＃xff0c;与上面的 ASP 代码作用是一样的。

// Fill up array with names $a[]&＃61;"Anna"; $a[]&＃61;"Brittany"; $a[]&＃61;"Cinderella"; $a[]&＃61;"Diana"; $a[]&＃61;"Eva"; $a[]&＃61;"Fiona"; $a[]&＃61;"Gunda"; $a[]&＃61;"Hege"; $a[]&＃61;"Inga"; $a[]&＃61;"Johanna"; $a[]&＃61;"Kitty"; $a[]&＃61;"Linda"; $a[]&＃61;"Nina"; $a[]&＃61;"Ophelia"; $a[]&＃61;"Petunia"; $a[]&＃61;"Amanda"; $a[]&＃61;"Raquel"; $a[]&＃61;"Cindy"; $a[]&＃61;"Doris"; $a[]&＃61;"Eve"; $a[]&＃61;"Evita"; $a[]&＃61;"Sunniva"; $a[]&＃61;"Tove"; $a[]&＃61;"Unni"; $a[]&＃61;"Violet"; $a[]&＃61;"Liza"; $a[]&＃61;"Elizabeth"; $a[]&＃61;"Ellen"; $a[]&＃61;"Wenche"; $a[]&＃61;"Vicky";//get the q parameter from URL $q&＃61;$_GET["q"];//lookup all hints from array if length of q>0 if (strlen($q) > 0) {$hint&＃61;"";for($i&＃61;0; $i}// Set output to "no suggestion" if no hint were found // or to the correct values if ($hint &＃61;&＃61; "") {$response&＃61;"no suggestion"; } else {$response&＃61;$hint; }//output the response echo $response; ?>

AJAX Database 实例

AJAX 可用来与数据库进行动态通信。

1.AJAX 数据库实例

下面的例子将演示网页如何通过 AJAX 从数据库读取信息&＃xff1a; 请在下面的下拉列表中选择一个客户&＃xff1a;

实例

Apple Computer, Inc. BAIDU, Inc Canon USA, Inc. Google, Inc. NokiaCorporation Sony Corporation of America

客户信息将显示在这...

2.实例解释 - showCustomer() 函数

当用户在上面的下拉列表中选择某个客户时&＃xff0c;会执行名为 "showCustomer()" 的函数。该函数由 "onchange" 事件触发&＃xff1a;

showCustomer() 函数执行以下任务&＃xff1a;

检查是否已选择某个客户
创建 XMLHttpRequest 对象
当服务器响应就绪时执行所创建的函数
把请求发送到服务器上的文件
请注意我们向 URL 添加了一个参数 q &＃xff08;带有输入域中的内容&＃xff09;

AJAX 服务器页面

由上面的 Javascript 调用的服务器页面是 PHP 文件&＃xff0c;名为 "getcustomer.php"。

用 PHP 编写服务器文件也很容易&＃xff0c;或者用其他服务器语言。请看用 PHP 编写的相应的例子。

"getcustomer.php" 中的源代码负责对数据库进行查询&＃xff0c;然后用 HTML 表格返回结果&＃xff1a;

<% response.expires&＃61;-1 sql&＃61;"SELECT * FROM CUSTOMERS WHERE CUSTOMERID&＃61;" sql&＃61;sql & "&＃39;" & request.querystring("q") & "&＃39;"set conn&＃61;Server.CreateObject("ADODB.Connection") conn.Provider&＃61;"Microsoft.Jet.OLEDB.4.0" conn.Open(Server.Mappath("/db/northwind.mdb")) set rs&＃61;Server.CreateObject("ADODB.recordset") rs.Open sql,connresponse.write("

")
do until rs.EOFfor each x in rs.Fieldsresponse.write("

")response.write("

")nextrs.MoveNext
loop
response.write("

" & x.name & "

" & x.value & "

")
%>

AJAX XML 实例

AJAX 可用来与 XML 文件进行交互式通信。

1.实例解析 - loadXMLDoc() 函数

当用户点击上面的"获取我收藏的 CD"这个按钮&＃xff0c;就会执行 loadXMLDoc() 函数。

loadXMLDoc() 函数创建 XMLHttpRequest 对象&＃xff0c;添加当服务器响应就绪时执行的函数&＃xff0c;并将请求发送到服务器。

当服务器响应就绪时&＃xff0c;会构建一个 HTML 表格&＃xff0c;从 XML 文件中提取节点&＃xff08;元素&＃xff09;&＃xff0c;最后使用 XML 数据的填充 id&＃61;"demo" 的表格元素&＃xff1a;

2.异步加载 XML 文档

AJAX 服务器页面

上面这个例子中使用的服务器页面实际上是一个名为 "cd_catalog.xml" XML 文件。

AJAX JSON 实例

AJAX 可用来与 JSON 文件进行交互式通信。

1.实例解析 - loadXMLDoc() 函数

当用户点击上面的"获取课程数据"这个按钮&＃xff0c;就会执行 loadXMLDoc() 函数。

loadXMLDoc() 函数创建 XMLHttpRequest 对象&＃xff0c;添加当服务器响应就绪时执行的函数&＃xff0c;并将请求发送到服务器。

当服务器响应就绪时&＃xff0c;我们就使用 JSON.parse() 方法将数据转换为 Javascript 对象。&＃xff1a;

2.异步加载 JSON 文档

function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { // IE7&＃43;, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp&＃61;new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp&＃61;new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange&＃61;function() { if (xmlhttp.readyState&＃61;&＃61;4 && xmlhttp.status&＃61;&＃61;200) { var myArr &＃61; JSON.parse(this.responseText); myFunction(myArr) } } xmlhttp.open("GET","/try/ajax/json_ajax.json",true); xmlhttp.setRequestHeader("Content-Type", "application/json;charset&＃61;UTF-8"); xmlhttp.send(); } function myFunction(arr) { var out &＃61; ""; var i; for(i &＃61; 0; i out &＃43;&＃61; &＃39;&＃39; &＃43; arr[i].title &＃43; &＃39; &＃39;; } document.getElementById("myDiv").innerHTML&＃61;out; }

AJAX 服务器页面

上面这个例子中使用的服务器页面实际上是一个名为 "json_ajax.json" JSON 文件。

JSON 数据如下&＃xff1a;

1.json_ajax.jso 文件&＃xff1a;

[ { "title": "Javascript 教程", "url": "https://www.runoob.com/js/" }, { "title": "HTML 教程", "url": "https://www.runoob.com/html/" },{ "title": "CSS 教程", "url": "https://www.runoob.com/css/" } ]

发送 JSON 数据&＃xff1a;

xmlhttp.send(JSON.stringify( { "email": "admin&＃64;runoob.com", "response": { "name": "runoob" } }));

八、总结&＃xff1a;

1.小结&＃xff08;常用部分&＃xff09;

1.JSON使用&＃xff08;需要进行导包&＃xff09;

         对象字符串&＃xff0c;满足定义规则的字符串。
1.1 前端JSON格式字符串的转换使用
           Javascript——JSON.stringify(o);JSON.parse(jsonStr);
           jQuery——$.parseJSON

1.2 后端JSON格式字符串的转换使用
           jackJSON
          fastJSON

JSON工具&＃xff08;导包部分&＃xff09;&＃xff1a;

1.fastJSON

2.jackJSON

2.异步与同步

    2.1 同步
   一个人同一时间只能做一件事情&＃xff0c;只有一件事情做完&＃xff0c;才能做另一件事情。
2.2 异步
   一个人事情做了一半&＃xff0c;转而去做其他事情&＃xff0c;当其他事情做完以后&＃xff0c;再回过头做之前未完成的事情。

JSON代码部分(主要是为了转换格式方便使用AJAX)&＃xff1a;

JSON 对象字符串格式 --js jQuery var stu &＃61; {"name":"张三","age":18};var stuStr &＃61; "{\"name\":\"张三\",\"age\":18}"; string 满足JSON的格式1.什么是json——对象字符串满足对象|数组|对象数组的定义。.json.xml数据库访问JSON:一种与开发语言无关的、轻量级的数据存储格式&＃xff0c;全称Javascript Object Notation&＃xff0c;一种数据格式的标准规范&＃xff0c;起初来源于Javascript这门语言&＃xff0c;后来随着使用的广泛&＃xff0c;几乎每门开发语言都有处理JSON的API。优点&＃xff1a;易于人的阅读和编写&＃xff0c;易于程序解析与生产。JSON样例&＃xff1a;首先一个花括号{}&＃xff0c;整个代表一个对象&＃xff0c;同时里面是一种Key-Value的存储形式&＃xff0c;它还有不同的数据类型来区分2.JSON解析的工具&＃xff08;1&＃xff09;org.json的使用&＃xff08;2&＃xff09;net.sf.json的使用&＃xff08;3&＃xff09;json-simple的使用&＃xff08;4&＃xff09;gson的使用&＃xff08;5&＃xff09;jackson的使用&＃xff08;6&＃xff09;fastjson的使用&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;3.fastjson的使用JSON文本&＃xff1a;满足一个对象的定义或者一个数组的定义或者一个对象数组的定义的字符串//JS中定义一个对象 stuvar stu &＃61; {"name":"admin","sex":"男"};var str &＃61; "{\"name\":\"admin\",\"sex\":\"男\"}";jQuery----$.parseJSON();javaStudent stu &＃61; JSON.parseObject(str,Student.class);public static final Object parse(String text); // 把JSON文本parse为JSONObject或者JSONArraypublic static final JSONArray parseArray(String text); // 把JSON文本parse成JSONArraypublic static final JSONObject parseObject(String text); // 把JSON文本parse成JSONObject&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;public static final T parseObject(String text, Class clazz); // 把JSON文本parse为JavaBeanpublic static final List parseArray(String text, Class clazz); //把JSON文本parse成JavaBean集合public static final String toJSONString(Object object); // 将JavaBean序列化为JSON文本public static final String toJSONString(Object object, boolean prettyFormat); // 将JavaBean序列化为带格式的JSON文本public static final Object toJSON(Object javaObject); // 将JavaBean转换为JSONObject或者JSONArray。//对象--JSON字符串 Student stu &＃61; new Student("张三", "男", 18); String string &＃61; JSON.toJSONString(stu); System.out.println(string);//{"name":"张三","age":18,"sex":"男"}//字符串----对象 Student student &＃61; JSON.parseObject(string, Student.class); System.out.println(student);//集合---》JSON字符串 List list &＃61; new ArrayList(); list.add(new Student("张三", "男", 19)); list.add(new Student("张翼", "男", 22)); list.add(new Student("李四", "女", 33)); String jsonList &＃61; JSON.toJSONString(list); System.out.println(jsonList);//[{"name":"张三","sex":"男","age":19},{"name":"张翼","sex":"男","age":22},{"name":"李四","sex":"女","age":33}]//JSON字符串----》集合 List parseArray &＃61; JSON.parseArray(jsonList, Student.class); System.out.println(parseArray.size());
3.jQuery之AJAX使用

        原生js写ajax请求&＃xff08;写起来很复杂&＃xff0c;而且需要考虑浏览器版本&＃xff09;&＃xff0c;而jQuery将这些复杂的业务逻辑进行封装处理&＃xff0c;使用非常简单。

3.1 概述
           Ajax(Asynchronous Javascript and XML) 异步Javascript和XML

   核心&＃xff1a;Ajax就是能够做到局部刷新&＃xff01;
3.2 方法
   ** ajax()
   ** get()
   ** post()

3.3 语法
   $.ajax({
       url:"发送请求&＃xff08;提交或读取数据&＃xff09;的地址",
       dataType:"预期服务器返回数据的类型",
       type:"请求方式",
       async:"true/false",
       data:{发送到/读取后台&＃xff08;服务器&＃xff09;的数据},
        success:function(data){请求成功时执行},
        error:function(){请求失败时执行}
   });

   $.post(url, [data], [callback], [type]);

   $.get(url, [data], [callback], [type]);

jQuery部分&＃xff1a;

【案例1】用户注册失去焦点时&＃xff0c;判断是否成功。 1.编写html代码 2.引入jQuery库&＃xff0c;编写js代码 function myf(sname){//alert(sname);$.ajax({type:"post",dataType:"text",url:"hello",data:"sname&＃61;"&＃43;sname,success:function(data){$("#sid").html(data);}});} 3.编写servlet request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");String sname &＃61; request.getParameter("sname");String str &＃61;"ok";if("admin".equals(sname)) {str &＃61; "no";}//通过out对象将数据传输到客户端PrintWriter out &＃61; response.getWriter();out.print(str);out.flush();out.close();

2.总结部分 &＃xff1a;

1.引入

**传统网站中存在的问题**

- 网速慢的情况下&＃xff0c;页面加载时间长&＃xff0c;用户只能等待
- 表单提交后&＃xff0c;如果一项内容不合格&＃xff0c;需要重新填写所有表单内容
- 页面跳转&＃xff0c;重新加载页面&＃xff0c;造成资源浪费&＃xff0c;增加用户等待时间。

2.Ajax介绍

传统项目前后端不分离&＃xff0c;用户触发一个http请求服务器&＃xff0c;然后服务器接收之后&＃xff0c;在做出响应到用户&＃xff0c;并且返回一个新的页面&＃xff0c;也就是说交互都是通过页面刷新或页面跳转来实现。

   这样的方式对于用户体验来将其实并不友好&＃xff0c;少量的数据更新也会引发整个页面重新请求&＃xff0c;浪费了很大一部分资源。

   因此&＃xff0c;我们希望有一种更好的方式&＃xff0c;可以不用重新请求整个页面而达到更新部分数据的效果。

   2005年&＃xff0c;AJAX&＃xff08;Asynchronous Javascript And XML&＃xff09;横空出世&＃xff0c;给前端行业带来了巨大的变化与革新。
&＃96;&＃96;&＃96;

2.1 概述

   Ajax(Asynchronous Javascript and XML) 异步Javascript和XML

> Ajax实际上是下面这几种技术的融合&＃xff1a;
>
> - (1)XHTML和CSS的基于标准的表示技术
> - (2)DOM进行动态显示和交互
> - (3)XML和XSLT进行数据交换和处理
> - (4)XMLHttpRequest进行异步数据检索
> - (5)Javascript将以上技术融合在一起

   是浏览器提供的一套方法&＃xff0c;可以实现页面无刷新更新数据&＃xff0c;提高用户浏览网站应用的体验。

2.2 为什么需要使用AJAX技术&＃xff1f;

> 在我们之前的开发&＃xff0c;每当用户向服务器发送请求&＃xff0c;**哪怕只是需要更新一点点的局部内容&＃xff0c;服务器都会将整个页面进行刷新。**
>
> - **性能会有所降低(一点内容&＃xff0c;刷新整个页面&＃xff01;)**
> - **用户的操作页面会中断(整个页面被刷新了)**
>
> **Ajax就是能够做到局部刷新**&＃xff01;

2.3 特点

java
优点
   &＃xff08;1&＃xff09;不需要插件支持&＃xff08;一般浏览器且默认开启Javascript即可&＃xff09;
   &＃xff08;2&＃xff09;用户体验极佳&＃xff08;不刷新页面即可获取可更新的数据&＃xff09;
   &＃xff08;3&＃xff09;提升WEB程序的性能&＃xff08;在传递数据方面做到按需发送&＃xff0c;不必整体提交&＃xff09;
   &＃xff08;4&＃xff09;减轻服务器和带宽的负担&＃xff08;将服务器的一些操作转移到移动客户端&＃xff09;
缺点
   &＃xff08;1&＃xff09;前进、后退的功能被破坏&＃xff08;因为AJAX永远在当前页&＃xff0c;不会记录前后页面&＃xff09;
   &＃xff08;2&＃xff09;搜索引擎的支持度不够&＃xff08;因为搜索引擎爬虫还不能理解JS引起变化数据的内容&＃xff09;
   &＃xff08;3&＃xff09;不同版本的浏览器对XMLHttpRequest对象支持度不足&＃xff08;比如IE5之前&＃xff09;
&＃96;&＃96;&＃96;

2.4 应用场景

- 页面上拉加载更多数据
- 列表数据无刷新分页
- 表单项离开焦点数据验证
- 搜索框提示文字下拉列表

2.5 运行原理

Ajax相当于浏览器发送请求与接收响应的代理人&＃xff0c;以实现在不影响用户浏览页面的情况下&＃xff0c;局部更新页面数据&＃xff0c;从而提高用户体验。

------

3.jQuery的AJAX

> - 原生js写ajax请求&＃xff08;写起来很复杂&＃xff0c;而且需要考虑浏览器版本&＃xff09;
> - jquery帮咱们封装好了一个方法 ajax&＃xff0c;我们直接调用jquery的方法&＃xff0c;就可以发送ajax的请求
> - 后期&＃xff0c;前后端分离了&＃xff0c;还可以继续使用jquery的ajax&＃xff0c; axios更主流一些

**因为学习的是jQuery中Ajax方法&＃xff0c;所以所说的结构即是$.ajax()的结构。**
**$.ajax()方法中的参数很多&＃xff0c;我在实例中使用的只是一小部分&＃xff0c;这里只介绍实例中所需要的参数的使用&＃xff0c;其余更多参数还将继续学习。**

&＃96;&＃96;&＃96;JS
$.ajax({
    url:"发送请求&＃xff08;提交或读取数据&＃xff09;的地址",
dataType:"预期服务器返回数据的类型",
type:"请求方式",
async:"true/false",
data:{发送到/读取后台&＃xff08;服务器&＃xff09;的数据},
success:function(data){请求成功时执行},
error:function(){请求失败时执行}
});
&＃96;&＃96;&＃96;

&＃96;&＃96;&＃96;
<1> url 默认为当前页地址
<2> dataType 可用类型&＃xff1a;
&＃xff08;如果不指定&＃xff0c;JQuery将自动根据http包mime信息返回responseXML或responseText&＃xff0c;并作为回调函数参数传递&＃xff09;
   xml&＃xff1a;返回XML文档&＃xff0c;可用JQuery处理。
   html&＃xff1a;返回纯文本HTML信息。
   script&＃xff1a;返回纯文本Javascript代码。
   json&＃xff1a;返回json数据。
   jsonp&＃xff1a;(JSON with Padding) 是 json 的一种"使用模式"&＃xff0c;可以让网页从别的域名&＃xff08;网站&＃xff09;那获取资料&＃xff0c;即跨域读取数据。
   text&＃xff1a;返回纯文本字符串。
   说明&＃xff1a;对于json和jsonp的区别&＃xff0c;本小白暂时没有深入了解&＃xff0c;目前只知道jsonp可以跨域读取数据&＃xff0c;有待进一步学习~
<3> type 可用类型主要为post和get两种&＃xff08;默认为get&＃xff09;
   get&＃xff1a;从指定的资源请求数据&＃xff08;从服务器读取数据&＃xff09;
   post&＃xff1a;向指定的资源提交要被处理的数据&＃xff08;向服务器提交数据&＃xff09;
<4> async 异步方式&＃xff0c;默认为true&＃xff0c;即异步方式。当设置为false时&＃xff0c;为同步方式。
   异步方式&＃xff1a;ajax执行后&＃xff0c;会继续执行ajax后面的脚本&＃xff0c;直到服务器端返回数据后&＃xff0c;触发ajax里的success方法&＃xff0c;这时候执行的是两个线程。
   同步方式&＃xff1a;在没有返回值之前&＃xff0c;同步请求将锁住浏览器&＃xff0c;用户其它操作必须等待请求完成才可以执行。

   说明&＃xff1a;这里的同步和异步有待深入理解&＃xff0c;以下实例均使用默认的异步方式
<5> data 请求的数据&＃xff0c;{ }中可以填入多项数据。如果不填&＃xff08;一般为get请求&＃xff09;&＃xff0c;则读取对应地址的全部数据&＃xff0c;此时可以在console中通过console.log(res)显示数据情况。
<6> success 和 error 两个函数一般需要设置&＃xff0c;方便确定请求是否成功&＃xff0c;以及请求成功后的提示或是对数据的处理和显示。
&＃96;&＃96;&＃96;

------

**post方式**
格式

&＃96;&＃96;&＃96;
$.post(url, [data], [callback], [type]);

参数1&＃xff1a;url&＃xff0c;请求路径
参数2&＃xff1a;data&＃xff0c;请求参数
参数3&＃xff1a;callback&＃xff0c;回调函数
参数4&＃xff1a;type&＃xff0c;返回内容格式&＃xff0c;默认的是text,xml, html, script, json, text, _default。

&＃96;&＃96;&＃96;

**get方式**
格式

&＃96;&＃96;&＃96;
$.get(url, [data], [callback], [type]);

第一个参数&＃xff1a;请求的路径如&＃xff1a;
   ${pageContext.request.contextPath}/Servlet1
第二个参数&＃xff1a;请求的参数格式&＃xff1a;// JSON数据格式
   {key1:value1,key2:value2}
第三个参数&＃xff1a;回调函数格式&＃xff1a;
function(data){
alert(data);
}
第四个参数&＃xff1a;返回内容格式&＃xff1a;xml, html, script, json, text, _default。

服务器响应编码为&＃xff1a;application/json;charset&＃61;UTF-8&＃xff0c;回调函数data类型是json对象
服务器响应编码为&＃xff1a;text/html;charset&＃61;UTF-8&＃xff0c;回调函数data类型是字符串。
$.get() 以get请求方式发送ajax除了请求方式不同&＃xff0c;使用方式与$.post()完全一致。
.get()和.get()和.post()两种方式书写格式一模一样&＃xff0c;只需要修改.get()为.get()为.post()&＃xff0c;其余地方不需要改动&＃xff01;
它们的请求方式不同$.get()为get请求&＃xff0c;$.post()为post请求。这两种请求方式在处理编码方式上不一样&＃xff0c;建议优先使用$.post()请求方式。

JavaWeb快速入门AJAX使用

一、什么是 AJAX &＃xff1f;

1.AJAX 工作原理&＃xff1a;

2.AJAX是基于现有的Internet标准

3.Google Suggest

二、AJAX 实例解析

使用 AJAX 修改该文本内容

三、AJAX - 创建 XMLHttpRequest 对象

1.XMLHttpRequest 对象

2.创建 XMLHttpRequest 对象

3.实例

四、AJAX - 向服务器发送请求

1.向服务器发送请求

2.GET 还是 POST&＃xff1f;

3.GET 请求

实例

实例

实例

4.POST 请求

实例

实例:

5.url - 服务器上的文件

6.异步 - True 或 False&＃xff1f;

7.Async&＃61;true

实例:

8.Async &＃61; false

实例&＃xff1a;

五、AJAX - 服务器 响应

1.服务器响应

2.responseText 属性

实例

3.responseXML 属性

实例

六、AJAX - onreadystatechange 事件

1.onreadystatechange 事件

实例

2.使用回调函数

实例

七、AJAX ASP/PHP 实例

1.AJAX ASP/PHP 实例

2.实例解析 - showHint() 函数

AJAX 服务器页面 - ASP 和 PHP

1.ASP 文件

2.PHP 文件

AJAX Database 实例

1.AJAX 数据库实例

实例

2.实例解释 - showCustomer() 函数

AJAX 服务器页面

AJAX XML 实例

1.实例解析 - loadXMLDoc() 函数

2.异步加载 XML 文档

AJAX 服务器页面

AJAX JSON 实例

1.实例解析 - loadXMLDoc() 函数

2.异步加载 JSON 文档

AJAX 服务器页面

1.json_ajax.jso 文件&＃xff1a;

八、总结&＃xff1a;

1.小结&＃xff08;常用部分&＃xff09;

1.JSON使用&＃xff08;需要进行导包&＃xff09;

JSON工具&＃xff08;导包部分&＃xff09;&＃xff1a;

2.异步与同步

3.jQuery之AJAX使用

2.总结部分 &＃xff1a;

1.引入

2.Ajax介绍

2.1 概述

2.2 为什么需要使用AJAX技术&＃xff1f;

2.3 特点

2.4 应用场景

2.5 运行原理

3.jQuery的AJAX

`使用 AJAX 修改该文本内容`

五、AJAX - 服务器响应