Web基础了解版11-Ajax-JSON

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();

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

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

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