一、 Ajax
1. Ajax简介
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语⾔，⽽是⼀种使⽤现有标准的新⽅法。
AJAX 是与服务器交换数据并更新部分⽹⻚的艺术，在不重新加载整个⻚⾯的情况下。
2. Ajax所包含的技术
⼤家都知道ajax并⾮⼀种新的技术，⽽是⼏种原有技术的结合体。它由下列技术组合⽽成。
1.使⽤CSS和XHTML来表示。
2.使⽤DOM模型来交互和动态显示。
3.使⽤XMLHttpRequest来和服务器进⾏异步通信。
4.使⽤javascript来绑定和调⽤。
AJAX 的核⼼是 XMLHttpRequest 对象。
不同的浏览器创建 XMLHttpRequest 对象的⽅法是有差异的。
IE 浏览器使⽤ ActiveXObject，⽽其他的浏览器使⽤名为 XMLHttpRequest 的 JavaScript 内建对象
3. Ajax的⼯作原理
Ajax的⼯作原理相当于在⽤户和服务器之间加了—个中间层(AJAX引擎)，使⽤户操作与服务器响应异步化。并不是所有的⽤户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎⾃⼰来做， 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
4. jquery的ajax操作
传统⽅式实现Ajax的不⾜：步骤繁琐，⽅法、属性、常⽤值较多不好记忆
$.ajax ({
url:请求地址
type:"get | post | put | delete " 默认是get,
data:请求参数 {"id":"123","pwd":"123456"},
dataType:请求数据类型"html | text | json | xml | script | jsonp ", success:function(data,dataTextStatus,jqxhr){ },//请求成功时 error:function(jqxhr,textStatus,error)//请求失败时 })以下方法取代.ajax
$.get(url,par,function(data){
//将服务器返回的数据显示到⻚⾯的代码
});
$.post(url,par,function(data){
//将服务器返回的数据显示到⻚⾯的代码
});url:请求的路径
par:发送的数据
success:成功函数
data返回的数据
二、 JSON
JSON在java中的使⽤(重要)
我们要使⽤json和java中使⽤，我们需要使⽤到⼀个第三⽅的包。它就是
java对象和json之间的转换
《1》单个对象或map集合
java->json：
Users user2=new Users();
user2.setUsername("李四");
user2.setPassword("abc");
user2.setAge(20);
JSONObject obj=JSONObject.fromObject(user);//obj就是json格式的json->java：
String str="{'username':'李四','password':'admin','age':19}";
JSONObject json=JSONObject.fromObject(str);
Users user=(Users)JSONObject.toBean(json,Users.class);《2》对象集合和json的转换
java集合->json数组:
List list=new ArrayList();
list.add("dd");
list.add("aa");
JSONArray obj=JSONArray.fromObject(list);//set也是这么转json数组->java集合:
⽅式1:
String str2="[{'age':20,'password':'abc','username':'李四'},
{'age':10,'password':'adb','username':'张三'}]";
JSONArray json2=JSONArray.fromObject(str2);
Object[] obj=(Object[])JSONArray.toArray(json2,Users.class);⽅式2:
String str3="[{'age':20,'password':'abc','username':'李四'},
{'age':10,'password':'adb','username':'展示⼲'}]";
JSONArray json3=JSONArray.fromObject(str3);
//默认转换成ArrayList
List<Users> list=(List<Users>) JSONArray.toCollection(json3,Users.class);三、 ajax实例-实现数据的⾃动填充
⻚⾯:
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$("[name='uid']").blur(function(){
var uid=$(this).val();
$.ajax({
url:"getuser",
data:"userid="+uid,
type:"post",
dataType:"JSON",//设置服务器端响应回来的格式
success:function(rs){
//alert(rs.username);
$("[name='uname']").val(rs.username);
$("[name='address']").val(rs.address);
if(rs.sex=='男'){
$("#boy")[0].checked=true;
}else{
$("#girl")[0].checked=true;
}
}
})
});
})
</script>
</head>
<body>
userid:<input type="text" name="uid"><br>
username <input type="text" id="uname" name="uname"><br>
address <input type="text" id="address" name="address"><br>
sex:<input type="radio" name="sex" id="boy">男
<input type="radio" name="sex" id="girl">⼥
</body>后台:
实体类：
public class Users {
private String username;
private String password;
private String address;
private String sex;
}处理类:
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws
ServletException, IOException {
String userid=req.getParameter("userid");
Users users=new Users();
switch (Integer.parseInt(userid)){
case 1:
users.setUsername("张安");
users.setAddress("北京");
users.setSex("男");
break;
case 2:
users.setUsername("张安1");
users.setAddress("北京2");
users.setSex("⼥");
break;
case 3:
users.setUsername("张安3");
users.setAddress("北京3");
users.setSex("男");
break;
default:
users.setUsername("");
users.setAddress("");
users.setSex("");
}
//将users对象响应给客户端，使⽤PrintWriter来实现
resp.setContentType("text/html;charset=utf-8");
PrintWriter writer = resp.getWriter();
//将对象转换成json格式
JSONObject jsonObject = JSONObject.fromObject(users);
writer.print(jsonObject);
}
