javaEE(2)——EL,jstl,Ajax

1 EL表达式

${}
从小到大：page, request, session, application(Context)
${name}
指定某个作用域查找：
${applicationScope.name}
${requestScope.name}

eq, ne…

保留字：

MVC:
M：model——javabean,dao,service,util,entity
V：view——jsp,html
C：control——servlet

2 jstl国际标签库

配置JSTL：
如果需要在JSP中使用JSTL，需要使用JSP的指令元素< %@taglib uri=" " prefix=" " % >分别指定JSTL的URI和标签库前缀。
如：< %@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core”% >

2.1 Core标签

core标签库主要包括：
一般用途的标签：out / set / remove / catch
条件标签：if / choose / where / otherwise
迭代标签：foreach / forTokens
URL相关标签：import / url / redirect / param

如何在JSP页面中使用core标签库：
< %@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core”% >

标签	描述	语法
<c:out>	用于在JSP中显示数据，就像<%= … >	<c:out value="<要输出内容>" default="<输出的默认值>" escapeXml="<true
<c:set>	用于保存数据	<c:set var="<存储信息变量>" value="<要存储的值>" target="<要修改的属性所属的对象>" property="<要修改的属性>" scope="<var属性的作用域>"/>
<c:remove>	删除数据	<c:remove var="<要移除的变量名称>" scope="<变量所属的作用域>"/>
<c:catch>	用来处理产生错误的异常状况，并且将错误信息储存起来	<c:catch var="">…</c:catch>
<c:if>		<c:if test="<boolean条件>" var="" scope=""> …</c:if>
<c:choose>	本身只当做<c:when>和<c:otherwise>的父标签	<c:choose><c:when test=""> …</c:when> <c:when test=""> …</c:when>…<c:otherwise>…</c:otherwise></c:choose>
<c:forEach>	基础迭代标签，接受多种集合类型	<c:forEach items="" begin="" end="" step="" var="" varStatus="">
<c:forTokens>	根据指定的分隔符来分隔内容并迭代输出	多一个属性delims="<string分隔符>"

2.2 functions

Functions标签库分为两大类，共16个函数。
URI: http://java.sun.com/jsp/jstl/functions
前缀: fn
格式：${fn:函数名(参数)}

函数	语法	描述
fn:length	${fn:length(sessionScope.arrayList1)}	对集合的长度取值
fn:contains	${fn:contains(“ABC”, “a”)},返回“ false ”	判断源字符串是否包含子字符串
fn:containsIgnoreCase	${fn:startsWith (“ABC”, “ab”)},返回“ false ”	忽略大小写判断源字符串是否包含子字符串
fn:endsWith	${fn:endsWith(“ABC”, “bc”)},返回“ false ”	判断源字符串是否符合一连串的特定词尾
fn:escapeXml	字符实体转换	将所有特殊字符转化为字符实体码,包含一个 string 参数，返回一个 String 类型的值
fn:indexOf	${fn:indexOf(“ABCD”,“BC”)},返回位置的下标，为 1	取得子字符串与源字符串匹配的开始位置，若子字符串与源字符串中的内容没有匹配成功将返回 -1
fn:join		允许为一个字符串数组中的每一个字符串加上分隔符，并连接起来
fn:replace	${fn:replace(“ABC”,“A”,“B”)},“BBC”	允许为源字符串做替换的工作，返回String类型的值
fn:split	${fn:split(“A,B,C”,",")},将“ A,B,C ”字符串转换为数组 {A,B,C}
fn:substring	${fn:substring(“ABC”,“1”,“2”)},结果为“ B ”	截取字符串,第2,3参数为开始结束下标
fn:substringBefore	${fn:substringBefore(“ABCD”,“BC”)},结果为“ A ”	允许截取源字符从开始到某个字符串
fn:toLowerCase	${fn:toLowerCase(“ABCD”)},结果为“ abcd ”	将源字符串中的字符全部转换成小写字符
fn:toUpperCase		大写转换
fn:trim		删除源字符串中结尾部分的“空格”以产生一个新的字符串

fn:join：
<% String[] stringArray = {“a”,“b”,“c”}; %>
<% request.getSession().setAttribute(“stringArray”, stringArray);%>
${fn:join(sessionScope.stringArray,";")}
定义数组并放置到 Session 中，然后通过 Session 得到该字符串数组，使用 fn:join 函数并传入分隔符“ ; ”，得到的结果为“ a;b;c ”。
参考博客：
https://blog.csdn.net/nlcold/article/details/7237335

3 Ajax

用于创建快速动态网页的技术。
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

3.1 Ajax提交form表单方法

1、无返回结果的：就是把表单数据直接提交给后台，让后台直接处理；最简单的就是$(“#formid”).submit(); 直接将form表单提交到后台。

2、返回有结果的：这种情况下，后台不管是执行成功还是失败，最终的信息都需要返回到前台。

第二种是使用最多的一种，因为程序的执行成功与否都需要给用户提示，程序一般也都是多步完成的，执行完插入操作，需要发起流程，这就需要在界面上判断成功与否。Ajax本身属于有返回结果的一类，其中的success方法就是处理后台返回结果的。

AJAX提交表单有返回结果的有两种实现方式：
1.将form表单数据序列化

<span style="font-size:18px;">  $.ajax({  
    type: "POST",  
    url:your-url,  
    data:$('#yourformid').serialize(),  
    async: false,  //默认true,异步
    error: function(request) {  
        alert("Connection error");  
    },  
    success: function(data) {  
        //接收后台返回的结果  
    }  
  });</span> 
// 需要注意的是，使用这种方法的前提是form表单中的项一定要有name属性，后台获取的键值对为key=name 值，value=各项值。

无论是input标签还是span标签或者其他标签，一定要有name属性，没有name属性后台是获取不到该项的.

2.通过窗口查找form提交

<span style="font-size:18px;">  // 提交表单  
  var obj = document.getElementById("xx_iframe").contentWindow;  
  obj.$("#yourform").form("submit",{  
    success :function(data){  
        //对结果处理  
    }    
  });</span>

因为在当前界面上弹出对话框，然后在对话框上的按钮触发对话框中表单提交，对话框又是链接的另外的html页面，如此通过$(“#formid”)的方式是找不到对话框中的form的，因此这种情况下只能使用这种方式提交表单。
另外ajax中封装的get,post请求也都属于有返回结果的一类。
总的来说，无返回结果的和有返回结果的（将form表单数据序列化+通过窗口实现form提交），form表单都必须要有name属性。

3.2 四种常用的Ajax请求方式

1. $.ajax()返回其创建的 XMLHttpRequest 对象
   $.ajax() 只有一个参数：参数key/value对象，包含各配置及回调函数信息。
   如果你指定了dataType选项，那么需要保证服务器返回正确的MIME信息，(如 xml 返回 “text/xml”)。

$.ajax({
	type: "post",
	dataType: "html",
	url: '/Resources/GetList.ashx',
	data: dataurl,
	success: function (data) {
		if (data != "") {
			$("#pager").pager({ pagenumber: pagenumber, pagecount: data.split("$")[1], buttonClickCallback: PageClick });
			$("#anhtml").html(data.split("$")[0]);
		}
	}
});

2. 通过远程 HTTP GET 请求载入信息
   相比于复杂的$ .ajax而言，GET请求功能则显得更加简单，请求成功时可调用回调函数。当然如果需要在出错时执行函数，那么还请使用$ .ajax

$.get("test.cgi", { name: "John", time: "2pm" },
	function(data){
		alert("Data Loaded: " + data);
});

3. 通过远程 HTTP POST 请求载入信息
   POST请求功能也相对比较简单，请求成功时可调用回调函数。如果需要在出错时执行函数，那么请使用$.ajax请求。

$.post("/Resources/addfriend.ashx", { 
	"fid": fids, "fname": fnames, "tuid": tuids, "tuname": tunames 
},function (data) {
	if (data == "ok") {
		alert("添加成功！");
	}
})

4. 通过 HTTP GET 请求载入 JSON 数据

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
	$.each(data.items, function(i,item){
		$("<img/>").attr("src", item.media.m).appendTo("#images");
		if ( i == 3 ) return false;
	});
});

3.3 Ajax 异步,同步刷新区别

同步请求会阻止用户，直到检索到响应，而异步不会阻止用户。

同步：当JS代码加载到当前AJAX的时候，会把页面里所有的代码停止加载，页面出现假死状态，当这个AJAX执 行完毕后才会继续运行其他代码页面假死状态解除。
异步：这个AJAX代码运行中的时候其他代码一样可以运行。
jquery的async:false,这个属性默认是true：异步，false：同步。

$.ajax({ 
	type: "post", 
	url: "path", 
	cache:false, 
	async:false, 
	dataType: ($.browser.msie) ? "text" : "xml", 
	success: function(xmlobj){ 
    } 
});
//有了这个属性可以相对的减少代码运行书序问题，但是如果用的太多，页面假死次数太多。这样反而导致用户体验不佳

3.4 Ajax优缺点

优点：
1.快速回复
2.带宽利用率
3.在从服务器检索数据之前，不会阻止用户。
4。它允许我们只将重要数据发送到服务器。
5.它使应用程序具有交互性和更快速。

缺点：
1.取决于JavaScript
2.安全问题
3.调试很困难

安全问题：
AJAX源代码是可读的
攻击者可以将脚本插入系统

3.5 AJAX JSON 实例

<html>  
<head>  
<meta content="text/html; charset=utf-8">  
<title>AJAX JSON by Javatpoint</title>  
<script type="application/javascript">  
function load()  
{  
   var url = "http://date.jsontest.com/";//use any url that have json data  
   var request;  
  
   if(window.XMLHttpRequest){    
    request=new XMLHttpRequest();//for Chrome, mozilla etc  
   }    
   else if(window.ActiveXObject){    
    request=new ActiveXObject("Microsoft.XMLHTTP");//for IE only  
   }    
   request.onreadystatechange  = function(){  
      if (request.readyState == 4  )  
      {  
        var jsonObj = JSON.parse(request.responseText);//JSON.parse() returns JSON object  
        document.getElementById("date").innerHTML =  jsonObj.date;  
        document.getElementById("time").innerHTML = jsonObj.time;  
      }  
   }  
   request.open("GET", url, true);  
   request.send();  
}  
</script>  
</head>  
<body>  
  
Date: <span id="date"></span><br/>  
Time: <span id="time"></span><br/>  
  
<button type="button" onclick="load()">Load Information</button>  
</body>  
</html> 

参考博客：
https://www.w3cschool.cn/ajax/ajax-rfck31uh.html

3.6 AJAX - onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化； 1: 服务器连接已建立； 2: 请求已接收； 3: 请求处理中； 4: 请求已完成，且响应已就绪；
status	200: “OK”；404: 未找到页面

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

回调函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

function myFunction(){
    loadXMLDoc("/try/ajax/ajax_info.txt",function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    });
}