一.讲义内容
1.本次培训要求介绍
2.Ajax概念
3.Javascript(ECMAScript/ECMA-262) 开发简介
4.CSS (Cascading Style Sheets/层叠样式表单）开发简介
5.DOM (Document Object Model/文档对象模型）开发简介
6.XMLHttpRequest对象介绍
7.本节培训考核内容介绍
8.Q&A
二.训要本次培求介绍1.本次培训主要正对对象为Junior Engineer
2.提高开发人员对Ajax的认识
3.提高开发人员的Javascript的开发能力
4.本次培训的主要目的在于提高Ajax的认识 三.概述
作为开发人员，需要了解AJAX的关键基础，本次培训是针对AJAX 的技术基础做出讲解。
四.Ajax概念 1.Ajax 出现的目的
减少页面刷新的数据流量
提高页面的响应速度
改善界面的操作特性
2.什么是Ajax
Asynchronous JavaScript + XML（异步JavaScript+XML）
3.Ajax优势
异步的方式交互数据
避免的页面的整体刷新
减少网络交互的数据流量，提高响应速度
改善了用户的使用体验
4.Ajax的技术基础Javascript (ECMAScript)
CSS (Cascading Style Sheets/层叠样式表单）
DOM (Document Object Model/文档对象模型）
XMLHttpRequest对象 五.Javascript(ECMAScript/ECMA-262)
Javascript从LiveScript 发展而来
Netscape 2.0 后支持Javascript(1996.3 )
Internet Explorer 3.0 后支持与”JavaScript 类似“的Jscript(1996.8)
ECMAScript 是由ECMA-262标准化的脚本语言的名称。(1997.6)
JavaScript和JScript与ECMAScript兼容，但包含超出ECMAScript的功能。
欧洲计算机制造商协会发表了ECMA-357标准，它是ECMAScript的一个扩延，它也被称为E4X（ECMAScript for XML）(.6)
许多网页浏览器支持ECMAScript
2.Javascript 的特点
Javascript 是脚本解析语言
Javascript 是轻量级的编成语言
Javascript 常常内嵌于网页中
Javascript 的主要作用是与Html交互
JavaScript不同于Java3.Javascript 的语言特性(Client-Side JavaScript )3.1.弱类型(动态类型)
变量不需要明确声明，同一个变量可以接受不同类型的赋值
1 Varage = 26 ; // 数字
2 age = ‘MyBirthdayis 11 , 11 ’; // 字符串
3 age = new ClassA(); // 对象
3.2.解释型
代码不需要预先变异，源代码本身可以执行
代码内嵌于Html中进行解析运行
3.3.对象化编程 (prototypal language )
所谓“对象化编程”，是把 JavaScript 所处理的内容划分成不同的对象，对象内部还可以继续划分，整个编程结构都以对象为出发点，基于对象。
变量，浏览器，表单控件都被以对象的方式进行处理
每个对象有它自己的属性、方法和事件,但是不是所有的对象都有这三个性质，有些没有事件，有些没有属性
String字符串对象。声明一个字符串对象最简单、快捷、有效、常用的方法就是直接赋值。
属性
length用法： < 字符串对象 > .length；返回该字符串的长度。
方法
substring()用法： < 字符串对象 > .substring( < 始 > [, < 终 > ])；
返回原字符串的子字符串，该字符串是原字符串从 < 始 > 位置到 < 终 > 位置的前一位置的一段。 3.3.1Client-Side JavaScript 中的核心对象
Array,Boolean,Date,
Function,Math,Number,Object,String 3.3.2Client-Side JavaScript 附加的客户端对象有
Document,Window,Location,navigator,event,History,Option,Plugin
Anchor,Area,Button,Checkbox,FileUpload,Form,Frame,Hidden,Image,Layer,Link,MimeType,Password,Radio,Reset,screen,Select,Submit,Text,Textarea,
4.Javascript 的语法特性4.1.大小写敏感
关键字、变量、函数名称、以及其他标识符时，必须保持一致的大小写形式 。
html不区分大小写，标签和属性可以任意使用大小写
4.2.分号或换行划分语句
正常情况使用带有分号用于分隔语句，如果语句放置在不同的行中，分号可以省略。
javascript会在换行符前一行结尾处插入分号，使换行符前一行成为一个单独的语句。如果换行符插入的地方并未结束一个单独的语句，就会造成异常
4.3.变量的命名规则
变量名的第一个字母不能是数字,但是可以为下划线符号符号(underscore)_ ,$
if ( typeof $ == 'undefined')$ = function ()
{
alert( " HelloWorld " );
};
$(); 4.4.变量的作用域
4.4.1全局，局部
var str = " All "
if ( typeof $ == 'undefined')$ = function (a,b){
var strA = " Aof$ "
strB = " Bof$ "
alert(strA);alert(strB);
};
$()
if ( typeof strA == 'undefined')
alert('undefined');
else
alert(strA);
if ( typeof strB == 'undefined')
alert('undefined');
else
alert(strB); 4.4.2.对象内部私有，对象属性，对象实例
function ClassOne(name){
var strClassInformation = 'Empty' + name;
this .ClassName = name;
this .ToString = function (){
return " ClassNameis: " + this .ClassName;
}
}
var classA = new ClassOne('A');
alert( typeof (classA));
alert(classA.ClassName);
alert(classA.ToString());
if ( typeof ClassOne.strClassInformation == 'undefined')
alert('undefinedstrClassInformation');
else
alert(ClassOne.strClassInformation); 4.3.运算符
Javascript 提供有算术，逻辑， 赋值运算符
对于“+” 运算符 具备有字符串连接和数字加法运算的功能
alert( 1 + 2 );
alert( " 1 " + 2 );
alert( " 1 " + " 2 " );
alert( " 1+2= " + 1 + 2 + " . " )
alert( " 1+2= " + ( 1 + 2 ) + " . " ) 4.4.函数
函数创建方式：定义方式 和 附加的方式
函数参数设定为形势参数，可以按照需要定义函数参数表
对象内部的函数可以被设定为私有
var FunctionOne = function (arr1){
alert(arr1);
paraLength = FunctionOne.arguments.length;
}
function FunctionTwo(arr1,arr2,arr3,arr4){
alert(arr1);
alert(arr2);
alert(arr3);
alert(arr4);
}
FunctionTwo( 0 , 1 , 2 );
FunctionOne( 0 , 1 );
alert( " FunctionOne: " + paraLength); 4.5.事件
Javascript 基于对象的基本特征，采用事件驱动(event-driven)。使得在Html 页面环境中，对于动作的响应简单化。
Client-Side JavaScrip 主要的事件时整对于浏览器和表单控件的各种动作响应
对象事件的处理通常由函数(Function)担任。其基本格式与函数全部一样
在处理中对于事件处理的方式有：附加于对象的事件
< bodyonload = " alert('onload1'); " >
< scriptlanguage = " JavaScript " >
window.onload = function (){
alert('onload 2 ');
}
</ script >
</ body >5.Javascript 的使用方式
行内部嵌套
页面内部包含
外部文件包含
六.CSS (Cascading Style Sheets/层叠样式表单）6.1.CSS的作用
是一种为HTML提供增强补充服务的技术，可对每一个HTML的置标(tag)做补充修饰
提供了将页面的样式修饰功能于HTML分离的功能
丰富了HTML的表现形势
6.2.CSS的语法特性
6.2.1.CSS的定义是由三个部分构成：
选择符（selector）
属性（properties）
属性的取值（value）
6.2.2.基本格式如下 ：selector { property: value}
6.2.3.定义方式
单一定义 ：body { color: black}
按组定义：h1, h2{ color: green }
按类定义：table.TypeA { text-align: right}
.TypeB{ text-align: center}
按ID定义：#TypeIDA{background-color:transparent}
包含方式定义：table a{font-size: 12px}
基于伪selector 定义：*.first-letter{color:red} a:hover:{color:yellow;}
6.2.4.使用方式
行内部嵌套
页面内部包含
外部文件包含
七.DOM(Document Object Model/文档对象模型） 7.1.DOM的作用
DOM是能够提供透明的文档结构，可以通过编程的方式处理该文档结构
Web页面中可以通过DOM表示，由对应的元素和节点构成
在Web页面中，通过Javascript内嵌的对象模型可以访问web上的全部信息
7.2.编程操作DOM
7.2.1.查询DOM对象
通过节点ID访问对象(节点必须已经指定过唯一的ID名）
通过节点遍历的方式访问(如果对于节点没有设定ID名）
对于可访问节点，可以所属的Javascript对象模型进行操作
< divid = " content " >
< scripttype = 'text / javascript' >
window.onload = function (){
var obj = document.getElementById( " content " );
obj.innerHTML = " Helloworld " ;
var objChild = document.createElement( " div " );
objChild.innerHTML = " Helloworld=2 " ;
obj.appendChild(objChild);
}
</ script > 7.2.2.节点操作
可以修改节点的属性内容（必须是对应节点具备的属性）
可以在节点中创建新的节点内容（添加新的html tag 内容）
通过innerHTML使用文本内容的方式修改节点所包含的内容
< divid = " content " >
< scripttype = 'text / javascript' >
window.onload = function (){
var obj = document.getElementById( " content " );
obj.innerHTML = " Helloworld " ;
var objChild = document.createElement( " div " );
objChild.innerHTML = " Helloworld=2 " ;
obj.appendChild(objChild);
}
</ script >
八.XMLHttpRequest对象8.1.XMLHttpRequest的作用
提供了异步的方式取得数据
XMLHttpRequest对象不是Web浏览器标准的DOM扩展，不同的浏览器有不同的支持方式
XMLHttpRequest在不同的浏览器的浏览其中创建方式不同
function createXmlHttpRequest(){
var req = null ;
if (window.XMLHttpRequest){
req = new XMLHttpRequest();
} else if (window.ActiveXObject){
req = new ActiveXObject( " Microsoft.XMLHTTP " );
}
return req;
} XMLHttpRequest对象通过XMLHttpRequest 可以避免使用iframe的方式进行数据请求
XMLHttpRequest 提供了不同的事件和属性来响应处理（如：onreadystatechange）
var req = createXmlHttpRequest;
if (req){
req.onreadystatechange = processStateChange;
req.open( " GET " ,url, true );
req.send( null );
}
function processStateChange(){
var ready = req.readyState;
if (ready == READY_STATE_COMPLETE){
..;
}
}
九.Q&A9.1.Ajax的特点?
9.2.Javascript的语言特性?
9.3.异步处理的关键?
9.4.Others?
十.本节培训考核内容介绍1.针对与本次培训的内容，本次考核的要求如下：
每个人提交一个简单的XMLHttpRequest 数据请求显示数据的Html Page
2.开发的内容为：
从一个指定文本文件中读取信息，每行150个字符，每一行表示一条记录,文件格式：
1-5 :ID,
6-30 :UserName;
31-38:UserBirthday；
39-90:UserEmail;90-190:Discription
将文档中的内容显示出来
3.开发使用语言：JavaScript
4.开发要求：独立完成，完成内容：程序代码，必须在多浏览器下可以使用
如果觉得《培训讲义》对你有帮助，请点赞、收藏，并留下你的观点哦！
