01_Ajax概述

ajax,json - 图1A.概述
ajax,json - 图2AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
ajax,json - 图3通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
ajax,json - 图4B.作用
ajax,json - 图5a.可以局部刷新页面
ajax,json - 图6b.可以发起异步请求
C.和同步请求的区别
ajax,json - 图7同步请求:当页面内容发生改变时,必须全部刷新,且刷新的时候不能发出其他请求
ajax,json - 图8异步请求:可以局部的改变网页上的内容,当正在发生改变时,其他的模块的内容也可以发出请求.

02_XMLHttpRequest对象详细介绍

A. ajax,json - 图9XMLHttpRequest概述
ajax异步请求对象
ajax,json - 图10B.属性
ajax,json - 图11onreadystatechange
ajax,json - 图12用于指定XMLHttpRequest对象状态改变时的事件处理函数
ajax,json - 图13ajax,json - 图14readyState:XMLHttpRequest对象的处理状态 0 :XMLHttpRequest对象还没有完成初始化
1 ajax,json - 图15:XMLHttpRequest对象开始发送请求
2 ajax,json - 图16:XMLHttpRequest对象的请求发送完成
3 ajax,json - 图17:XMLHttpRequest对象开始读取服务器的响应
4 ajax,json - 图18ajax,json - 图19:XMLHttpRequest对象读取服务器响应完成
responseText:
ajax,json - 图20用于获取服务器的响应正文.
ajax,json - 图21status
ajax,json - 图22服务器返回的响应状态码，只有服务器的响应已经完成时，才会有该状态码
ajax,json - 图23C.方法
open:打开链接.
open(请求方式,请求路径,flag);

ajax,json - 图24flag为true则是异步请求,如果是false则是同步请求
send:发送数据
send(数据);


请求方式为get请求时,不需要通过send方法来发送,直接将参数跟在请求路径后面
请求方式为post请求时,就需要使用send方法
setRequestHeader:设置请求头
setRequestHeader(“头”,”值”);


03_Ajax入门案例之get方式

ajax,json - 图25A.步骤
ajax,json - 图26a.创建异步的XMLHttpRequest对象.
ajax,json - 图27b.设置监听:监听对象的状态的变化,触发一个函数.
ajax,json - 图28c.打开链接:
ajax,json - 图29d.发送数据:
ajax,json - 图30B.实现 

  1. function createXMLHttpRequest() {
  2.     var xmlHttp;
  3.     try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest();
  4.     } catch(e) {
  5.         try { // Internet Explorer
  6.             xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  7.         } catch(e) {
  8.             try {
  9.                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  10.             } catch(e) {}
  11.         }
  12.     }
  13.     return xmlHttp;
  14. }
  16. function ajax_get() {
  17.     // * 1.创建异步的XMLHttpRequest对象. var xhr = createXMLHttpRequest();
  18.     // * 2.设置监听:监听对象的状态的变化,触发一个函数. xhr.onreadystatechange = function(){
  19.     if (xhr.readyState == 4) {
  20.         if (xhr.status == 200) {
  21.             var data = xhr.responseText;
  22.             // 获得div:
  23.             var div1 = document.getElementById("div1");
  24.             div1.innerHTML = data;
  25.         }
  26.     }
  27. }
  28. // * 3. 打 开 链 接 : 
  29. xhr.open("GET", "${pageContext.request.contextPath}/ajaxServletDemo1", true);
  30. // * 4.发送数据:
  31. xhr.send();
  32. }

04_Ajax入门案例之post方式

ajax,json - 图31A.步骤
ajax,json - 图32a.创建异步的XMLHttpRequest对象.
ajax,json - 图33b.设置监听:监听对象的状态的变化,触发一个函数.
ajax,json - 图34c.打开链接:
ajax,json - 图35d.设置请求头
ajax,json - 图36e.发送数据:
ajax,json - 图37B.实现

  1. function ajax_post() {
  2.     // * 1.创建异步的XMLHttpRequest对象. var xhr = createXMLHttpRequest();
  3.     // * 2.设置监听:监听对象的状态的变化,触发一个函数. xhr.onreadystatechange = function(){
  4.     if (xhr.readyState == 4) {
  5.         if (xhr.status == 200) {
  6.             // 获得响应的数据:
  7.             var data = xhr.responseText;
  8.             // 获得div1:
  9.             var div1 = document.getElementById("div1");
  10.             div1.innerHTML = data;
  11.         }
  12.     }
  14. }
  15. // * 3.打开链接:
  16. xhr.open("POST", "${ pageContext.request.contextPath }/ajaxServletDemo1", true);
  17. // 设 置 请 求 头 : xhr.setRequestHeader("Content‐Type","application/x‐www‐form‐urlencoded");
  18. // * 4.发送数据:
  19. //POST请求传递参数:需要将参数写到send方法中.
  20. xhr.send("id=3&name=李四");
  22. }

05_Json介绍

ajax,json - 图38A.什么是Json?
ajax,json - 图39JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习
惯。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成(网络传输速率)。

ajax,json - 图40B.Json语法
一个数据:
{"键1":值1,"键2":值2}

一组数据:
[{"键1":值1,"键2":值2},{"键1":值1,"键2":值2}]

ajax,json - 图41a.数据在键值对里面
ajax,json - 图42b.数据之间由逗号分隔
ajax,json - 图43c.大括号保存对象
ajax,json - 图44d.中括号保存数组
ajax,json - 图45e.Json值
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在中括号中）
对象（在大括号中）
null
ajax,json - 图46C.Json数据
ajax,json - 图47Java类

  1. class Province {
  2.     int id;
  3.     Stirng name;
  4. }

ajax,json - 图48Json数据
ajax,json - 图49单条数据，表示Java中的单一对象.
一个省份

  1. {"id":1,"name":"湖北省"}

ajax,json - 图50多条数据，表示Java中的集合或数组. 多个省份

  1. [{"id":1,"name":"湖北省"},{"id":2,"name":"湖南省"},{"id":3,"name":"四川省"}]

06_Gson的使用

ajax,json - 图51A.什么是Gson?
ajax,json - 图52Gson是一个工具类:将对象,数组,List,Map集合转换成json字符串
ajax,json - 图53B.使用Gson

ajax,json - 图54a.导入jar包
ajax,json - 图55gson.jar
ajax,json - 图56b.gson使用
ajax,json - 图57将对象转换成json字符串
ajax,json - 图58ajax,json - 图59将List集合转换成json字符串将数组转换成json字符串
ajax,json - 图60将map集合转换成json字符串