Web基础了解版11-Ajax-JSON

李永毅

2020-01-05

关注关注

Ajax

AJAX即“Asynchronous Javascript And XML”：是，不发生页面跳转、异步请求载入内容并改写局部页面内容的技术。

也可以简单的理解为通过JS向服务器发送请求。

同步处理：

就是当我们通过一个页面向服务器发送一个请求时，在服务器响应结束之前，我们的整个页面是不能操作的，并且即使整个页面中只有一小部分内容发生改变我们也要刷新整个页面。

异步处理：

通过AJAX向服务器发送请求，当服务器正常响应请求后，响应信息会直接发送到AJAX中，AJAX可以根据服务器响应的内容做一些操作。并可局部的修改页面，而不需要整个页面刷新。

请求对象：XMLHttpRequest

XMLHttpRequest对象用来封装请求报文，我们向服务器发送的请求信息全部都需要封装到该对象中。

获取XMLHttpRequest对象，不同浏览器之间有差异

//获取XMLHttpRequest的通用方法
function getXMLHttpRequest(){
    var xhr;
    try{
        //大部分浏览器都支持
        xhr = new XMLHttpRequest();
    }catch(e){
        try{
            //如果不支持，在这里捕获异常并且采用IE6支持的方式
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            //如果还不支持，在这里捕获异常并采用IE5支持的方式
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xhr;
}

XMLHttpRequest对象的方法

open(method,url,async)：用于设置请求的基本信息，接收三个参数。
- 参数一：method
  接收一个字符串，表明请求的方法：get或post
- 参数二：url
  请求的地址，接收一个字符串
- 参数三：Assync
  发送的请求是否为异步请求，接收一个布尔值。① true 是异步请求 ② false 不是异步请求（同步请求）
send(string)：用于将请求发送给服务器，可以接收一个参数
- string参数
  该参数只在发送post请求时需要。用于设置请求体
setRequestHeader(header,value)：用于设置请求头
- 参数一：header参数
  字符串类型，要设置的请求头的名字
- 参数二：value参数
  字符串类型，要设置的请求头的值

XMLHttpRequest对象的属性

readyState
- 描述XMLHttpRequest的状态
- 一共有五种状态分别对应了五个数字：
  - 0 ：请求尚未初始化，open()尚未被调用
  - 1 ：服务器连接已建立，send()尚未被调用
  - 2 ：请求已接收，服务器尚未响应
  - 3 ：请求已处理，正在接收服务器发送的响应
  - 4 ：请求已处理完毕，且响应已就绪。
status
- 请求的响应码
  - 200 响应成功
  - 404 页面为找到
  - 500 服务器内部错误
    ......
onreadystatechange
- 该属性需要指向一个函数
- 该函数会在readyState属性发生改变时被调用
responseText
- 获得字符串形式的响应数据。
responseXML（用的比较少）
- 获得 XML 形式的响应数据。

JQuery的Ajax请求

四个Ajax请求方法

$.ajax方法
$.get方法
$.post方法
$.getJSON方法

一个表单序列化方法：serialize()表单序列化方法

$.ajax请求

url：请求的地址
type : 请求的方式 get或post
data : 请求的参数 string或json
success: 成功的回调函数
dataType: 返回的数据类型常用json或text

$.get和$.post请求

url:请求的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text。

$.getJSON请求

url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。

表单的序列化

serialize() 方法可以把一个form表单中所有的表单项。都以字符串name=value&name=value的形式进行拼接

$.ajax({
    url : "ajaxServlet", 　　　　// 请求地址
    error:function(){   　　　 　// 请求失败回调
        alert("请求失败");
    },
    success:function(data){ 　　 // 请求成功回调
        alert( data );
    },
    type:"POST",                // 请求的方式
    dataType:"json",            // 返回的数据类型为json对象
    data:{                      // 请求的参数
         action:"jqueryAjax",
         a:12,
         date: new Date()
     }
 });

JSON

JSON是JavaScript Object Notation 的缩写，是JS提供的一种轻量级的数据交换格式，易于人阅读和编写。同时也易于机器解析和生成。

JSON对象本质上就是一个JS对象，但是这个对象比较特殊，它可以直接转换为字符串，在不同语言中进行传递，通过工具又可以转换为其他语言中的对象。

在标准的json格式中，json对象由大括号括起来，对象中的属性也就是json的key是一个字符串，所以一定要使用双引号引起来。每组key之间使用逗号进行分隔。

JSON 6种数据类型

字符串 //注意：不能使用单引号
数字
布尔值
null值
对象
- 例子：{“name”:”sunwukong”, ”age”:18}
数组
- 例子：[1,”str”,true]

JSON对象的访问

key就是对象的属性。我们要访问一个对象的属性，只需要使用【对象名.属性名】的方式访问即可。

JSON对象和字符串对象的互转

JSON.stringify( json )：此方法可以把一个json对象转换成为json字符串
JSON.parse( jsonString )：此方法可以把一个json字符串转换成为json对象

JSON在Java中的使用

Gson 提供了用来在 Java 对象和 JSON 数据之间进行映射的 Java 类库，可以将一个 JSON 字符串转成一个 Java 对象，或者反过来。

java对象和json的转换
java对象list集合和json的转换
map对象和json的转换

// json操作，一定要先new一个gson对象。
Gson gson = new Gson();

// 1、把对象转成为json字符串
String personjson = gson.toJson(person);
// 把json字符串转换成为java对象
Person p = gson.fromJson(personjson, Person.class);    

//2、java对象list集合和json的转换
String jsonListString = gson.toJson(list);
// 把json数组转换成为List对象
List<Person> ps = gson.fromJson(jsonListString, new PersonType().getType());

// 3、map对象和json的转换
String jsonMapString = gson.toJson(mapPerson);
// 通过使用匿名内部类的方式
Map<String, Person> map = gson.fromJson(jsonMapString,new TypeToken<HashMap<String, Person>>() {}.getType());

web技术 ajax