Ajax技术（Asynchronous Javascript And XML)和 JSON（JavaScript Object Notation）

最新推荐文章于 2025-05-28 14:02:39 发布

原创最新推荐文章于 2025-05-28 14:02:39 发布 · 314 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

java

本文详细介绍了Ajax技术，一种允许网页在不刷新整个页面的情况下与服务器进行异步交互的方法，以及JSON（JavaScript Object Notation）数据格式的规则和使用。Ajax的核心是XMLHttpRequest对象，用于与服务器通信，JQuery提供了便捷的$.ajax(), .post(), .get(), $.getJSON()等API。JSON作为轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，是Ajax交互中的常用数据格式。" 117510380,10541932,Android实现音乐播放通知栏,"['Android开发', '通知栏', '音乐播放']

Ajax技术是一种异步交互式网页开发技术

在这里插入图片描述同步：刷牙–做饭—吃饭（只能做一件事）
异步：边刷牙边做饭–吃饭（多件事一起做）

Ajax的概念：

不是一项具体的技术，而是几门技术的综合应用。
其核心只不过是要在javascript中调用一个叫XMLHttpRequest的JavaScript类，这个类可以与Web服务器使用HTTP协议进行交互，程序不通过浏览器发出请求，而是用这个特殊的JavaScript对象发送请求，再由这个JavaScript对象接收响应，并将响应结果用DOM编程方式挂到原来的网页上，从而使得JavaScript借助这个api类可以干出比较有意义的事情。
XMLHttpRequest对象在网络上的俗称为XHR对象。
把其他页面的内容响应在当前页面中。
在这里插入图片描述兼容性：IE浏览器
Ajax交互:不用刷新，频繁请求

Gson工具类

在这里插入图片描述

JQuery中$.ajax()方法参数详解

url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。

type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和

  delete也可以使用，但仅部分浏览器支持。

timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设

     置。

async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。

   如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等

   待请求完成才可以执行。

cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。

   设置为false将不会从浏览器缓存中加载请求信息。

data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格

  式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格

  式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同

  值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime

      信息返回responseXML或responseText，并作为回调函数参数传递。

      可用的类型如下：

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

      html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。

      script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求

              时（不在同一个域下），所有post请求都将转为get请求。

      json：返回JSON数据。

      jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个

            “?”为正确的函数名，以执行回调函数。

      text：返回纯文本字符串。

beforeSend：要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义

        HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参

        数。

        function(XMLHttpRequest){

           this;   //调用本次ajax请求时传递的options参数

        }

complete：要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。

      参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。

      function(XMLHttpRequest, textStatus){

         this;    //调用本次ajax请求时传递的options参数

      }

success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。

     (1)由服务器返回，并根据dataType参数进行处理后的数据。

     (2)描述状态的字符串。

     function(data, textStatus){

        //data可能是xmlDoc、jsonObj、html、text等等

        this;  //调用本次ajax请求时传递的options参数

error：要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错

   误信息、捕获的错误对象(可选)。

   ajax事件函数如下：

   function(XMLHttpRequest, textStatus, errorThrown){

      //通常情况下textStatus和errorThrown只有其中一个包含信息

      this;   //调用本次ajax请求时传递的options参数

   }

contentType：要求为String类型的参数，当发送信息至服务器时，内容编码类型默认

         为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

dataFilter：要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。

        提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的

        dataType参数。函数返回的值将由jQuery进一步处理。

        function(data, type){

            //返回处理后的数据

            return data;

        }

global：要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局

    ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。

ifModified：要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。

        服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。

jsonp：要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。

   该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如

   {jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

username：要求为String类型的参数，用于响应HTTP访问认证请求的用户名。

password：要求为String类型的参数，用于响应HTTP访问认证请求的密码。

processData：要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度

         来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM

         树信息或者其他不希望转换的信息，请设置为false。

scriptCharset：要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时

           才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

AJAX——核心XMLHttpRequest对象，而JQuery也对Ajax异步操作进行了封装，这里看一下几种常用的方式。 $. a j a x ，$ .post， $.get， $.getJSON。

     一， $.ajax，这个是JQuery对ajax封装的最基础步，通过使用这个函数可以完成异步通讯的所有功能。也就是说什么情况下我们都可以通过此方法进行异步刷新的操作。但是它的参数较多，有的时候可能会麻烦一些。看一下常用的参数：

var configObj = {
  method //数据的提交方式：get和post
  url //数据的提交路径
  async //是否支持异步刷新，默认是true
  data //需要提交的数据
  dataType //服务器返回数据的类型，例如xml,String,Json等
  success //请求成功后的回调函数
  error //请求失败后的回调函数
 }

$. a j a x (c o n f i g O b j); / / 通过$ .ajax函数进行调用。

看一个进行异步删除的例子：

<span style="font-size:18px;">   // 删除 
    $.ajax({ 
     type : "POST", //提交方式 
     url : "${pageContext.request.contextPath}/org/doDelete.action",//路径 
     data : { 
      "org.id" : "${org.id}"
     },//数据，这里使用的是Json格式进行传输 
     success : function(result) {//返回数据根据结果进行相应的处理 
      if ( result.success ) { 
       $("#tipMsg").text("删除数据成功"); 
       tree.deleteItem("${org.id}", true); 
      } else { 
       $("#tipMsg").text("删除数据失败"); 
      } 
     } 
    }); 
</span>

二， $. p o s t ，这个函数其实就是对$ .ajax进行了更进一步的封装，减少了参数，简化了操作，但是运用的范围更小了。$.post简化了数据提交方式，只能采用POST方式提交。只能是异步访问服务器，不能同步访问，不能进行错误处理。在满足这些情况下，我们可以使用这个函数来方便我们的编程，它的主要几个参数，像method，async等进行了默认设置，我们不可以改变的。例子不再介绍。

url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。

type:返回内容格式，xml, html, script, json, text,_default。
三， $. g e t ，和$ .post一样，这个函数是对get方法的提交数据进行封装，只能使用在get提交数据解决异步刷新的方式上，使用方式和上边的也差不多。这里不再演示。
四， $.getJSON，这个是进一步的封装，也就是对返回数据类型为Json进行操作。里边就三个参数，需要我们设置，非常简单：url,[data],[callback]。

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax请求</title>
<script type="text/javascript">
	function getAjax(){
		var ajax;
		//1.获取一个XMLHttpRequest对象
		if(window.XMLHttpRequest){
			ajax=new XMLHttpRequest();
		}
		//2.回调函数,它的作用就是用于处理服务器响应的数据
	    ajax.onreadystatechange=function(){
			if(ajax.readyState==4){
				if(ajax.status==200){
					//5.在回调函数中获取服务器响应的数据
					var result=ajax.responseText;
					alert(result);
					var showdiv=document.getElementById("showdiv");
					showdiv.innerHTML=result;
				}
			}
		}
		//3.设置请求方式GET/POST及请求的URL
		ajax.open("get","message");
		//4.真正向服务器发送请求
		ajax.send(null);
	}
</script>
<style type="text/css">
		#showdiv{
			border: solid 2px;
			width:  200px;
			height: 100px
		}
</style>
</head>
<body>
<h3>欢迎来到相思湖学院</h3>
<input type="submit" name="button" value="测试" onclick="getAjax()"/>
<div id="showdiv"></div>
</body>
</html>

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

JSON: JavaScript Object Notation(JavaScript 对象表示法)

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

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

JSON 语法规则

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

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

JSON 数据的书写格式是：名称/值对。

名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：

"name" : "菜鸟教程"

这很容易理解，等价于这条 JavaScript 语句：

name = "菜鸟教程"

JSON 值

JSON 值可以是：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在中括号中）
对象（在大括号中）
null

JSON 数字

JSON 数字可以是整型或者浮点型：

{ "age":30 }

JSON 对象

JSON 对象在大括号（{}）中书写：

对象可以包含多个名称/值对：

{ "name":"菜鸟教程" , "url":"www.runoob.com" }

这一点也容易理解，与这条 JavaScript 语句等价：

name = "菜鸟教程"
url = "www.runoob.com"

JSON 数组

JSON 数组在中括号中书写：

数组可包含多个对象：

{
"sites": [
{ "name":"菜鸟教程" , "url":"www.runoob.com" }, 
{ "name":"google" , "url":"www.google.com" }, 
{ "name":"微博" , "url":"www.weibo.com" }
]
}

在上面的例子中，对象 “sites” 是包含三个对象的数组。每个对象代表一条关于某个网站（name、url）的记录。

JSON 布尔值
JSON 布尔值可以是 true 或者 false：

{ "flag":true }

JSON null
JSON 可以设置 null 值：

{ "runoob":null }

JSON 使用 JavaScript 语法
因为 JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON。

通过 JavaScript，您可以创建一个对象数组，并像这样进行赋值：

实例

var sites = [
    { "name":"runoob" , "url":"www.runoob.com" }, 
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"微博" , "url":"www.weibo.com" }
];