JavaWeb复习07、08

CH07-JavaScript

概念

一种动态、弱类型、基于原型的语言，支持内置类，是广泛用于客户端开发的一种脚本语言

使用方式：

  • 网页内部：
1
2
3
<script>
    codes
</script>
  • 网页外部：
1
<scrpit scr="****.js"></scrpit>

语法

变量

JavaScript是弱类型的语言，基本变量通过var声明

1
var 变量名

JavaScript是一种动态类型语言，变量可以随时更改类型。JavaScript 引擎的工作方式是：先解析代码，获取所有被声明的变量，然后再一行一行地运行。导致所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升

数据类型

  • 数值（基本类型）：整数和小数
  • 字符串（基本类型）
  • 布尔值（基本类型）
  • undefined
  • null
  • 对象（合成类型）：对象、数组、函数

NaN是一个特殊值，表示“非数字”，数据类型依然属于数值，NaN不等于任何值包括自身，在布尔运算中当为false

对象

使用方法：

  1. 创建对象然后添加属性和方法
  2. 创建带有属性和方法的对象
1
2
3
4
5
6
7
//方法一
var hotel = new Object();
hotel.name='111';
hotel.rooms=40;
hotel.checkAvaliability = function(){
    return this.rooms;
}
1
2
3
//使用对象
hotel.name='222';
hotel['name']='333';

函数

  • function关键字
  • 没有返回值类型的声明
  • 如果有形参，形参没有类型的声明

特殊用法：

  • 函数表达式（匿名函数）
1
2
3
4
var area = function(width,height){
    return width*height;
}
var size = area(3,4);
  • 立即执行匿名函数
1
2
3
4
5
var area = (function(){
    var width = 3;
    var height = 4;
    return height*width;
}());

数组

两种创建方式：

  • 字面
1
2
var colors;
colors = ['white','black','custom'];
  • new
1
var colors = new Array('white','black');

严格等于和严格不等于

严格等于：===：false===0为假

严格不等于：!==

内置对象

  • 浏览器对象模型BOM
  • 文档对象模型DOM
  • 全局JavaScript对象

CH08-JavaScript进阶&AJAX

BOM中常用对象

DOM树的概念

  • 当浏览器加载Web页面时，在内存中创建页面模型-DOM树对象模型
  • JavaScript操作HTML页面时，通过一系列DOM API实现
  • DOM树的每个节点都是对象，拥有方法和属性，可以分为文档节点、元素节点、属性节点、文本节点四大类型
  • 操作DOM树：首先定位到要操作的元素对象节点，然后操作其文本内容、子元素或属性
1
2
3
4
5
6
7
8
9
10
//访问元素
//单一元素
document.getElementById('id');//id属性选择元素
document.querySelector('css selector');//css属性选择元素
document.getElementByClassName('class name');//class属性选择元素

//一个或多个元素,返回一个数组
getElementsByClassName('class');
getElementByTagName('tag');//选择标签
querySelectorAll('css selector');

访问和更新元素内容

可以利用如下API从某个元素开始遍历元素：

  • parentNode：父元素
  • previousSibling：上一个兄弟元素
  • nextSibling：下一个兄弟元素
  • firstChild
  • lastChild

获取、更新元素内容：

  • nodeValue：文本节点返回其内容，元素节点返回null
  • textContent：IE8不支持
  • innerText：
  • createElement()、createTextNode()、appendChild()、removeChild()
  • innerHTML：

事件的处理

DOM模型针对浏览器和网页内容规定了一系列的用户动作行为，称为网页事件。

  • 浏览器事件
  • 键盘事件
  • 鼠标事件
  • 焦点事件
  • 表单事件
  • DOM事件

事件处理

事件处理步骤：选定元素、事件绑定、事件处理

事件绑定的方法：

  1. HTML方法绑定事件：
1
<input type="text" id="username" onblur="checkUsername()" />
  1. 传统DOM绑定：
1
2
var el = document.getElementById('username');
el.onblur=checkUsername;
  1. DOM监听器：
1
2
3
el.addEventListener('blur',checkUsername,false);
//带参数：
el.addEventListener('blur',function(){checkUsername(5);},false);

AJAX

Web2.0随着社交网络平台的诞生而出现，平台/公司除了向用户提供内容外，更多的是提供平台来共享用户生产的内容，并让用户间可以交互。网络不再是只读的，而是可读可写的网络。

基本概念

Asynchronous JavaScript And XML

  • Asynchronous：异步，客户端和服务端的通信方式
  • JavaScript：一种客户端脚本语言(HTML、CSS、DOM)
  • XML：数据的表示方式(JSON)

同步通信方式：即典型的请求响应模型。在传统的Web应用模型下，大部分的用户操作都会发送一个HTTP请求给服务器，然后服务器开始处理(接收数据，执行业务逻辑，访问数据库等)，最后向浏览器返回HTML页面。

异步发送请求，消除了传统的“发送请求－等待－发送请求－等待”的特性，极大的提高了用户体验，实现这种通信方式的核心技术是浏览器的XMLHttpRequest对象。

XMLHttpRequest对象

XMLHttpRequest对象是实现AJAX技术的核心技术，是一种支持异步通信的机制。最早是在Microsoft的IE5中以Active X组件形式实现的。

1
2
//创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

常用方法：

方法 描述
abort() 停止当前请求
getAllResponseHeaders() 将响应头作为键值对返回
getResponseHeader(“header”) 返回指定头部字段的值
open(“method”,“url”) 建立对服务器的调用，method参数表示请求方法。url表示请求的资源。第三个参数boolean值默认为true，表示异步
send(content) 向服务器发送请求，如果是异步，则会立即返回，否则会等待
setRequestHeader() 设置请求头中某个字段的值

常用的事件和属性：

属性或事件 描述
onreadystatechange 请求状态改变时会触发这个事件，通常调用一个函数
readyState 请求状态。0=未初始化；1=正在加载；2=已加载；3=交互中；4=完成
responseText 服务器的响应，表示为一个字符串
responseXML 服务器的响应，用xml封装，可以被解析为dom
status 服务器状态码 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//示例代码
//异步请求验证用户名是否存在
function checkIsExit(usernameStr){
    xhr=new XMLHttpRequest();
    xhr.onreadystatechange = usernameExitProcess;
    xhr.open('GET','usernameExit?username='+usernameStr);
    xhr.send(null);
}

function usernameExitProcess(){
    if(xhr.readyState === 4) {
        if(xhr.status === 200) {
            var responseText = xhr.responseText;
            if(responseText=="No"){
                isUsernameValid=true;
                if(checkPasswordValid())//检查密码状态是否合法
                {
                    tips.innerHTML = '';
                    tips.innerHTML += '<h4 style="line-height:25px ;">欢迎注册!</h4>';
                    console.log("检查用户名重复");
                }

            }else{
                isUsernameValid=false;
                tips.innerHTML='';
                tips.innerHTML+='<h4 style="line-height:25px ;color: red;">用户名已经存在!</h4>';
            }
        }
    }
}