Ajax基础教程 图灵出品 高清晰PDF
Ajax基础教程 图灵出品 高清晰PDF 找了好久才找到 分享给大家 --------------------编程问答-------------------- 嗯？在哪里？lz能给个地址吗？ --------------------编程问答-------------------- 地址呢？ --------------------编程问答-------------------- 同问，在哪里呀？？ --------------------编程问答-------------------- 逗我们玩呢？ --------------------编程问答-------------------- 地址呢？？？？？ --------------------编程问答-------------------- 这....东西呢 --------------------编程问答-------------------- 求链接呀 --------------------编程问答-------------------- 我操，楼主逗我们玩，有意思吗？55555555555555 --------------------编程问答-------------------- 这是我老师写的一个关于ajax的示例，大家看看吧：
--------------------编程问答-------------------- 这个是处理ajax请求的服务器程序
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
/**var Ajax = function(){
Ajax.prototype.createAjaxObject = function(){
return new XMLHttpRequest();
}
}*/
//1. 创建AJAX对象
function createAjaxObject(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else {
//IE5.0 IE5.5 IE6.0
return new ActiveXObject('Microsoft.XMLHTTP');
}
}
function isExist(obj){
if(!obj.value){
alert('请输入用户名');
obj.focus();
return;
}
//1. 创建ajax对象
var xmlhttp = createAjaxObject();
url = 'ajax.let?method=checkUsername';
//2. 设置ajax请求的参数 [a.请求方法，b.请求url， c.请求类型(同步 false | 异步 true)] open();
xmlhttp.open('post',url,true);
//3.注册事件回调函数 (监听ajax对象状态改变时被调用)
xmlhttp.onreadystatechange = function(){
//alert("test = " + xmlhttp.readyState);
if(4 == xmlhttp.readyState){ //服务器端完全响应客户端
//获取服务器端响应客户端的信息
if(200 == xmlhttp.status)
alert(xmlhttp.responseText);
if(404 == xmlhttp.status)
alert('当前资源不存在！');
if(500 == xmlhttp.status)
alert('系统正忙。。。。');
}
}
//设置请求参数格式 key=value;
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//4.发送ajax请求 send(发送请求数据)
xmlhttp.send('username=' + obj.value);
}
function getAreas(obj){
selectArea = document.getElementById('area');
selectArea.innerHTML = ''; //清空
if(!obj.value){
alert('请选择城市！');
selectArea.disabled = true;
return;
}
//1. 创建ajax对象
var xmlhttp = createAjaxObject();
url = 'ajax.let?method=getAreaByCity&city=' + obj.value + "¶m=" + Math.random();
//2. 设置ajax请求的参数 [a.请求方法，b.请求url， c.请求类型(同步 false | 异步 true)] open();
xmlhttp.open('get',url,true);
//3.注册事件回调函数 (监听ajax对象状态改变时被调用)
xmlhttp.onreadystatechange = function(){
if(4 == xmlhttp.readyState){ //服务器端完全响应客户端
//获取服务器端响应客户端的信息
if(200 == xmlhttp.status){
//获取所有的area元素对象
selectArea.disabled = false;
/*var areas = xmlhttp.responseXML.getElementsByTagName('area');
for(i = 0; i < areas.length; i++){
//alert(areas[i].getAttribute('code') + '\t' + areas[i].text);
option = document.createElement('option');
option.setAttribute('value', areas[i].getAttribute('code'));
option.innerHTML = areas[i].text;
selectArea.appendChild(option);
}*/
var msg = xmlhttp.responseText;
var areas = eval(msg);
for(i = 0; i < areas.length; i++){
option = document.createElement('option');
option.setAttribute('value', areas[i].code);
option.innerHTML = areas[i].name;
selectArea.appendChild(option);
}
}
}
}
//4.发送ajax请求 send(发送请求数据)
xmlhttp.send(null);
}
</script>
</head>
<body>
用户名:<INPUT TYPE="text" NAME="username" onblur="isExist(this)"/>
<a href="ajax.let?method=checkUsername&username=八神山"
onclick="alert(encodeURI('八神山'))">测试</a>
<br/><br/><br/>
<hr>
城市:<select name="city" onchange="getAreas(this)">
<option value="">请选择</option>
<option value="0">长沙</option>
<option value="1">株洲</option>
<option value="2">常德</option>
</select>
地区:<select id="area" disabled></select>
</body>
</html>
--------------------编程问答-------------------- 这个是ajax最基础的东西，可能光看代码没有讲解会比较疼... 当时这些代码也是边讲解边给我们写出来的... --------------------编程问答-------------------- HTTP 状态码 500：Internal Server Error。
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.class70.mvc.action.ActionForm;
import com.class70.mvc.action.ActionForward;
import com.class70.mvc.action.DispatcherAction;
public class AjaxAction extends DispatcherAction {
private static Map<String, List<?>> areasMap = null;
/**
* 地区初始化数据
* @param key
* @return
*/
static {
areasMap = new HashMap<String, List<?>>();
List<AreaVO> list = new ArrayList<AreaVO>();
list.add(new AreaVO("001","雨花区"));
list.add(new AreaVO("002","天心区"));
list.add(new AreaVO("003","岳麓区"));
list.add(new AreaVO("004","开福区"));
list.add(new AreaVO("005","芙蓉区"));
areasMap.put("0", list);
list = new ArrayList<AreaVO>();
list.add(new AreaVO("006","芦淞区"));
list.add(new AreaVO("007","开发区"));
areasMap.put("1", list);
list = new ArrayList<AreaVO>();
list.add(new AreaVO("008","武陵区"));
list.add(new AreaVO("009","鼎城区"));
areasMap.put("2", list);
}
/**
* 检测用户名是否存在
* @param form
* @param method
* @param request
* @param response
* @return
* @throws Exception
*/
public ActionForward checkUsername(ActionForm form, String method,
HttpServletRequest request, HttpServletResponse response)throws Exception{
String username = request.getParameter("username");
System.out.println(new String(username.getBytes("iso8859-1"),"UTF-8")
+ " method = " + request.getMethod());
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
if("qq".equals(username)){
out.println("当前用户名已经被使用！");
}else {
out.println("可以使用！");
}
out.close();
return null;
}
/**
* 根据city编号，获取对应地区信息
* @param form
* @param method
* @param request
* @param response
* @return
* @throws Exception
*/
public ActionForward getAreaByCity(ActionForm form, String method,
HttpServletRequest request, HttpServletResponse response)throws Exception{
String city = request.getParameter("city");
List<?> list = areasMap.get(city);
StringBuilder xml = new StringBuilder();
// xml.append("<city-areas>");
// for (int i = 0; i < list.size(); i++) {
// AreaVO vo = (AreaVO)list.get(i);
// xml.append("<area code='" + vo.getCode() + "'>" + vo.getName() + "</area>");
// }
// xml.append("</city-areas>");
// response.setContentType("text/xml;charset=UTF-8");
xml.append("[");
for (int i = 0; i < list.size(); i++) {
AreaVO vo = (AreaVO)list.get(i);
if(i > 0){
xml.append(",");
}
xml.append("{code:'" + vo.getCode() + "',name:'" + vo.getName() + "'}");
}
xml.append("]");
System.out.println("js : " + xml.toString());
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.print(xml.toString());
out.close();
return null;
}
}
if(500 == xmlhttp.status)
alert('系统正忙。。。。');
--------------------编程问答--------------------
这也是技巧啊... --------------------编程问答-------------------- 有地址么？ --------------------编程问答-------------------- 没地址，楼主？
补充：Java , 非技术区
