前端开发中的javaScript技术

1、JavaScript是什么？有什么作用?

答：JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来判断客户端输入或给HTML网页增加动态功能等。 具体作用如下图：

2、JavaScript的标签有哪些？

答：有如type、src、async、defer等，其中有一个需要解释一下，就是src主要用于调用外部包类API，src标签的属性值就是外部程序地址。

3、js中innerhtml的作用与用法是什么?

答：比如有如下的html描述：

<div id="test">

   <span style="color:red">test1</span> test2
</div>

在JS中可以使用：

test.innerHTML:

　　也就是从对象的起始位置到终止位置的全部内容,包括Html标签。上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。

test.innerText: 

　　从起始位置到终止位置的内容, 但它去除Html标签 上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

test.outerHTML:

　　除了包含innerHTML的全部内容外, 还包含对象标签本身。上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>

注：在实际使用中，一般都是使用innerHTML，而不用innerText，应该后者在有些浏览器中不兼容。

4、ajax的定义作用与用法是什么？

答：（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 　　}