ajax_json

AJAX框架Day1

1、Ajax引言

a) 概念 Asynchronous Javascript And XML (异步请求 javaScript And XML)

b) 传统的请求

发起传统请求的方式
1. 地址栏
2. 超级连接
3. 表单
4. Javascript: location.href 函数
传统请求的问题
因为传统请求响应的是新的页面（刷新了页面）。所以用户就必须要等待响应结果，才可以进行后续的操作。
用户体验差。

基于异步请求的特点
响应的内容不是新的页面，是一个页面的局部，字符串信息，所以用户在使用异步请求的时候，不需要等待响应的，直接就可以进行后续处理。

传统请求与异步请求的区别
1. 响应内容
  传统响应的内容：新的页面，刷新页面
  异步响应的内容：页面的局部，字符串信息
2. 对于用户的操作
  传统的请求：等待响应
  异步的请求：不需要等待响应，用户可以直接进行后续的操作
建议在合适的场景下，都使用异步请求，提高用户的体验

2、异步请求的开发

a) 异步请求对象的创建
　　javascript: XmlHttpRequest对象 xhr
　　Chrome|FF|safari中 XmlHttpRequest
　　var xhr = new XmlHttpRequest();
　　IE(ie5 ie6)中 ActiveXObject
　　var xhr = new ActiveXObject(“Microsoft.XMLHTTP”);

b) xhr对象的使用

3、用户名检测的案例

不再跳转

控制表单是否提交,提交时检测

4、Ajax的开发步骤

a) 创建异步请求
IE系 xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
非IE系 xhr = new XmlHttpRequest();

b) 发送请求 queryString
xhr.open(“GET”,URL?name=suns&pwd=123&sex=male);
xhr.send(null);
xhr.open(“POST”,url,true(是否使用异步));
xhr.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”);

为什么设置：模拟表单
基本Web的开发只能使用表单提交数据，使用表单提交数据时默认指定
enctype=”application/x-www-form-urlencoded”,但是现在使用ajax编程，不再使用
<form标签了也就没有方式提供enctype属性对应的值了。那么这时候需要通过在
请求头中手工设置application/x-www-form-urlencoded来模拟表单。
xhr.send(“name=suns&pwd=123&sex=male”);,传递数据要加引号,

c)       监听响应
xhr.onreadystatechange = function(){
    if(xhr.readyState==4&&xhr.status==200){
          xhr.responseText
          DOM编程
    }
}

d) 服务器端：
不再进行页面的跳转，而是通过返回字符串信息，完成交互
request作用域不使用
底层就是使用Response.getWriter()获取输出流进行交互

5、JSON协议串
JSON协议串，本质上就是一个字符串。

a) 作用：异构的编程体系中，进行数据的传输，交互。

b) 核心：

定义了字符串的格式
1. 对象形式
2. 集合形式
3. 内嵌对象
4. Map类型与对象的形式一致
5. JSON协议解析多种工具可以自动支持转换
  java端：jsonlib gson(Google) fastjson(ali) jakeson(SpringMVC)
  Gson//对象是大括弧,集合小括弧