21天学通Java学习笔记-Day13(javascript-ajax)
HTML & CSS : 不知道怎么做笔记，不知道怎么系统学习！
JavaScript：
两种表现形式：
1：直接在 HTML 中嵌入 javascript 脚本：
demo.html
<html>
<head>
<title>
test
</title>
</head>
<body >
<script type="text/javascript">
alert("hello javascript wolrd!!");
</script>
</body>
</html>
2：将 javascript 代码放在 js 文件中：
demo.html
<html>
<head>
<title>
test
</title>
</head>
<body >
<script type="text/javascript" src="demo.js">
</script>
</body>
</html>
demo.js
alert("hello javascript wolrd!!");
JavaScript 是弱类型语言，不需要声明数据类型，声明变量要用关键字 var :
var name = "joe"; //字符串类型
var age = 12; //整数类型
也可以连着声明和赋值：
var name = "joe" , age = 12 ;
javascript 没有声明类型所以变量可以放任何类型：
var name = "joe";
name = 12; //会覆盖掉原来的"joe"
javascript 基础类型：
数值：
整数 var a = 123;
浮点 var b = 12.34;
负数 var c = -23;
字符串： var d = "hello";
布尔值： var e = true 或者 false
数组：var f = new Array( ); 也可以规定数组长度 var f = new Array( 5 );
f[ 0] = 1;
f[ 1] = 2;
..................
数组简化定义：
var f = [ ];
数组也可以直接赋值：
var f = new Array(1, 2, 3, 4);
数组甚至可以呼和类型：
var f = new Array("a", 2, false);
关联数组(不以下标作为索引)：
var g = new Array( );
g["name"] = "joe";
g["age"] = 12;
g["living"] = false;
//关联数组提高可读性
算术操作符：
+(加) , -(减) , *(乘) , /(除) , %(求模)
javascript 支持 ++(自增) , --(自减)
javascript 也支持快捷操作：
a += 1;
a *= 1;
a -= 1;
a /= 1;
a %= 1;
javascript 比较操作符：
== 等于
< 小于
> 大于
<= 小于等于
>= 大于等于
!= 不等于
javascript 逻辑操作符：
&& 逻辑与
|| 逻辑或
! 逻辑非
循环分支语句，if else , while , do while , for 与java用法一样
javascript 函数，定义函数要用关键字 function：（函数可以带有参数）
function show( ){
var bea = Array("name" , "age" );
for( var a = 0; a<bea.length; a++) {
alert(bea[ a]);
}
}
在函数中的变量使用 var 就会视为局部变量，如果没有 var 就视为全局变量
javascript 可以直接 new 一个对象并且赋值给一个变量
var a = new e;
javascript 内置对话框：
alert( ); 对话框
confirm( )； 确认对话框
<html>
<head>
<script type="text/javascript">
function confirmit(){
if(confirm("are you ok?")){
document.test.submit();
}
}
</script>
</head>
<body>
<form name="test" action="" method="post" >
<input type="button" value="delete" onclick="javascript:confirmit()" name="aaa">
</body>
</html>
form 表单 onclick="......"事件在点击后发生
DOM 的一些内置对象：
window 当前窗口
window.onload = function(){ }; //当页面全部加载以后再执行里面的代码
<html>
<head>
<script type="text/javascript">
window.onload = function(){
alert("hello javascript wolrd!!");
};
</script>
</head>
<body>
HELLO
</body>
</html>
document 当前文档对象
DOM 的一些方法：
getElementById( id); //返回一个给定 id 属性值的元素节点相对应对象。
代码：
<html>
<head>
<title>
test
</title>
</head>
<body >
<h1>hello</h1>
<ul id="uu">
<li>aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li>
<li>ddddd</li>
</ul>
<script type="text/javascript">
alert(typeof document.getElementById("uu")); //typefo：返回对象类型 ; documen：页面本身对象
</script>
</body>
</html>
getElementsByTagName( ); //返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。
代码：
<html>
<head>
<title>
test
</title>
</head>
<body >
<h1>hello</h1>
<ul id="uu">
<li>aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li>
<li>ddddd</li>
</ul>
<script type="text/javascript">
var a = document.getElementsByTagName("li");
for(var i=0;i<a.length;i++){
alert(typeof a[i]); //会跳出三个对话框
}
</script>
</body>
</html>
getAttribute( ); //获取属性值。
代码：
<html>
<head>
</head>
<body>
<p id="intro" title="tiin">
Hello World!!
</p>
</body>
<script type="text/javascript">
var a = document.getElementById("intro");
var t = a.getAttribute("title");;
alert(typeof a);
</script>
</html>
<html>
<head>
<script type="text/javascript">
function check(){ //定义方法
if(document.test.t.value==""){ //判断页面对象document 中的 test.t 的值是否是空
alert("NOT NULL!!");
return false; //返回flase
}
return true; //返回true
}
</script>
</head>
<body>
<form name="test" action="" method="post" onsubmit="return check()">
<input type="text" name="t">
<input type="submit" value="ok">
</body>
</html>
form表单 action=""提交后转到哪个页面 method="post"提交方式 onsubmit ="return true(true表示提交，flase表示不提交)"必须完成里面内容才提交成功
<html>
<head>
<script type="text/javascript">
function check(){
if((test.t.value.length<3)||(test.t.value.length>6)){ //直接获取form的name和input的name
alert("t {3-6}");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="test" action="" method="post" onsubmit="return check()">
<input type="text" name="t">
<input type="submit" value="ok">
</body>
</html>
<html>
<head>
<script type="text/javascript">
function check(){
if((test.t.value.length<3)||(test.t.value.length>6)){
document.getElementById("usernameErr").innerHTML = "<font color='red'>请输入正确的用户名,用户名长度为3-6位！</font>"; //innerHTML 输出HTML内容标签
test.t.focus(); //失去焦点
return false;
}
return true;
}
</script>
</head>
<body>
<form name="test" action="" method="post" onsubmit="return check()">
<input type="text" name="t">
<input type="submit" value="ok">
<span id="usernameErr"></span>
</body>
</html>
Ajax：
HMLHttpRequest：
创建实例：
var xhr = new XMLHttpRequest( );
IE浏览器中创建 ActiveX 对象：
var xhr =new ActiveXObject("Microsoft.XMLHTTP");
检测是否存在 ActiveX：
if( window.ActiveXObject ) {
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
将检测对象打包成可复用函数：
function getHTTPObject( ) {
var xhr = false;
if( window.ActiveXObject ) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}else{
xhr = new XMLHttpRequest( );
}
return xhr;
}
var request = getHTTPObject( ); //赋给变量，方便调用
完美创建 XMLHttpRequest :
var xhr;
var myxhr;
function getHttpObject(){
xhr = false;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
xhr = new ActiveObject("Msxml12.XMLHTTP");
}catch(e){
try{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xhr = false;
}
}
}
return xhr;
}
创建 XMLHttpRequest 实例后，实现与服务器进行通讯，包含三个关键部分：
( 1 ) onreadystatechange 事件处理函数
var myxhr = getHttpObject();
if( myxhr ) {
myxhr.onreadystatechange = huidiaohanshu; //一个回调函数，不需要括号
}
( 2 ) open 方法
open方法必须要有三个参数( 请求类型，服务器上文件的位置，true )
请求类型 分为：POST， GET（从服务器检索文件用GET，向服务器发送数据用POST）
服务器文件位置 URL
true，表示异步传输
url = "test.txt";
myxhr.open( "GET", url, true );
( 3 ) send 方法
请求类型是GET，参数null
myxhr.send(null);
接收响应：
readyState 属性表示 Ajax 请求的当前状态。
0 代表未初始化。还没有调用 open 方法。
1 代表正在加载。open 方法已经调用，单 send 方法还没有被调用。
2 代表已经加载完毕。send 方法已经被调用，请求已经开始。
3 代表交互中。服务器正在发送响应。
4 代表完成。响应发送完毕。
function displayResponse(myxhr){
if(myxhr.readyState == 4){
//加载完成
}
status 属性表示服务器发送状态。
404 表示找不到服务器资源。
403 表示禁止访问。
500 表示内部服务器出错。
200 表示一切正常。
function displayResponse(myxhr){
if( myxhr.readyState == 4 ){
if( myxhr.status==200 ){
//服务器正常
}
}
responseText
服务器返回字符串，返回时HTML还是XML取决于服务器
responseXML
服务器返回的是XML
XML 是一种通用的标记语言，用于对数据进行描述。
XML 属于一种描述性语言，文档结构需要遵循一定的规范，但所用的词语没有任何限制。
例子代码：
<?xml version="1.0" encoding="utf-8" ?>
<person>
<name>Joe</name>
<age>20</age>
<email>[email protected]</email>
</person>
第一行<?xml version="1.0" encoding="utf-8" ?>是XML声明，制定了版本和字符编码。
xml 的标签都是成对出现。
xml 不能进行任何操作，用来储存数据。
读取 XML 内容操作：（包含test1.xml，test2.xml，test3，xmldemo.html，）
xmldemo.html 代码：
<html>
<head>
<script type="text/javascript" src="xmltest.js"></script>
</head>
<body>
<h1>People</h1>
<ul>
<li>
<a href="test1.xml" onclick="grabFile(this.href);return false;">Andy</a>
</li>
<li>
<a href="test2.xml" onclick="grabFile(this.href);return false">Tom</a>
</li>
<li>
<a href="test3.xml" onclick="grabFile(this.href);return false">Suy</a>
</li>
</ul>
<div id="xxx"></div>
</body>
</html>
xmltest.js 代码：
var xhr;
var myxhr;
function getHttpObject(){
xhr = false;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
xhr = new ActiveObject("Msxml12.XMLHTTP");
}catch(e){
try{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xhr = false;
}
}
}
return xhr;
}
function grabFile(file){
myxhr = getHttpObject();
if(myxhr){
myxhr.onreadystatechange = function(){
parseResponse(myxhr);
}; //指定一个回调函数，处理从服务器返回的结果.
url = file;
myxhr.open("GET",url,true); //准备发送,,true表示同步处理
myxhr.send(null); //发送请求
}
}
function parseResponse(myxhr){
if(myxhr.readyState == 4){
if(myxhr.status == 200 || myxhr.status == 304){
var data = myxhr.responseXML;
var name = data.getElementsByTagName("name")[0].firstChild.nodeValue
var website = data.getElementsByTagName("website")[0].firstChild.nodeValue
var email = data.getElementsByTagName("email")[0].firstChild.nodeValue
var a= "<font color='red'>";
var b = "</font>";
document.getElementById("xxx").innerHTML=a+name+"<br/>"+website+"<br/>"+email+b;
}
}
}
test1.xml 代码：
<?xml version="1.0" encoding="utf-8" ?> <person> <name>Andy</name> <website>www.andy.com</website> <email>[email protected]</email> </person>
test2.xml 代码：
<?xml version="1.0" encoding="utf-8" ?> <person> <name>Tom</name> <website>www.tom.com</website> <email>[email protected]</email> </person>
test3.xml 代码：
<?xml version="1.0" encoding="utf-8" ?> <person> <name>Suy</name> <website>www.suy.com</website> <email>[email protected]</email> </person>
以上代码要放进服务器里跑（比如：Apache,Tomcat）
简单验证名字是否重复（包含test.html 和 test.txt 两个文件）：
test.html代码：
<html>
<head>
<script type="text/javascript">
var xhr;
var myxhr;
function getHttpObject(){
xhr = false;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
xhr = new ActiveObject("Msxml12.XMLHTTP");
}catch(e){
try{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xhr = false;
}
}
}
return xhr;
}
function grabFile(file){
myxhr = getHttpObject();
if(myxhr){
myxhr.onreadystatechange = function(){
displayResponse(myxhr);
}; //指定一个回调函数，处理从服务器返回的结果.
url = file;
myxhr.open("GET",url,true); //准备发送,,true表示同步处理
myxhr.send(null); //发送请求
}
function displayResponse(myxhr){
if(myxhr.readyState == 4){
// alert(myxhr.status);
if(myxhr.status == 200 || myxhr.status == 304){
// alert(myxhr.responseText);
var a = myxhr.responseText; //从ajax引擎中取出结果
var b = document.getElementById("ues").value;
if( a==b){
//alert("名字重复");
document.getElementById("xxx").innerHTML = "<font color='red'>重复！</font>";
}else{
//alert('名字不重复');
document.getElementById("xxx").innerHTML = "<font color='red'>不重复！！</font>";
}
}
}
}
}
</script>
<title> test ajax </title>
</head>
<body>
<form action="" method="post" >
<input type="text" name="t" id="ues">
<input type="button" value="ok" onclick="grabFile('test.txt');"> //选择 button , 使用 submit 会失效
<span id="xxx"></span>
</body>
</html>
test.txt 内容：
aaa
以上代码放在服务器里跑（比如：Apache,Tomcat）