AJAX指的是局部更新页面的技术，例如按了赞之後图示会变成实心的，按赞数也会增加之类的。
这个技术是透过javascript里面的一个物件实现的，叫做XMLHttpRequest。
嗯..看起来是个传送XML，或是JSON等其他类型的数据流的物件。
来做一个基本范例，用户注册时填入用户名，後台检查此名称是否可用，然後回传讯息到页面。
新增一个UnameSvl
public class UnameSvl extends HttpServlet {
(余略..)
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String uname = request.getParameter("uname");
//如果使用者初次拜访页面，使用者名称应为空，直接送去regist.jsp页面填资料。
if(uname == null) {
request.getRequestDispatcher("/main/regist.jsp").forward(request, response);
}
//如果是透过AJAX访问此Sevlet，会带有uname参数，进行以下处理
PrintWriter out = response.getWriter();
if(uname == null || uname.equals("")) {
out.print("0");
}else {
if(uname.equals("AAA") || uname.equals("BBB")) {
out.print("1");
}else {
out.print("2");
}
}
out.flush();
out.close();
}
接下来制作regist.jsp页面
"<%@ page language=""java"" contentType=""text/html; charset=utf-8""
pageEncoding=""utf-8""%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + ""://"" + request.getServerName()
+ "":"" + request.getServerPort() + path + ""/"";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset=""utf-8"">
<title>Insert title here</title>
</head>
<script type=""text/javascript"">
var xmlhttp;
function validUname(){
//若要测试此方法有没有被调用，使用以下code:
//alert('validUname()被启动');
//创建XMLHttpRequest物件
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
//利用.open方法设定参数，.send方法送request给後端。
if(xmlhttp != null){
xmlhttp.onreadystatechange = statechange;
var uname = document.getElementById(""uname"").value;
var url = ""<%=basePath%>UnameSvl?uname="" + uname;
xmlhttp.open(""GET"",url,true);
xmlhttp.send(null);
}
}
function statechange(){
if(xmlhttp.status == 200){
var result= xmlhttp.responseText;
var info;
if(result == ""0""){info=""请填入用户名""}
if(result == ""1""){info=""用户名已被使用""}
if(result == ""2""){info=""可用的用户名""}
document.getElementById(""nameAlert"").innerHTML = info;
}
}
</script>
<body>
<table>
<tr>
<td>用户名</td>
<td>
<input type=""text"" id=""uname"" name=""uname"" onblur=""validUname()"">
<span id=""nameAlert"" style=""color:red;font-size:12px""></span>
</td>
</tr>
<tr>
<td>密码</td>
<td><input type=""password"" name=""pwd""></td>
</tr>
<tr>
<td>密码确认</td>
<td><input type=""password"" name=""pwd2""></td>
</tr>
<tr>
<td colspan=""2"" align=""center""><input type=""submit"" value=""送出""></td>
</tr>
</table>
</body>
</html>"
XMLHttpRequest有readyState及status两种属性，可以用来设置到if条件式里面，因应不同状况呼叫不同函式。
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且回应已就绪
200: "OK"
404: 未找到页面
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
xmlhttp.onreadystatechange = statechange;
statechange(){…}
以上就是传统的AJAX设定方法，不过jQuery已经帮我们打包好了更简单的语法:
$.ajax({
type:"POST",
url:url,
success:function(msg){
处理内容
}
});
套用到此案例就会长这样:
function validUname(){
var uname = $('#uname').val();
var url = "<%=basePath%>UnameSvl?uname=" + uname;
var info;
$.ajax({
type:"POST",
url:url,
success:function(msg){
if(msg == "0"){info = "..."}
if(msg == "1"){info = "..."}
if(msg == "2"){info = "..."}
document.getElementById("nameAlert").innerHTML = info;
}
});
}
JSON是一种可快速被javascript解析的格式，比XML更快速而广泛被使用。长得像下面这样:
{
"artist":"pH7",
"title":"A LITTLE MONSTER",
"year":1985,
"tracks":["Lemon","sawadika"]
}
资料内容放在{}内，以":"区分键与值，以","区分各个资料，以[]表示列表。
做个案例
"<script type=""text/javascript"">
var JSONstring = '{' +
'""artist"":""pH7"",' +
'""title"":""A LITTLE MONSTER"",' +
'""year"":1985,' +
'""tracks"":[""Lemon"",""sawadika""]' +
'}'
function pageLoad(){
var album = eval(""("" + JSONstring + "")"");
var innerHTML = ""artist = "" + album.artist + ""<br>"" +
""title = "" + album.title + ""<br>"" +
""year = "" + album.year + ""<br>"";
document.getElementById(""p1"").innerHTML = innerHTML;
var tracks = """";
for(var i = 0;i<album.tracks.length;i++){
tracks += ""track#"" + i + "" = "" + album.tracks[i] + ""<br>""
}
document.getElementById(""p2"").innerHTML = tracks;
}
</script>
<body onload=""pageLoad()"">
<form id=""form1"">
<div id=""p1""></div>
<div id=""p2""></div>
</form>
</body>"
用写死的JSONstring代替後台传来的资料，用eval()函式即可将资料存成物件。
再从物件中取出各个属性内的资料。
使用eval()时需再加入一个括号，如下例:
var data = eval("(" + JSONstring + ")");
<<: 身份验证，授权和会计（authentication, authorization, and accounting (AAA)）Part II
昨天初步认识 python 怎麽设定变数的操作，今天我们要聚焦在串列、字典、字串的操作，东西有点多X...
讨论过这麽多种演算法之後，会发现操作时常常会使用阵列或是某些资料结构。资料结构是指电脑中管理资料的特...
在大量数据同时表格陈列於画面上时通常 都会需要有一些关键字查询的机制 新增Search的Action...
本篇重点 官方说明文件：https://sinotrade.github.io/tutor/adva...
昨天写了BFS模板&一题模板题，今天放几题比较复杂的~~ 例题实战 909. 蛇梯棋 这题最...