Java__Ajax与Json

Ajax简介

Ajax是什么

Asynchronous JavaScript and XML，
    异步的    JavaScript and XML

例如：
用户1：发请求1–>服务器处理1–>响应1
用户2：发请求2–>服务器处理2–>响应2

• （异步应用在B/S程序中，发请求–>服务器处理–>响应）
• Ajax应用优点：
  
  • 提升用户体验度；
  • 使用户操作更连续；
  • 避免页面的整体频繁等待，避免页面的整体频繁刷新；
  • 提升处理效率，提升响应速度；

Ajax原理

• 以XMLHttpRequest为核心，异步发送请求，接受响应结果
• 以JavaScript语言为基础，进行界面处理
• 以Json/XML作为数据传输格式
• 以HTML、CSS作为界面渲染
  

JSP（JSTL/EL）
HTML（Ajax+JavaScript）

Ajax基本使用方法

XMLHttpRequest对象常用方法和属性

-readyState属性：Ajax请求处理状态，值分为0，1，2，3，4
-onreadystatechange事件：readState 属性切换时调用绑定的function
-responseText：获取服务器返回的text信息（在readyState==4时使用，才有效）
-responseXML属性：获取服务器返回的xml信号
-status属性：HTTP响应状态，例如404，500，200

Ajax示例：用户名检测

发送Ajax请求

• 时机：焦点离开用户名输入框，onblur
• 提交数据：用户名
• URL地址：check.do（name=xxx）

服务器处理

/check.do（name=xxx）
—>CheckServlet—>用户名可用/用户名被占用

Ajax回调处理

获取服务器返回信息
显示到用户名后面

补充知识

POST提交

• open(“post”,url,true);
• xhr.setRequestHeader(“content-type”,”application/x-www.

动态生成下拉单选项

发送Ajax请求

• 时机：页面载入后onload
• 提交数据：无
• 请求地址：cities.do

服务器处理

/cities.do–>CityServlet–>响应输出省份信息
“河北：河南：山东”

Ajax回调处理

解析返回的信息：按；切割 split
循环切割的内容，生成option

河北；河南；山东；广州

<cities>
  <city>
    <id>1</id>
    <name>河北</name>
  </city>
  <city>
    <id>2</id>
    <name>河南</name>
  </city>
  <city>
    <id>3</id>
    <name>山东</name>
  </city>
</cities>

JSON应用

JSON简介

JavaScript Object Notation
JavaScript对象格式–》数据格式/JavaScript类型

JavaScript中JSON类型

var obj = {"key1":value1,"key2":value2};
obj.key1;//获取value1
obj.key2;//获取value2

JSON在Ajax中的应用

• 在Servlet端将Java对象转成JSON字符串
• 在Js回调函数端将JSON字符串转变成JSON变量
  

var data = xhr.responseText;//json字符串


[{"name":"上海","no":101},
{"name":"北京","no":102},
{"name":"深圳","no":103}]

JQuery对Ajax的支持

JQuery脚本库是对原始js的封装。
$（“tr”）；//把所有< tr >元素选出来
[原始tr，原始tr，原始tr]

$(“btn1”).click(fn1);$(“btn1”).click(fn2);

addClass(“c1”);//class=”c1”
addClass(“c2”);//class=”c1 c2”

val()–>value
html()—>innerHTML

select对象.append(option对象);//将option添加到select里
$(#"s1").remove();//删除id=s1 元素
$(#"s1").empty();//清空id=s1元素里的内容

hide()--->slideUp(1000);--->fadeOut(1000);
show()---->slideDown(1000);---->fadeIn(1000);

jQuery中Ajax函数：$ajax()$ $get()$ $post()$$getJSON()$ $getScript()$$load()$

div或span的jQuery对象.load（url，[提交的参数]）；
$.get（请求url，成功回调函数，服务器返回的数据类型）；
$.post(请求url，[请求参数]，成功回调函数，服务器返回的数据类型）;

$.ajax（{
    url:"请求地址",
    type:"请求类型"，
    data: 提交请求参数,
    dataType:"服务器返回的数据类型",
    async:同步/异步,
    success:成功回调函数,
    error:失败回调函数
);