AJAX入门

<script>
XMLHttpRequest
function getHTTPObject(){
  var 
}
open()
url
data


接收：OnReadyStatusChange    0,1,2,3,4     
200成功,404不存在,


数据格式
HTML格式:
一些普通文本组成
优点：简单


XML格式：要解析，构建对应节点，后放入页面
1.结果为XML格式，多余需要使用responseXML来获取
var result = request.responseXML;
2.结果不能直接使用，必须先创建对应节点，在把节点加入到#details中
目标格式为：
var name = result.getElementByTagName("name")[0].firstChild.nodeValue;

var aNode = document.createElement("a");
aNode.appendChild(document.createTextNode(name));
aNode.href = "mailto:" + email;
优点：通用的数据格式，自定义组合
缺点：DOM解析可能复杂，动态页面上，

json格式：JS的原生格式（不需解析）
无序的名称、值对
新建json：jsonTest.html
在script下
 var jsonObject = {
    "name":"abc",
"age":12,
"address":{"city":"beijing","school":"youzhiyuan"},
 };

 解析json：
 保存在responseText对象中把一个字符串转为json对象：eval()方法
 eval（）将字符串转为js代码执行。
优点：更加严谨，
缺：代码不易读


总结：
不共享：html片段
需要重用：json
远程运用程序未知：xml

jquery实现ajax：
$(ajax)
load(),$(get),$(post)
load()简单、常用
url中 get方式  参数中：post方式
$(getJSON)

ajax:不用刷新页面，可以和服务器进行通信的方式
主要方式：XMLHttpRequest
传输数据的三种方式：html、不需解析，数据有限，需要拼装
xml笨重、解析困难、通用的数据交换格式，
json：小巧，有面向对象的特性，且有很多第三方jar包可以把java对象或集合转为hson字符串

使用jquery完成ajax
load方法：结果直接加为对应节点的子元素
var $obj=...
var url=...
var args={key:value};
$obj.load(url,args);

$.get,$.post,$.getJSON
url:Ajax请求的目标url
args:传递的参数：json类型
data：Ajax响应成功后的数据
$.get(url,args,function(data){}，JSON)

</script>

ajax实现登录验证：
1、导入jquery库
2、获取name="username" 的节点：username
3、为username添加change响应函数
3.1、获取username的value属性值，去除前后空格且不为空，准备发送Ajax请求
3.2、发送ajax请求检验username是否可用
3.3、在服务端直接返回一个html的片段
3.4、在客户端浏览器把其直接添加到#message的html中

登录验证：
页面：
<form action="" method="post">
  UserName:<input type="text" name="username" />
  <br><br>
  <div id="message"></div>
  <input type="submit" value="Submit" />
</form>

<script>
$(function(){
  $(":input[name='username']").change(function(){
    var val = $(this).val();
val=$.trim(val);

if(val!=""){
 var url = "${pageContext.request.contextPath}/valiateUserName";
 var args = {"userName":val,"time":new Date()};

 $.post(url.args,function(data){
   $("#message").html(data);
 });
}
  })
})


Servlet代码：
extends HttpServlet
List<String> userNames = Arrays.asList("AAA","BBB","CCC");

String userName = request.getParameter("userName");
String result = null;
if(userName.contains(userName)){
  result = "<font color='red'>用户名已存在</font>"；

}else{
  result = "<font color = 'green'>用户名可用</font>"
}
response.setContentType("text/html");
response.getWriter().print(result);
 }
}

添加商品：
写页面
写Bean ：一个类，
ShoppingCart:
//存放ShoppingCartItem的Map，键：书名，值：ShoppingCarItem对象
private Map<Integer,ShoppingCarItem> item = new HashMap<Integer,>
写方法：
addToCart(){}

ShoppingCarItem:一个类，书的number，名字，价格
private int totalBookNumber;

脚本：
1、获取当前页面a节点，并为其添加onclick函数，同时清除其默认行为
2、准备发送ajax请求：url（a节点的href属性）；args（时间戳）
3、响应一个JSON对象，包括bookNumber，totalBookNumber，
4、把对应属性添加到对应位置&nbsp;<span id="bookNumber"></span>&nbsp;
注意：若从服务端返回json字符串，则属性名必须使用双引号"",单引号不行
<script>
  $(function(){
    $()
  })

servlet:
1、获取请求参数，id，price
2、获取购物车对象
3、把点击的对象加入到购物车
4、准备响应json对象{"bookNumber":"","totalBookNumber":1."totalMoney":1}

5、响应JSON

购物车程序总结：
一个AJAX的基本过程
1、JSP页面的编写
2、分析页面元素属性，创建Bean，创建JAVA类，接受Bean及必须的方法的实现
3、写Servlet类在JSP与JAVA类之间传递参数，并调用方法实现逻辑，将结果返回到客户端
4、在客户端进行赋值、完成结果的显示

var isHasCart = "${sessionScope.sc == null}";
if(isHasCart == "true"){
  $("#").hide();
}else{
  $("#").show();

  把其他值加上
  $("#bookName").text("${sessionScope.sc.bookName}");
  $("#totalBook").text("${sessionScope.sc.totalBook}");
  $("#totalMoney").text("${sessionScope.sc.totalMoney}");
}

使用第三方工具构建JSON：jackson
先建立Bean，
1、导入jar包
2、创建ObjectMapper对象
3、调用
4、通过添加注解@JsonIgnore忽略json属性
5、使用jackson
加入jar包、创建ObjectMapper对象、调用ObjectMapper的writeValueAsString方法
把JAVA
注意：JackSon根据getter来定位Json对象的属性，而不是字段
可以在类的getter方法上添加@JsonIgnore注解，来忽略该属性
（org.code......）

ajax三级联：

dsc vacations