开发一定要看的Ajax编程
开发一定要看的Ajax编程
Ajax编程入门
1.web交互的2种模式对比
①：2种交互模式的流程
②：2种交互模式用户体验
同步交互模式：客户端提交请求，等待，在响应回到客户端前，客户端无法进行其他操作
异步交互模型：客户端将请求提交给Ajax引擎，客户端可以继续操作，由Ajax引擎来完成与服务武器端通信，当响应回来后，Ajax引擎会更新客户页面，在客户端提交请求后，用户可以继续操作，而无需等待 。
2.Ajax快速入门
①：开发步骤
1).创建XMLHttpRequest对象
2).将状态触发器绑定到一个函数
3).使用open方法建立与服务器的连接
4).向服务器端发送数据
5).在回调函数中对返回数据进行处理
Demo：
<script type="text/javascript">
// 第一步 创建XMLHttpRequest
functioncreateXMLHttpRequest(){
try{
xmlHttp = newXMLHttpRequest();
}catch(tryMS) {
try{
xmlHttp = newActiveXObject("Msxml2.XMLHTTP");
}catch(otherMS) {
try{
xmlHttp = newActiveXObject("Microsoft.XMLHTTP");
}catch(failed) {
xmlHttp = null;
// 这里可以报一个错误，无法获得 XMLHttpRequest对象
}
}
}
returnxmlHttp;
}
varxmlHttp = createXMLHttpRequest();
// 第二步 响应从服务器返回后，Ajax引擎需要更新页面，绑定一个回调函数
xmlHttp.onreadystatechange = function(){
// 第五步，响应返回后执行
// 状态依次 是 0 - 4
// 0 未初始化 1 正在加载2 已经加载3 交互中4 响应完成
if(xmlHttp.readyState == 4){
// 判断数据是否正确
if(xmlHttp.status == 200){
// 响应有效
alert("响应返回了..." + xmlHttp.responseText);
}
}
};
// 第三步 建立与服务器连接
//xmlHttp.open("GET","helloworld?name=张三");//helloworld代表 Servlet URL
xmlHttp.open("POST","helloworld");
// 第四步 发送数据
// xmlHttp.send(null);
xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
xmlHttp.send("name=李四");
</script>
②：XMLHttpRequest对象的属性及方法
属性：
1)onreadystateonchange：状态回调函数
2)readystate：对象状态
3)status：服务器返回的http状态码
4)reqsponseText/responseXML：服务器响应的字符串
5)statusText：服务器返回的http状态信息
方法：
1)open:
2)send:
③：客户端向服务器提交数据
1)get方式发送数据
xmlHttp.open("GET","url?key=value"); // 参数已经在url上
xmlHttp.send(null);
2)post方式发送数据
xmlHttp.open("POST","url"); // 不需要写参数
xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded"); // post发送参数前，需要设置编码格式
xmlHttp.send("name=xxx&pwd=xxx"); // 发送post数据
④：Ajax编程图解
说明：查看时，请将文档放到为180%较为合适！
结合编程图解，我们将第一个案例的代码进行解剖：
3.三种不同服务器响应数据类型编程
常见的服务器响应数据类型：html片段、JSON格式数据、xml格式数据
①：HTML片段的数据处理
练习1：验证用户名是否有效
Ø 通过xmlhttp.responseText获得返回数据
Ø 通过Dom查找获得元素
Ø 调用元素的innerHTML进行操作
从Ajax编程图解我们可以知道，我们只需要分别编写客户端和服务器端就好。客户端我们以register.html文件为主，服务器端程度为CheckUsernameServlet以及配置文件web.xml。
下面分别对三个文件内容进行展示：
①：register.html
②：CheckUsernameServlet.java
③：web.xml
register.txt
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
// 用户名离焦 发起Ajax请求
window.onload = function(){
// 为 用户名绑定一个离焦事件
document.getElementById("username").onblur = function(){
// 获得用户名
var username = document.getElementById("username").value ;
if(username.trim().length != 0){
// Ajax发送数据
var xmlHttp = createXMLHttpRequest();
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState ==4 ){
if(xmlHttp.status == 200){
// 使用innerHTML 将代码片段插入 指定位置
document.getElementById("info").innerHTML = xmlHttp.responseText;
}
}
};
xmlHttp.open("GET","/Ajax/CheckUsernameServlet?username="+username);
xmlHttp.send(null);
}else{
alert("用户名不能为空！");
}
}
}
String.prototype.trim = function(){
return this.replace(/(^\s*)(\s*$)/g, "");
}
function createXMLHttpRequest(){
try {
xmlHttp = new XMLHttpRequest();
}
catch (tryMS) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (otherMS) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (failed) {
xmlHttp = null;
// 这里可以报一个错误，无法获得 XMLHttpRequest对象
}
}
}
return xmlHttp;
}
</script>
</head>
<body>
<form>
用户名: <input type="text" name="username" id="username"/><span id="info"></span><br/>
密　码: <input type="password" name="password" id="password" /> <br/>
<input type="submit" value="注册" />
</form>
</body>
</html>
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name></display-name>
<servlet>
<servlet-name>CheckUsernameServlet</servlet-name>
<servlet-class>ajax.CheckUsernameServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CheckUsernameServlet</servlet-name>
<url-pattern>/CheckUsernameServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
说明：三个文件的具体内容请双击方框内的图标即可查看，这里推荐使用Notepad++进行关联
效果图展示：(数据使用list存储，abc和def存在)
注意：在register.html文件中，与服务器建立连接是，url一定要写对，否则返回数据时出现404错误！【"/Ajax/CheckUsernameServlet?username="】
②：JSON格式数据处理
练习2：通过链接获得table数据，显示 --- 返回HTML片段
通过product.jsp 生成HTML片段，返回客户端，客户端Ajax引擎接收，通过innerHTML 将table元素嵌入到页面内部，其思路与案例一类似，这里不做详细介绍。这里需要提出的是第二种解决方案JSON(HTML片段容易造成返回数据带回过多冗余的HTML标签元素)
JSON是一种JavaScript轻量级数据交互格式，主要应用于Ajax编程。易于人阅读和编写，同时也易于机器解析和生成。
格式一： {key:value,key:value,key:value } 键值对直接用 , 分开，键值之间用 : 键本身必须是字符串常量
{name : '张三'}
{'name':'张三'}
是等价的。
值加不加引号，是有区别的，不加引号是变量，加引号是常量字符串
格式二： [值1, 值2 ,值3 ] 数组结构
组合后复杂格式
[{name:'aaa'}, {name:'bbb'}, {name:ccc}] 表示三个对象数组
JSON应用场景： AJAX请求参数和响应数据
问题： 服务器端如何生成 json格式数据------->>依赖第三方开源类库
③：JSON-lib的使用
是java类库 ，支持javabean map list array转换json格式字符串， 支持将json字符串转换javabean对象(反过来只支持这一种，使用很少)
在使用JSON-lib时必须导入至少5个jar包
开发时我们使用6个jar包，双击json-lib-all.zip即可获取所需j
1）将数组/list集合解析成JSON串
使用JSONArray可以解析Array类型
JSONArray jsonArray = JSONArray.fromObject(list变量);
2）将Javabean/Map解析成JSON串
使用JSONObject可以解析javabean类型
JSONObject jsonObject = JSONObject.fromObject(javabean);
3）对象属性过滤转换JSON串
通过JsonConfig对象配置对象哪些属性不参与转换。
JsonConfig jsonConfig = new JsonConfig();
jsonConfig.setExcludes(new String[]{"price"});
重构练习2
table.txt
<!DOCTYPE html>
<html>
<head>
<title>table.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
window.onload = function(){
document.getElementById("mylink").onclick = function(){
var xmlHttp = createXMLHttpRequest();
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
// 返回json格式数据 ，需要对json格式数据处理
var productArr = eval("("+xmlHttp.responseText+")");
// 表格
var table = document.createElement("table");
table.setAttribute("border","1");
table.setAttribute("width","400");
var headTr = document.createElement("tr");
var th1 = document.createElement("th");
th1.innerHTML = "商品名称";
var th2 = document.createElement("th");
th2.innerHTML = "商品价格";
headTr.appendChild(th1);
headTr.appendChild(th2);
table.appendChild(headTr);
// 遍历结果 json对象
for(var i=0; i< productArr.length; i++){
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerHTML = productArr[i].name;
var td2 = document.createElement("td");
td2.innerHTML = productArr[i].price;
tr.appendChild(td1);
tr.appendChild(td2);
table.appendChild(tr);
}
document.getElementById("result").innerHTML = "";
document.getElementById("result").appendChild(table);
}
}
}
xmlHttp.open("GET","/Ajax/listProducts");
xmlHttp.send(null);
}
}
String.prototype.trim = function(){
return this.replace(/(^\s*)(\s*$)/g, "");
}
function createXMLHttpRequest(){
try {
xmlHttp = new XMLHttpRequest();
}catch (tryMS) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch (otherMS) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch (failed) {
xmlHttp = null;
// 这里可以报一个错误，无法获得 XMLHttpRequest对象
}
}
}
return xmlHttp;
}
</script>
</head>
<body>
<a href="javascript:void(0);" id="mylink">显示商品信息</a>
<hr/>
<div id="result">还没有选择数据</div>
</body>
</html>
listProducts.java
package cn.itcast.jsonlib;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
public class listProducts extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
List<Product> products = new ArrayList<Product>();
Product p1 = new Product();
p1.setName("苹果手机");
p1.setPrice(4999);
Product p2 = new Product();
p2.setName("ThinkPad笔记本");
p2.setPrice(8888);
products.add(p1);
products.add(p2);
JSONArray jsonArray = JSONArray.fromObject(products);
response.setContentType("text/json;charset=utf-8");
response.getWriter().print(jsonArray);
System.err.println(jsonArray);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
运行效果：
④：XML格式数据处理
练习3：select完成省级联动
1) XStream的使用
问题：服务器端如何将java对象，生成XML格式数据？需要第三方类库支持XStream
XStream is a simple library to serialize objects to XML and back again.
XStream主要完成Java对象的序列化(xstream-1.3.1.jar)以及解析(xpp3_min-1.1.4c.jar)
2) XStream的核心方法
Ø xStream.toXML(obj)：将对象序列化XML
Ø xStream.fromXML(inputStream/xml片段)：将xml信息解析成对象
Ø xStream.alias(String name,Class)：将类型解析或者序列化时，取一个别名
代码案例：(序列化)
解析xml时，要注意别名的命名规则要与序列化时保持一致！
3) XStream注解
在Javabean中进行注解
把某属性的名称取别名为city：@XStreamAlias(value="city")
注解生效：xStream.autodetectAnnotations(true);
@XStreamAsAttribute 设置变量生成属性
@XStreamOmitField 设置变量不生成到XML
@XStreamImplicit(itemFieldName = “hobbies”) 设置集合类型变量别名