Ajax和Json的学习

1.Ajax： 异步Javascript和XML
Ajax不是一门新技术，向服务器请求数据的时候不用刷新整个页面。使用Javascript完成交互。使用XML作为传输的格式,当然也可以使用HTML传输数据


1.1XMLHttpRequest对象


function createRequest(){
var hr;
if(window.XMLHttpRequest){
hr = new XMLHttpRequest();
}
else if(window.ActiveXObject){
hr = new ActiveObject("Mrosoft.XMLHTTP");
}



}








1.1两种请求方式


1.1.1  GET方式
hr.open("GET","activeServlet?name=Tom",true);    //使用GET方式ajax请求会发现游览器莫名的读取缓存，所以要给请求加上随机数来实现。 ture是使用异步模式
hr.send(null);

hr.open("GET","activeServlet?t="+Math.random(),true);    //这样就不会产生缓存了
hr.send(null);



1.1.2   POST方式
hr.open("POST","activeServlet",ture);
hr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');  //POST必须加上这一句 修改HTTP头部，否则发出的数据不会被服务器接收
hr.send("name=Jack&age=22");






1.2处理Ajax响应


var  hr = createRequest (){
hr.onreadystatechange = function(){
if(hr.readyState==4&&hr.status==200){
ver content = hr.responseHTML   //如果使用hr.responseXML则接收XML数据
document.getElementById("div1").innerHTML = "<h1>"+content+"</h1>";  //向层div1中添加HTML内容   主意ajax只传输数据，
//HTML+CSS的显示部门由客户端完成，提高了效率
}
}


}










2.Json的初学习


2.1.Json是什么？
Json是一种轻量级的数据格式，
比XML格式更简单




在Ajax中XML更难写，而Json用起来更简单


2.2Json数据的格式
2.2.1表现一个人信息的json数据
{
'name':'Tom'
'age':22
'address':{'city':'苏州','street':'仁爱路'}
}


2.2.2或者json数组


{"array":[{"city":"合肥市","street":"经开区"},{"city":"苏州市","street":"高教区"},{"city":"上海市","street":"南京路"},{"city":"马鞍山市","street":"花山区"}]}






2.3服务器端生成Json数据
2.3.1 先导入JAR包  有7个Jar包
2.3.2   将一个对象转换成Json格式
Address add = new Address("北京","天安门广场");

Person per = new Person("张三",add);

JSONObject json = JSONObject.fromObject(per);
out.print(json.toString());


2.3.3   将数组转换成Json格式
Address add1 = new Address("合肥市","经开区");
Address add2 = new Address("苏州市","高教区");
Address add3 = new Address("上海市","南京路");
Address add4 = new Address("马鞍山市","花山区");

JSONArray array =new JSONArray();
array.add(add1);
array.add(add2);
array.add(add3); 
array.add(add4);

JSONObject json = new JSONObject();
json.put("array", array);
System.out.println(json.toString());
out.print(json.toString());
out.close();


2.4客户端处理Json数据
var date = hr.responseText;
var json = eval('('+date+')');
var content ='';
for(var i=0;i<json.array.length;i++){

content = content + "城市："+json.array[i].city+"<br>街道："+json.array[i].street;
content += "<br>--------------<br>";
}
document.getElementById('mydiv').innerHTML="<h5>"+content+"<h5>";