一.JavaScript
JavaScript是一种网页的编程技术,实现页面的动态交互效果,是一种基于对象和事件驱动的解释性语言。
Javascript的写法
方式一:直接定义在事件中。
方式二:方法写在 <head>里的 <script> 中。
方式三:将代码写在单独的 js文件中,在 html 页面的<head> 里使用 <script> 引入。
function myFunction() { vax x = //声明一个变量 if() {} //或者需要做的动作。 }
(1)用法:脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。通常的做法是把函数放入 <head> 部分中,或者放在页面底部。
这样就可以把它们安置到同一处位置,不会干扰页面的内容。
(2)变量:使用var关键词来声明变量。
(3)对象:是拥有属性和方法的数据。
(4)函数:是包裹在花括号中的代码块,前面使用了关键词 function:
语法
function functionname() { 执行代码 }
带参数的函数:在调用函数时,您可以向其传递值,这些值被称为参数。这些参数可以在函数中使用。
可以发送任意多的参数,由逗号 (,) 分隔:myFunction(argument1,argument2)
当声明函数时,请把参数作为变量来声明:
function myFunction(var1,var2) { 代码 }
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。
带有返回值的函数:通过使用 return 语句就可以实现。
在使用 return 语句时,函数会停止执行,并返回指定的值。
语法:
function myFunction() { var x=5; return x; }
(5)函数定义:
function functionName(parameters) { 执行的代码 }
alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。
onclick 事件是众多事件之一。
document.getElementById("some id")。这个方法是 HTML DOM 中定义的。
操作HTML元素:如需从 JavaScript 访问某个HTML元素,您可以使用 document.getElementById(id) 方法。 请使用 "id" 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容。
JavaScript方式:
function myFunction() { var obj=document.getElementById("h01"); obj.innerHTML="Hello jQuery"; } onload=myFunction;
jQuery 方式:
function myFunction() { $("#h01").html("Hello jQuery"); } $(document).ready(myFunction);
JavaScript作用主要包括:
(1)数据验证(指的是,对表单中的数据进行合法性验证,只有验证通过才能提交)。
(2)操作网页,实现一些动态效果。
(3)访问浏览器,获得浏览器的一些信息。(比如获得浏览器的类型、版本等)。
(4)ajax核心技术之一。
特点:基于对象,不是纯粹的面向对象的语言,比如,没有定义类的语法,也没有继承和多态。
解析方式:JOSNObject插件, Jackson插件
两种方式:
(1)js方式;
(2)div,写class方式;
关系到后台的:写js,没关系到后台的:写class。
登陆例子:Ajax与jQuery交互
火狐调试:console.info打印信息。
解决编码问题:1.页面的编码,2.javascript的编码,3.项目的编码,4.tomcat编码,数据库编码
服务器的交互:数据的交互---JSP、AJAX。
二.Ajax
1、什么是ajax
asynchronous javascript and xml(异步的javascript和xml)。
是一种用来改善用户体验的技术,其实质是利用浏览器内置的一个特殊的对象(XMLHttpRequest,一般称之为ajax对象)。
异步地(ajax对象在向服务器发送请求时,浏览器并不会销毁当前页面,用户仍然可以对当前页面做其它的操作)向服务器发送请求。
服务器送回部分数据(不是一个完整的新的页面,而是文本或者xml文档),在浏览器端,可以利用这些数据部分更新当前页面,
整个过程页面无刷新,不会打断用户的操作。
2、ajax对象
(1)如何获得ajax对象
XMLHttpRequest没有标准化,要区分浏览器
function getXhr(){ var xhr = null; if(window.XMLHttpRequest){
//非ie浏览器
xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHttp'); } return xhr; }
(2)属性
a.onreadystatechange:绑订一个事件处理函数,该函数用来处理readystatechange事件。ajax对象的readyState属性发生改变,比如从0-->1,则会产生readyStatechange事件。
b.responseText:获得服务器返回的文本数据。
c.responseXML:获得服务器返回的xml文档。
d.status: 获得状态码。
e.readyState:一共有5个值,分别是0,1,2,3,4,表示ajax对象与服务器通讯的状态。其中,4表示ajax对象已经获得了服务器返回的所有的数据。
3、编程步骤
step1:获得ajax对象比如:var xhr = getXhr();
step2:使用ajax对象发请求
(1)发送get请求
xhr.open('get','check_username.do?username=zs',true); 说明: true:表示异步请求(ajax对象发请求时,用户可以对当前页面做其它的操作)。 false:表示同步请求(ajax对象发请求时,浏览器会锁定当前页面,用户只能等待)。 xhr.onreadystatechange=f1; xhr.send(null);
(2)发送post请求
xhr.open('post','check_username.do',true); xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); xhr.onreadstatechange=f1; xhr.send('username=zs');
注意:
a.与get请求不同,请求参数要放到send方法里面。
b.因为按照http协议的要求,发送post请求时,应该发送一个content-type消息头。而xhr对象在默认情况下,不会发送这个消息头,所以,需要调用setRequestHeader方法来添加。
step3:编写服务器端的处理程序,跟以前相比,有一点点改变,就是一般不需要返回一个完整的页面,只需要返回部分的数据。
step4:编写事件处理函数
function f1(){ if(xhr.readyState == 4){ var txt = xhr.responseText; dom操作.. } }
4、编码问题
(1)发get请求
a.乱码问题产生的原因:ie浏览器内置的ajax对象会使用"gbk"对中文参数进行编码,而其它浏览器内置的ajax对象会使用"utf-8"对中文参数进行编码,服务器端,默认会使用"iso-8859-1"去解码。
因为编码与解码所使用的字符集(编码格式)不一致,所以,会出现乱码问题。
b.解决:
step1:设置服务器使用指定的字符集去解码:比如,可以修改tomcat的server.xml配置文件,修改之后要重新启动tomcat。URIEncoding="utf-8" : 告诉服务器,对于所有的get请求,默认使用"utf-8"去解码。
step2:使用encodeURI函数对请求地址进行编码。encodeURI函数会使用"utf-8“进行编码。
(2)发post请求
a.乱码问题产生的原因:所有浏览器内置的ajax对象都会使用"utf-8"对中文参数进行编码,而服务器默认情况下,会使用"iso-8859-1"进行解码。
b.解决request.setCharacterEncoding("utf-8");
5、缓存问题
a.当发送get请求时,ie浏览器内置的ajax对象会检查请求地址是否访问过,如果访问过,则不再向服务器发送请求。
b.解决方式:
方式一:在请求地址后面添加一个随机数,比如:xhr.open('get','getNumber.do?' + Math.random(),true);
方式二:使用post方式发请求。
6、ajax的优点
(1)页面无刷新,不打断用户的操作。
(2)按需获取数据,客户端(浏览器)与服务器端之间数据传输量大大减少。
(3)是一种标准化的技术,不需要用户下载任何的插件。
三.JSON (javascript object notation)
1、json是什么
是一种轻量级的数据交换技术规范。(因为借鉴了javascript对象创建的一种语法结构,故命名为json)。
(1)数据交换:将数据转换成一种中间的与平台无关的数据格式(比如xml或者json字符串)发送给另外一方来处理。
(2)轻量级json相对于xml,所需要的数据大小要小得多,并且解析的速度要更快。
2、json语法 (www.json.org)
(1)表示一个对象
{属性名:属性值,属性名:属性值...}
注意:
a.属性名要使用引号括起来。
b.属性值如果是字符串,要使用引号括起来。
c.属性值可以是string,number,boolean,null,object。
(2)表示一个对象组成的数组:[{},{},...]
(3)如何使用json来编写ajax应用程序
a.java对象转换成json字符串:一般使用json官方提供的api (json-lib)来实现转换。
b.json字符串转换成javascript对象:可以使用一些工具提供的方法,比如prototype提供了evalJSON。
prototype是一个js文件,里面提供了很多常用的函数,
比如
a, $(id): document.getElementById(id);
b, $F(id): $(id).value;
c, $(id1,id2,id3...): 分别依据id1,id2...查找对应的节点,然后放到一个数组里面返回。
d, strip(): 除掉字符串两端的空格。
e, evalJSON():将json字符串转换成对应的javascript对象或者javascript对象组成的数组。
3、同步请求
(1)什么是同步请求?ajax对象在向服务器发送请求时,浏览器会锁定当前页面,用户不能够对当前页面做任何的操作。
(2)如何发送同步请求?open(请求方式,请求地址,false);
注意:firefox的某些版本(低版本)对于同步支持比较特殊:不能够使用onreadystatechange来绑订一个事件处理函数,而应该在send方法执行之后,立即调用xhr.responseText方法来获得服务器返回的数据。
(3)优先使用异步,因为同步会影响性能,当服务器端处理比较慢的时候,浏览器会锁定当前页面("假死")。
(4)只有当客户端需要等待服务器的响应之后,才能继续向下执行,才能使用同步。
//使用json语法来创建
var p = {'name':'zs','age':22};
//使用Object来创建
var obj = new Object(); obj.name = 'zs'; obj.age = 22; function Person(name,age){ this.name = name; this.age = age; }
//利用javascript函数来创建
var person1 = new Person("zs",22)