一、显示页面(ajax_xml.html)
body部分
<!-- 支持多选的列表框 --><select name="first" id="first" size="5" multiple="multiple"> ???<option value="1" selected="selected">中国</option> ???<option value="2">美国</option> ???<option value="3">日本</option></select><!-- 用于发送Ajax请求的按钮 --><input type="button" value="发送" onClick="send();" /><!-- 被级联改变的列表框 --><select name="second" id="second" size="5" ></select>
需要注意的是:multiple="multiple"
size:表示选择框的宽度
multiple="multiple":表示允许多选
<script>部分:
1.XHR对象定义
2.数据封装
3.数据发送到服务器
4.处理服务器的响应
(1)XHR対象定义
// 定义了XMLHttpRequest对象 ???????var xmlrequest; ???????// 完成XMLHttpRequest对象的初始化 ???????function createXMLHttpRequest() { ???????????if (window.XMLHttpRequest) { ???????????????// DOM 2浏览器 ???????????????xmlrequest = new XMLHttpRequest(); ???????????} else if (window.ActiveXObject) { ???????????????// IE浏览器 ???????????????try { ???????????????????xmlrequest = new ActiveXObject("Msxml2.XMLHTTP"); ???????????????} catch (e) { ???????????????????try { ???????????????????????xmlrequest = new ActiveXObject("Microsoft.XMLHTTP"); ???????????????????} catch (e) { ???????????????????} ???????????????} ???????????} ???????}
(2)数据发送
1.初始化xhr对象
2.打开与服务器连接(定义发送到的地址)
// 事件处理函数,当下拉列表选择改变时,触发该事件 ???????function change(id) { ???????????// 初始化XMLHttpRequest对象 ???????????createXMLHttpRequest(); ???????????// 设置请求响应的URL ???????????var uri = "../jsp/second.jsp" ???????????// 设置处理响应的回调函数 ???????????xmlrequest.onreadystatechange = processResponse; ???????????// 设置以POST方式发送请求,并打开连接 ???????????xmlrequest.open("POST", uri, true); ???????????// 设置POST请求的请求头 ???????????xmlrequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); ???????????// 发送请求 ???????????xmlrequest.send("id=" + id); ???????}
(3)处理服务器的响应
// 定义处理响应的回调函数 ???????function processResponse() { ???????????// 响应完成且响应正常 ???????????if (xmlrequest.readyState == 4) { ???????????????if (xmlrequest.status == 200) { ???????????????????// 获取页面表格体内容 ???????????????????var bookTb = document.getElementById("book"); ???????????????????// 删除bookTb原有的所有行 ???????????????????while (bookTb.rows.length > 0) { ???????????????????????bookTb.deleteRow(bookTb.rows.length - 1); ???????????????????} ????????????????????// 获取服务器的JSON响应 ???????????????????// 并调用eval()函数将服务器响应解析成JavaScript数组 ???????????????????var books = eval(xmlrequest.responseText); ???????????????????// 遍历数组,每个数组元素生成一个表格行 ???????????????????for (var i = 0 , len = books.length ; i < len ; i++){ ?????????????????????var tr = bookTb.insertRow(i); ???????????????????????// 依次创建4个单元格,并为单元格设置内容 ???????????????????????var cell0 = tr.insertCell(0); ???????????????????????cell0.innerHTML = books[i].id; ???????????????????????var cell1 = tr.insertCell(1); ???????????????????????cell1.innerHTML = books[i].name; ???????????????????????var cell2 = tr.insertCell(2); ???????????????????????cell2.innerHTML = books[i].author; ???????????????????????var cell3 = tr.insertCell(3); ???????????????????????cell3.innerHTML = books[i].price; ?????????????????????} ???????????????} else { ???????????????????//页面不正常 ???????????????????window.alert("您所请求的页面有异常。"); ???????????????} ???????????} ???????}
(4)调用数据发送函数(开始数据)
document.body.onload = change(document.getElementById("category").value);
ajax接受json响应
原文地址:http://www.cnblogs.com/excellencesy/p/7881077.html