Servlet--4.Ajax与jQuery、JSON

 

 

ajax教程：https://www.runoob.com/ajax/ajax-tutorial.html

一、ajax(异步刷新技术)概念

• AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
• AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
• AJAX 是一种用于创建快速动态网页的技术。(通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。)
• AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
• AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

1.为什么使用Ajax

无刷新：不刷新整个页面，只刷新局部

无刷新的好处

• 只更新部分页面，有效利用带宽
• 提供连续的用户体验
• 提供类似C/S的交互效果，操作更方便

2.传统Web与Ajax的差异

差异	方式	说      明
发送请求方式不同	传统Web	浏览器发送同步请求
	Ajax技术	异步引擎对象发送请求
服务器响应不同	传统Web	响应内容是一个完整页面
	Ajax技术	响应内容只是需要的数据
客户端处理方式不同	传统Web	需等待服务器响应完成并重新加载整个页面后用户才能进行操作
	Ajax技术	可以动态更新页面中的部分内容 不影响用户在页面进行其他操作

3.Ajax工作流程

---

二、XMLHttpRequest对象

• XMLHttpRequest 用于在后台与服务器交换数据
• 整个Ajax技术的核心
• 提供异步发送请求的能力

（一）常用方法

方     法	说      明
open( String method,  String url,  boolean async,  String user, String password )	创建一个新的HTTP请求
send( String  data )	发送请求到服务器端
abort( )	取消当前请求
setRequestHeader( String header,  String value )	设置请求的某个HTTP头信息
getResponseHeader(String header)	获取响应的指定HTTP头信息
getAllResponseHeader( )	获取响应的所有HTTP头信息

1.open()方法    

• 参数method：设置HTTP请求方法；参数url：请求的URL地址,文件在服务器上的位置；async：true（异步）或 false（同步） 
• 其中：method参数值大小写不敏感，常用值有get、post等；

2. send()方法    

• data为发送此请求时携带的参数。data参数值取决于open方法中的method参数，如果method值为“POST”，需要指定该参数。如果method值为“GET”，该参数为null

3. setRequestHeader()方法    

• 参数header：要指定的HTTP头名称；参数value：对应的值。

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

Async=true

当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

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

Async = false

如需使用 async=false，请将 open() 方法中的第三个参数改为 false：

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

GET 还是 POST？

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

然而，在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

（二）事件

onreadystatechange：指定回调函数

1）常用属性

• readyState：XMLHttpRequest的状态信息

就绪状态码	说      明
0	XMLHttpRequest对象未完成初始化
1	XMLHttpRequest对象开始发送请求// 服务器连接已建立
2	XMLHttpRequest对象的请求发送完成//请求已接收
3	XMLHttpRequest对象开始读取响应//请求处理中
4	XMLHttpRequest对象读取响应结束//请求已完成，且响应已就绪

• status：HTTP的状态码

状态码	说      明
200	服务器正确返回响应 就绪状态是4且状态码 是200，表示正确完成
404	请求的资源不存在
500	服务器内部错误
403	没有访问权限
…	……

• statusText：返回当前请求的响应状态

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

（三）服务器响应

• responseText：以文本形式获得响应的内容 ·(获得字符串形式的响应数据。)
• responseXML：将XML格式的响应内容解析成  DOM对象返回 （获得 XML 形式的响应数据。）

/*
    responseText 属性
    如果来自服务器的响应并非 XML，请使用 responseText 属性。
*/
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

/*
   responseXML 属性
    如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：
*/ 
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

 

（四） GET请求和POST请求的区别

步  骤	请求方式	实  现  代  码
初始化组件	GET	xmlHttpRequest.open( "GET", url, true );
	POST	xmlHttpRequest.open( "POST", url, true ); xmlHttpRequest.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
发送请求	GET	xmlHttpRequest.send( null );
	POST	xmlHttpRequest.send( "key=xxx&type=12&year=2016" );

 

---

三、使用jQuery实现Ajax

传统方式实现Ajax的不足

• 步骤繁琐
• 方法、属性、常用值较多不好记忆
• 处理复杂结构的响应数据（如XML格式）
• 比较烦琐 浏览器兼容问题

• jQuery将Ajax相关操作都进行了封装

（一）$.ajax()简介

1.语法

$.ajax([settings]);

2.常用属性参数

参  数	类  型	说      明
url	String	发送请求的地址，默认为当前页地址
type	String	请求方式，默认为GET
data	PlainObject 或 String 或 Array	发送到服务器的数据
dataType	String	预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text
timeout	Number	设置请求超时时间
global	Boolean	表示是否触发全局Ajax事件，默认为true

3.常用函数参数

参  数	类      型	说      明
beforeSend	Function ( jqXHR  jqxhr,  PlainObject  settings )	发送请求前调用的函数
success	Function( 任意类型  result, String  textStatus,jqXHR  jqxhr )	请求成功后调用的函数 参数result：可选，由服务器返回的数据
error	Function ( jqXHR  jqxhr, String  textStatus, String  errorThrown )	请求失败时调用的函数
complete	Function ( jqXHR  jqxhr,String textStatus )	请求完成后（无论成功还是失败）调用的函数

（二）使用$.ajax()发送异步请求

$.ajax( {
     "url":"url",         // 要提交的URL路径
     "type":"get",        // 发送请求的方式
     "data":data,         // 要发送到服务器的数据
     "dataType":"text",   // 指定传输的数据格式
     "success":function(result) { 
        // 请求成功后要执行的代码
	 },
      "error":function() {           
        // 请求失败后要执行的代码
	 }
} );

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$.ajax({url:"demo_ajax_load.txt",async:true,success:function(result){
			$("div").html(result);
		}});
	});
});
</script>
</head>
<body>

<div><h2> AJAX 可以修改文本内容</h2></div>
<button>修改内容</button>

</body>
</html>

 

• 其中：传参时使用的语法是一种新数据类型——JSON

---

三、JSON

菜鸟教程：https://www.runoob.com/json/json-tutorial.html

（一）json概念

JSON（JavaScript  Object  Notation） (JavaScript 对象表示法)

• 一种轻量级的文本数据交换格式
• 采用独立于语言的文本格式
• 通常用于在客户端和服务器之间传递数据

JSON的优点

• 轻量级交互语言
• 结构简单
• 易于解析
• JSON 具有自我描述性，更易理解

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快，更易解析。

与 XML 相同之处

• JSON 是纯文本
• JSON 具有"自我描述性"（人类可读）
• JSON 具有层级结构（值中存在值）
• JSON 可通过 JavaScript 进行解析
• JSON 数据可使用 AJAX 进行传输

---

与 XML 不同之处

• 没有结束标签
• 更短
• 读写的速度更快
• 能够使用内建的 JavaScript eval() 方法进行解析
• 使用数组
• 不使用保留字

---

为什么使用 JSON？

对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：

使用 XML

• 读取 XML 文档
• 使用 XML DOM 来循环遍历文档
• 读取值并存储在变量中

使用 JSON

• 读取 JSON 字符串
• 用 eval() 处理 JSON 字符串

（二）定义JOSN

1.JSON 语法规则

JSON 语法是 JavaScript 对象表示语法的子集。

• 数据在名称/值对中
• 数据由逗号分隔
• 大括号保存对象
• 中括号保存数组

JSON 值

JSON 值可以是：

• 数字（整数或浮点数）    ---{ "age":30 }
• 字符串（在双引号中）
• 逻辑值（true 或 false）
• 数组（在中括号中）
• 对象（在大括号中）
• null

2.定义JSON对象

语法

var JSON对象 = { "name" : value,  "url" : value,  …… };

示例

var person = { "name" : "张三",   "age" : 30,  "spouse" : null };

JSON 对象使用在大括号({})中书写。

对象可以包含多个 key/value（键/值）对。

key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。

key 和 value 中使用冒号(:)分割。

每个 key/value 对使用逗号(,)分割。

访问对象值

你可以使用点号（.）来访问对象的值：

var myObj, x;

myObj = { "name":"runoob", "alexa":10000, "site":null };

x = myObj.name;

 

你也可以使用中括号（[]）来访问对象的值：

var myObj, x;

myObj = { "name":"runoob", "alexa":10000, "site":null };

x = myObj["name"];

循环对象

你可以使用 for-in 来循环对象的属性：

var myObj = { "name":"runoob", "alexa":10000, "site":null };

for (x in myObj) {

          document.getElementById("demo").innerHTML += x + "<br>"; }

 

在 for-in 循环对象的属性时，使用中括号（[]）来访问属性的值：

var myObj = { "name":"runoob", "alexa":10000, "site":null };

for (x in myObj) {

       document.getElementById("demo").innerHTML += myObj[x] + "<br>"; }

 

3.定义JSON数组

语法

var JSON数组 = [ value,  value,  …… ];

示例

var countryArray = [ "中国",  "美国",  "俄罗斯" ];

var personArray = [ { "name":"张三",  "age":30 },{ "name":"李四",  "age":40 } ];

---