ajax课1 源码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="./js/my.js"></script>
<script src="./js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function showCity(proV){
//根据选择的省份去后台查询对应的城市
var xhr=getXhr();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
//nj:南京;yz:扬州
var text=xhr.responseText;
var arr=text.split(";");
//["nj:南京","yz:扬州"]
//清空上一次城市选项
$("#city").html("");
for(var i=0;i<arr.length;i++){
var value=arr[i].split(":")[0];
var htmlText=arr[i].split(":")[1];
//新疆option
var option=new Option(htmlText,value);
$("#city").append(option);
}
}
}
xhr.open('get','city.do?proV='+proV,true);
xhr.send(null); } </script>
</head>
<body>
<select id="pro" onchange="showCity(this.value)">
<option value="1">请选择</option>
<option value="js">江苏</option>
<option value="ah">安徽</option>
</select>
<select id="city"></select>
</body>
</html>
package web; import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class ActionServlet extends HttpServlet { public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
//获取请求资源路径
String uri=request.getRequestURI();
//截取 /list
String action=uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
//设置返回的类型
response.setContentType("text/html;charset=utf-8");
//获取输出流
PrintWriter out=response.getWriter();
if("/checkUname".equals(action)){
/* //模拟服务器正在处理中。。。
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}*/
/*模拟服务器异常
* if(true){
throw new ServletException("有错啦---");
}*/
//接受用户传入的用户名，判断用户名是否一致
String name=request.getParameter("uname");
System.out.println(name);
//假设zs已经被占用
if("zs".equals(name)){
out.print("用户名被占用");
}else{
out.print("用户名可以用");
}
}else if("/city".equals(action)){
//获取页面传过来的省份
String proV=request.getParameter("proV");
if("1".equals(proV)){
out.print("-1,请选择省份");
}else if("js".equals(proV)){
//返回江苏的城市
out.print("nj:南京;yz:扬州");
}else if("ah".equals(proV)){
//返回安徽对应的城市
out.print("hf:合肥;wh:芜湖");
}
}
out.close();
} }
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="./js/my.js"></script>
<script src="./js/jquery-1.11.1.js"></script>
<script >
var uflag=false;//默认用户名验证不合法
var pflag=false;//默认密码验证不合法
function check_uname_get(){
//获取ajax对象
var xhr=getXhr();
//注册监听
xhr.onreadystatechange=function (){
//根据服务器返回的数据给页面做处理
if(xhr.readyState==4){
if(xhr.status==200){//服务器正常返回
var text=xhr.responseText;
//将text的内容显示在页面上
$("#name_msg").html(text);
}else{//服务器返回有异常
$("#name_msg").html("服务器异常，请稍后重试。。。")
} }else{//服务器没有返回
$("#name_msg").html("验证中，请稍后。。。")
}
}
//初始化
var url="checkUname.do?uname="+$("[name=uname]").val()+"&"+new Date().getTime();
xhr.open('get',encodeURI(url),true);
//真正发送请求
xhr.send(null);
} function check_uname_post(){
//获取ajax对象
var xhr=getXhr();
//注册监听
xhr.onreadystatechange=function (){
//根据服务器返回的数据给页面做处理
if(xhr.readyState==4){
//服务器返回的结果显示在页面中
if(xhr.status==200){//服务器正常返回
var text=xhr.responseText;
//将text的内容显示在页面上
$("#name_msg").html(text);
//如果服务器返回的内容为"用户名可用"
//用户名验证结果为true
if("用户名可用"==text){
uflag=true;
}else{
uflag=false;
}
}else{//服务器返回有异常
$("#name_msg").html("服务器异常，请稍后重试。。。")
} }else{
//服务器没有返回
$("#name_msg").html("验证中，请稍后。。。")
}
}
//初始化
var url="checkUname.do";
xhr.open('post',url,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//真正发送请求
xhr.send("uname="+$("[name=uname]").val()); } function check_pwd(v){
//密码必须为6位的数字
var reg=/^[0-9]{6}$/;
pflag=reg.text(v); } //验证整个表单（必须用户名可用且密码合法）
function checkForm(){
return iflag&&pflag;
}
</script>
</head>
<body>
<form action="registe.do" method="post" onsubmit="return checkForm()">
用户名：<input name="uname" onblur="check_uname_get()"/>
<span id="name_msg" style="color:red"></span><br/>
密码：<input type="password" name="pwd" onblur="check_pwd(this.value)"/>
<span id="pwd_msg" style="color:red"></span><br/><br/>
<input type="submit" value="注册"/> </form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用ajax对象发送请求</title>
<script type="text/javascript" src="./js/my.js"></script> <script type="text/javascript">
//1.获取ajax对象
var xhr=getXhr();
//2.设置监听器
xhr.onreadystatechange=function(){
//5.处理服务器返回的数据
//响应结束时获取服务器返回的数据
if(xhr.readyState==4){
var text=xhr.responseText;
alert(text);
}
};
//3.初始化
xhr.open('get','checkUname.do',true);
//4.真正发送 get方法传的就是null
xhr.send(null); </script>
</head>
<body> </body>
</html>
function getXhr(){
var xhr=null;
if(window.XMLHttpRequest){//浏览器是否有ajax对象
xhr=new XMLHttpRequest();
}else{//低版本ie
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function getXhr(){
var xhr=null;
if(window.XMLHttpRequest){//浏览器是否有ajax对象
xhr=new XMLHttpRequest();
}else{//低版本ie
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
alert(xhr);
} </script>
</head>
<body>
<a onclick="getXhr()">获取ajax对象</a>
</body>
</html>
<?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">
<servlet>
<servlet-name>ActionServlet</servlet-name>
<servlet-class>web.ActionServlet</servlet-class>
</servlet> <servlet-mapping>
<servlet-name>ActionServlet</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
ajax课1 源码的更多相关文章
- PHP+ajax聊天室源码！支持长轮循跟定时请求两种
var lastID = "1";//声明上次取回的消息的ID var isposted = false; var mGetTime;//设置setTimeout的返回值 // ...
- jQuery源码分析系列
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...
- jquery2源码分析系列
学习jquery的源码对于提高前端的能力很有帮助,下面的系列是我在网上看到的对jquery2的源码的分析.等有时间了好好研究下.我们知道jquery2开始就不支持IE6-8了,从jquery2的源码中 ...
- Catalyst揭秘 Day2 Catalyst源码初探
Catalyst揭秘 Day2 Catalyst源码初探 这节课从源码角度来讲catalyst. 首先有一个观点要澄清,就是技术不是越底层就越是性能和效率更高.因为除了指令执行性能以外,更重要的是架构 ...
- 16Aspx.com源码2013年10月到2013年12月详细
创建时间FROM: 创建时间TO: ExtJS合同管理信息系统源码 2013-12-13 [VS2008] 源码介绍: ExtJS合同管理信息系统源码浏览器兼容:IE,Firefox,谷歌等主 ...
- [转]jQuery源码分析系列
文章转自:jQuery源码分析系列-Aaron 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAaro ...
- zepto源码分析系列
如果你也开发移动端web,如果你也用zepto,应该值得你看看.有问题请留言. Zepto源码分析-架构 Zepto源码分析-zepto(DOM)模块 Zepto源码分析-callbacks模块 Ze ...
- jQuery源码分析系列(转载来源Aaron.)
声明:非本文原创文章,转载来源原文链接Aaron. 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAa ...
- jQuery源码分析系列——来自Aaron
jQuery源码分析系列——来自Aaron 转载地址:http://www.cnblogs.com/aaronjs/p/3279314.html 版本截止到2013.8.24 jQuery官方发布最新 ...
随机推荐
- mac Intellij Idea Tmocat 启动报 Error running Tomcat: /conf/Catalina
原因:主要是tomcat下Catalina目录没有权限导致,将其设置读写权限即可 如果在刚刚启动tomcat时出现以下问题:Error running Tomcat 8.5.31: Error cop ...
- 根据json对象的值替换json数组里的值
功能: var fruitArry=[{name:'durian'},{name:'peach'},{name:'banana'},{name:'pitaya'},{name:'apple'},{na ...
- JavaScript 异步进化史
前言 JS 中最基础的异步调用方式是 callback,它将回调函数 callback 传给异步 API,由浏览器或 Node 在异步完成后,通知 JS 引擎调用 callback.对于简单的异步操作 ...
- vue.js - 解决vue-cli打包后自动压缩代码
一.webpack中引入的压缩代码 /build/webpack.prod.conf.js const OptimizeCSSPlugin = require('optimize-css-assets ...
- 微信小程序：wx.navigateTo中url无法跳转问题（app.json中配置的tabBar与wx.navigateTo中url引用相同页面导致）
今天在做微信小程序时,设置wx.navigateTo页面跳转并传参数,点击始终没有效果,代码如下: //事件处理函数 newsDetail: function (event) { console.lo ...
- spring jdbcTemplate 操作存储过程
Spring的SimpleJdbcTemplate将存储过程的调用进行了良好的封装,下面列出使用JdbcTemplate调用Oracle存储过程的三种情况: 一.无返回值的存储过程调用 1.存储过程代 ...
- thinkCMF----路由跳转
使用ThinkCMF的时候,在模板界面上,可能会用到一些自定义路由,ThinkCMF路由的基本配置与用法: ThinkCMF自带有路由美化的功能: 这种路由都是当你创建栏目或创建文章的时候,自动生成的 ...
- OpenCV Create Circular Mask 圆形遮罩
在OpenCV中,比较常见的是矩形遮罩CvRect,没有专门提供圆形的mask,那么我们只能自己写一个来模拟圆形mask的函数,需要提供的参数为原图的大小,以及圆形mask的圆心位置和半径即可,返回一 ...
- hdu4614 Vases and Flowers【线段树】【二分】
Alice is so popular that she can receive many flowers everyday. She has N vases numbered from 0 to N ...
- 专访msup创始人兼CEO刘付强：追求卓越是数据时代下企业和个人的生存之道
近些年,"信息化带动工业化"策略的深入人心,这为信息技术本身开辟了一个更加广阔的应用天地,在这样的大环境下国内IT培训市场得了飞速发展.那么在云计算.大数据时代,如何让企业的IT团 ...