本文深入浅出地介绍了JavaScript的基础知识和技术要点，包括JavaScript的基本概念、DOM操作、AJAX通信、JSON数据格式、jQuery库使用、闭包特性、设计模式等。
1、JavaScript是什么？有什么作用?
答：JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来判断客户端输入或给HTML网页增加动态功能等。 具体作用如下图：
</div>
在JS中可以使用：
test.innerHTML:
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。上例中的test.innerHTML的值也就是“<span style="color:red">test1</span>
test.innerText:
从起始位置到终止位置的内容,
test.outerHTML:
除了包含innerHTML的全部内容外,
注：在实际使用中，一般都是使用innerHTML，而不用innerText，应该后者在有些浏览器中不兼容。
答：（1）AJAX的定义：AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标的
新方法。AJAX作用就是在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的艺术。使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。
（2）ajax技术的传统使用方式如下（以JSP+servlet结构下的ajax使用为例）：
前端js：
后端：
效果图：
解释：
（1）前端在JavaScript中创建XmlHttpRequest对象，并用obj.open()函数中赋予ajax通信参数（其中URL就包含了前端参数）及创建获取响应数据的事件函数，最后发送请求obj.send()；
（2）后端就是获取ajax传过来的参数（与servlet获取URL传值参数一样），并通过OUT返回一个字符串给前端，这就是ajax实现前端后端动态实时非重载通信的过程；
（3）效果图显示：只要在text输入框输入数据就可以实时的在suggestions后面显示对应的字符串。
更多ajax知识请参看：http://www.w3school.com.cn/ajax/index.asp
5、JSON是什么？有何作用？
答：json（JavaScript Object Notation）的定义是：基于JavaScript语言的轻量级的数据交换格式(JavaScript Object Notiation)。听起来比较艰深难懂，其实json就是一种数据格式，类似于数组，在大部分语言中人们将它理解为数组。也可以被理解为另一种结构，即“键值对”。在javaEE中使用json需要jsonplugin-0.34.jar包的支持。
JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯，json在JavaWeb中的文本格式如下：
[{"id":1,"desc":"apple","create_date":"2011-10-28T00:00:00","status":true,"modify_date":"2011-10-28T00:00:00","name":"ipad"},
{"id":2,"desc":"google","create_date":"2011-10-28T00:00:00","status":true,"modify_date":"2011-10-28T00:00:00","name":"android"}] 可见，json使用一种常见的类似数组的文本格式，当然也可以看做该文本格式是键值对形式的，因为每个属性都是“名称：值”的形式存在的，这也是所谓的前端和后端的数据通信都是通过键值对形式存在的。在使用中常如下使用：
var product = eval('('+ xmlHttp.responseText +')');将其用表格显示出来，其中每一行是一个对象，获取对象属性值即为元素。
var showstr ="<table border='1'>";
for (var i =0;i < product.results.length;i++)
{
obj = product.results[i];
showstr +='<tr>';
showstr +='<td>'+ obj.id +'</td>';
showstr +='<td>'+ obj.name +'</td>';
showstr +='<td>'+ obj.desc +'</td>';
showstr +='<td>'+ obj.create_date +'</td>';
showstr +='<td>'+ obj.modify_date +'</td>';
showstr +='<td>'+ obj.status +'</td>';
showstr +='</tr>';
}
showstr +='</table>';
document.getElementById('datashow').innerHTML = showstr;
json和xml的比较：xml和json都是web开发中常用的数据格式，他们都是可拓展性，可读性比较好的，但是有所侧重，json在JavaScript中使用比较多。
更多有关json教程：http://www.w3school.com.cn/json/index.asp
6、DOM的解释
答：Dom（Document Object Model），就是文档内容的结构关系．文档类型可以是HTML或XML，Dom具有对Html文件和XML文件元素的访问控制能力，简单点说利用Dom可以对某个html或xml文件添加，修改，删除元素．更改其现有的结构或内容。命令或方法 getElementById、getElementsByTagName、offsetParent appendChild、getAttribute都是DOM的重要方法。
更多有关DOM的教程：http://www.w3school.com.cn/htmldom/index.asp
7、jQuery是什么？作用？
答：jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。
用jq的前提,首先要引用一个有jq的文件：
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
这个是jquery官方最新的地址，可用在自己网站里加个这个，就能使用jquery了， 但仍然建议下载到本地服务器上。
看看下面的用法：
$("div p"); // (1)
$("div.container"); // (2)
$("div #msg"); // (3)
$("table a",context); // (4)第一行代码得到所有div标签下的p元素；
第二行代码得到class 为container的div元素；
第三行代码得到标签下面id为msg的div元素(不过最好别这样写，因为jQuery需要遍历所有的div元素，对于带id的元素，直接用$("#id"))；
第四行代码得到context为上下文的table里面所有的链接元素。
总结：jQuery起初的主要作用就是查询，它可以轻易地找到DOM中的任何元素，而这也是jQuery设计之初query的真实含义（查询）。熟悉CSS的都会发现上述几行jQuery的应用的写法很眼熟，这些功能使得HTML和JavaScript更加容易的实现某些功能，如动态画面等。
有关jQuery更详细教程：http://www.w3school.com.cn/jquery/index.asp
JQuery.ajax()与SSH2的应用中出现的问题：
以下是一个关于SSH2+ajax+json的应用问题，困扰我两天，终于找到了解决方法，如下代码：
前端js:
function FunAjax()
{
var para =$("#card_name_content").val();
$.ajax({
//这里的需要Struts.xml的<action/>的name属性一致。
url:"AjaxJson.action",
//提交类型
type:"POST",
//提交数据给Action传入数据
data:{"Para":para},
//返回的数据类型
dataType:"json",
//不从浏览器缓存中加载请求信息
cache:"false",
//成功是调用的方法
success : function(data){
//获取Action返回的数据用 data.Action中的属性名 获取
if(data!=null){
document.getElementById("txtHint").innerHTML=data;
}
<%-- alert("success!");--%>
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status+XMLHttpRequest.responseText);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
}后台action(没有导入getter/setter)：
private Userinfo user = new Userinfo();
private UserManagerService<Userinfo> userService;
private List<Userinfo> users;
private String searchText;
private String Para;
private String result;
public String doAjax() throws UnsupportedEncodingException {
result=userService.getNotice(Para);
System.out.println(result);
return "Partfresh";
}struts.xml配置：
<package name="ajax" extends="json-default">
<action name="AjaxJson" class="userAct" method="doAjax">
<result name="Partfresh" type="json"><param name="root">result</param></result>
</action>
</package>最开始，由于不太了解ajax的应用，struts.xml中json的配置没有以下字段：
<param name="root">result</param>同时，在前端js中没有添加error：function中的：
alert(XMLHttpRequest.status+XMLHttpRequest.responseText);
alert(XMLHttpRequest.readyState);
alert(textStatus); 所以一直出错，但并不知道错误出在前端还是后台action，后来添加以上弹窗后发现分别弹出：500、4、error+错误提示（org.apache.struts2.json.JSONWriter can not access a member of class org.apache.tomcat.dbcp.dbcp.PoolingDataSource$PoolGuardConnectionWrapper with modifiers "public"），对比jQuery.ajax错误码解释可知问题出在后台数据传回前端这一过程中。因此在网上有针对的搜索后发现了和我一样的问题，终于知道为什么一直不触发success:function(data){}事件了：因为开始没有在struts.xml中指定序列化哪些属性，所以action再返回前会序列化action中的所有变量对象，而本action中由于有一个Userinfo类型的接口对象user，在序列化时无法将其转化为json格式，就会返回error。
解决方案一般有三种：
（1）直接在struts.xml中添加属性段：
<param name="root">result</param>指定序列化对象根节点，使其只序列化result下面的属性。
（2）在不需要序列化的action类变量get方法前添加注解：
1 @JSON(serialize=false) 2 public AuthorityService getAuthorityService() { 3 return authorityService; 4 }
表示不序列化authorityService对象。
（3）在struts.xml文件中配置includeProperties/excludeProperties参数，来确定需要哪些变量被序列化（json的struts.xml配置参数详解见下面第二个链接地址）。
具体原文可见：http://www.cnblogs.com/xiaoyaorensheng/archive/2013/01/02/2842302.html
struts.xml中关于json的配置详解网址;http://www.blogjava.net/fanyingjie/archive/2010/01/26/310836.html
8、POJO是什么？
答：POJO(Plain Ordinary Java Object)简单的Java对象，实际就是普通JavaBeans，是为了避免和EJB混淆所创造的简称。pojo没有JavaBeans中复杂的组件等，只有简简单单的数据和相应的getter和setter方法等。
给一个定义把，POJO是一个简单的、正规Java对象，它包含业务逻辑处理或持久化逻辑等，但不是JavaBean、EntityBean等，不具有任何特殊角色和不继承或不实现任何其它Java框架的类或接口。
9、全局变量与局部变量及变量作用域
答：全局变量有两种情况，一种是定义在所有函数外的变量（可以不写var），另一种就是在函数内不写var的变量，编译器将其视作全局变量；
局部变量：局部变量就是在函数中定义的带有var的变量。
作用域：全局变量全局有效，但在团体开发中全局变量有危险性；局部变量作用域用函数来划分，函数内定义的变量函数外部可访问，这里主要是针对内联函数定义的变量，内联函数所在的父函数不可访问，但父函数定义的变量是可以被内联函数访问的。
10、JavaScript中内联函数的使用问题
答：内联函数在JavaScript中的定义与C++和java不大一样，与C比较相似，即：定义在函数内部的函数，比如
function func1{
var x=0;
function func2{ var a=2; x=a*2; return x;}
} //其中func2就是内联函数；
11、闭包
答：闭包作用在于读取函数内部的变量。因为在JavaScript中，变量的作用域是根据函数来划分的，即函数外无法访问函数内部定义的变量，如果一个函数中还有内联函数，那么该函数也不可以访问内联函数内部定义的变量，但内联函数可以访问该函数内定义的变量。所以，闭包就是为了在函数外部读取这些函数内部定义变量而生的。
闭包最常用的方式就是返回一个内联函数，一般定义中闭包是这样的：
function f1(){
var n=999;
function f2(){
alert(n++);
}
return f2;
}
var result=f1();
result(); // 999
result(); // 1000
从上可知：这个闭包可以访问f1的内部变量，并且多次执行，每次alert都是递增的，这就表示它可以使得被访问的内部变量一直保存在内存中，那么在不需要使用时就需要将这些变量删除，防止内存被占用。从中也就说明闭包不可以滥用。
12、JavaScript设计模式
答：JavaScript中最基础的设计模式就是单体模式。
单体模式作用：单体在JavaScript的有多种用途，它用来划分命名空间。可以减少网页中全局变量的数量(在网页中使用全局变量有风险)；可以在多人开发时避免代码的冲突(使用合理的命名空间)等等。
用法：
1 var functionGroup = {或者：
2 name:'Darren',
3 method1:function(){
4 //code
5 },
6 init:function(){
7 //code
8 }
9 }
1 var functionGroup = new function myGroup(){
2 this.name = 'Darren';
3 this.getName = function(){
4 return this.name
5 }
6 this.method1 = function(){}
7 ...
8 }
扫一扫
711
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
