1.js
1)三种基本类型：
var num=100;
var str="哈哈";
var flag=true;
2）创建函数的三种方式：
正常模式：
function add(num1,num2){
return num1+num2;
}
构造器模式：
var add=new Function("num1","num2","return num1+num2");
匿名方式：
var add=function(num1,num2){return num1=num2;}
3)js中的对象
Date;String;Array;Math;自定义对象；window对象；status对象，location对象，history对象
<script type="text/javascript">
//Date
/* var nowStr=new Date().toLocaleDateString();
window.alert(nowStr); */
//String
/* var str="String";
var length=str.length;
window.alert(length); */
//Array
/* var array=new Array("语文","数学","英语",true,123);
for(var i=0;i<array.length;i++){
document.write(array[i] + " ");
} */
//Math
/* for(var i=1;i<=10;i++){
document.write(Math.floor(Math.random()*9)+1 + "<br/>");
} */
//自定义对象
function Person(id,name,sal){
this.id=id;
this.name=name;
this.sal=sal;
}
var p =new Person(1,"小平",70000);
document.write("编号："+p.id+"<br/>");
document.write("姓名："+p.name+"<br/>");
document.write("薪水："+p.sal+"<br/>");
//window对象
/* var url = "04_images.html";
window.open(url); */
//status对象,将当前时间设置到状态栏
/* var nowStr = new Date().toLocaleString();
window.status = nowStr; */
//location对象,模拟用户在地址栏输入url访问其它页面的情况
/* var url="04_images.html";
window.location.href=url; */
//history
/* window.history.go(1); */
</script>
2.ajax
创建ajax通用函数
function createAJAX(){
var ajax = null;
try{
ajax = new ActiveXObject("microsoft.xmlhttp");
}catch(e1){
try{
ajax = new XMLHttpRequest();
}catch(e2){
alert("你的浏览器不支持ajax，请更换浏览器");
}
}
return ajax;
}
get方式发送数据给servlet
需要注意点：get方式数据传输是靠url,所有传输中文时，需要转码，encodeURI();,之后到了后台需要将数据转为byte以ISO8859-1方式，再变为utf-8模式字符串
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在</title>
</head>
<body>
<form>
用户名[GET]：<input id="usernameID" type="text" name="username" maxlength="4"/>
光标移出后，立即检查结果
</form>
<hr/>
<span id="resID"></span>
<script type="text/javascript">
//创建AJAX异步对象，即XMLHttpRequest
function createAJAX(){
var ajax = null;
try{
ajax = new ActiveXObject("microsoft.xmlhttp");
}catch(e1){
try{
ajax = new XMLHttpRequest();
}catch(e2){
alert("你的浏览器不支持ajax，请更换浏览器");
}
}
return ajax;
}
</script>
<script type="text/javascript">
//定位文本框，同时提供焦点失去事件
document.getElementById("usernameID").onblur = function(){
//获取文本框中输入的值
var username = this.value;
//如果用户没有填内容
if(username.length == 0){
//提示
document.getElementById("resID").innerHTML = "用户名必填";
}else{
//对汉字进行UTF-8(U8)的编码
username = encodeURI(username);
//NO1)
var ajax = createAJAX();
//NO2)
var method = "GET";
var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime()+"&username=" + username;
//alert(url);
ajax.open(method,url);
//NO3)
ajax.send(null);
//--------------------------------------------------------等待
//NO4)
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
//NO5)
var tip = ajax.responseText;
//NO6)
document.getElementById("resID").innerHTML = tip;
}
}
}
}
}
</script>
</body>
</html>
post方式发送数据给servlet
需要注意点：因为ajax传数据到后台默认是get方式，一般会访问完url就就结束，所以为了能将content数据通过send发过去，需要给ajax设置请求头ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在</title>
</head>
<body>
<form>
用户名[POST]：<input id="usernameID" type="text" name="username" maxlength="4"/>
光标移出后，立即检查结果
</form>
<hr/>
<span id="resID"></span>
<script type="text/javascript">
//创建AJAX异步对象，即XMLHttpRequest
function createAJAX(){
var ajax = null;
try{
ajax = new ActiveXObject("microsoft.xmlhttp");
}catch(e1){
try{
ajax = new XMLHttpRequest();
}catch(e2){
alert("你的浏览器不支持ajax，请更换浏览器");
}
}
return ajax;
}
</script>
<script type="text/javascript">
//定位文本框，同时提供焦点失去事件
document.getElementById("usernameID").onblur = function(){
//获取文本框中输入的值
var username = this.value;
//如果用户没有填内容
if(username.length == 0){
//提示
document.getElementById("resID").innerHTML = "用户名必填";
}else{
var ajax = createAJAX();
var method = "POST";
var url = "${pageContext.request.contextPath}/UserServlet";
//alert(url);
ajax.open(method,url);
//需要设置ajax请求头，因为这是ajax模式是get方式请求，访问完uri后就不访问,且会自动将请求体重汉字自动转换为UTF-8
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")
var content="username="username;
//NO3)
ajax.send(content);
//--------------------------------------------------------等待
//NO4)
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
//NO5)
var tip = ajax.responseText;
//NO6)
document.getElementById("resID").innerHTML = tip;
}
}
}
}
}
</script>
</body>
</html>
时间： 2024-12-21 22:39:16