AJAX培训笔记_js基础笔记

科技网编2023-07-25 14:521400
7.10
--------
Ajax:Asynchronous JavaScript And XML
异步的 JavaScript 和 XML
1：编写ajax遵守基本标准习惯
标签名全小写，标签必须有结束标签，属性名必须小写，属性值必须位于“”或''内
2：创建ajax服务端代码：AjaxServer.java
和普通的servlet类似，区别在于，普通servlet返回的是页面，而ajax返回的
是我们想要的数据
ajax框架：dwr,dojo,ext,prototype,jquery
3、编写页面：ajax.html
A:编写js：verify.js
B:在页面中引入该js
4、精简js：verify.js--->verify1.js
5、不使用jquery框架，直接使用ajax的异步对象XMLHttpRequest对象去实现ajax应用
步骤：
A：创建XMLHttpRequest对象
B：注册回调函数
C：设置连接信息
D：发送数据到服务端进行交互
E：接受数据
创建js：verifyown.js
相关代码：
------------
var xmlHttp;
function verify()
{
//使用dom方式获取username的值
var username = document.getElementById("username").value;
//A：创建XMLHttpRequest对象
xmlHttp = getXMLHttpRequest();
//判断该异步对象是否创建成功
if(xmlHttp)
{
// B：注册回调函数
xmlHttp.onreadystatechange = callback;
// C：设置连接信息
xmlHttp.open("get","ajaxServer?username="+username,true);
//D：发送数据到服务端进行交互
xmlHttp.send(null);
//xmlHttp.open("post","ajaxServer",true);
//设置请求头
//xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//xmlHttp.send("username="+username);
}
}
//D：发送数据到服务端进行交互
function callback()
{
//判断数据是否交互完成
if(xmlHttp.readyState == 4)
{
//判断http交互是否成功
if(xmlHttp.status == 200)
{
//返回响应数据
//alert(xmlHttp.responseText);
var text = xmlHttp.responseText;
//alert(text);
document.getElementById("result").innerHTML = text;
}
}
}
//A：创建XMLHttpRequest对象
function getXMLHttpRequest()
{
var xmlHttp = null;
try
{
//FF Safari Opera IE
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
try
{
//IE 5,6
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
6:接收返回值类型为xml格式的数据
A：AjaxServer.java--->AjaxXMLServer.java
B:配置web.xml
c：verifyown.js--->verifyXML.js
function callback()
{
//判断数据是否交互完成
if(xmlHttp.readyState == 4)
{
//判断http交互是否成功
if(xmlHttp.status == 200)
{
//返回响应数据 xml返回的是个对象
//alert(xmlHttp.responseText);
var xml = xmlHttp.responseXML;
//var xml = xmlHttp.responseText;
//alert(xml);
var msgs = xml.getElementsByTagName("message");
if(msgs.length > 0)
{
textNode = msgs[0].firstChild;
//alert(textNode.nodeValue);
var msg = textNode.nodeValue;
//alert(msgs.length);
document.getElementById("result").innerHTML = msg;
}
else
{
alert("xml数据解析错误，原始内容为："+xmlHttp.responseText);
}
}
}
}
7.11
------------
7、使用jquery的ajax方法实现文本数据的返回
verify.js---->verifyJquery.js
$.ajax({
//type:"get",
//url:"ajaxServer?username="+username,
type:"post",
url:"ajaxServer",
data:"username="+username,
success:function(data)
{
//alert(data);
$("#result").html(data);
}
});
8、使用jquery的ajax方法实现xml数据的返回
verifyJquery.js---->verifyJqueryXML.js
$.ajax({
//type:"get",
//url:"ajaxServer?username="+username,
type:"post",
url:"ajaxXMLServer",
data:"username="+username,
dataType:"xml",
success:callback
});
function callback(data)
{
//dom--->jquery $(dom)
//jquery-->dom jquery.get(0)
var jqueryObj = $(data);
var msgs = jqueryObj.children();
var text = msgs.text();
$("#result").html(text);
}
9、缓存问题：
FF每次都发送请求。IE到哪个请求路径一样时，会调用缓存
解决方案：时间戳
function convertURL(url)
{
var timestamp = new Date().getTime();
//将该时间戳加到url上
if(url.indexOf("?") >= 0)
{
url += "&t="+timestamp;
}
else
{
url += "?t="+timestamp;
}
return url
}
简单的Math.Random()
var url = "ajaxServer?username="+username+"&t="+Math.random();
10、解决中文乱码问题
get/post
//服务器端解码一次
username = URLDecoder.decode(username, "utf-8");
//在js端编码2次
username = encodeURI(username);
username = encodeURI(username);
字节码编码的原理：
在文本框中输入“中”
11：jQuery部分方法练习
test1.html
-------
//1、简单：伪类
//：first
var firstul = $("ul:first");
//alert(firstul.get(0).id);
//:last
var lastul = $("ul:last");
//alert(lastul.get(0).id);
var ul = $("ul").get(1);
//alert(ul.id);
//:not
//var notul = $("ul:not");
var notul = $("#newsList li:not(.highlight)");
//alert(notul.length);
//alert(notul.text());
//手动遍历该集合
notul.each(function(){
//alert(this.innerHTML);
//alert($(this).html());
});
//将记录的间隔显示不同颜色
//：odd(单数) even(双数)
var uls = $("li:even");
//alert(uls.length); //5
/*	uls.each(function(){
this.className="highlight"; //添加class属性值
});
*/
//使用隐式递归
//uls.addClass("highlight");	//为每个元素添加class属性值 
//alert($("span").html());
//$("span").text("<font color='red'>haha</a>");
//$("span").html("<font color='red'>haha</a>");
//$("li:first").addClass("highlight");
//$($("li").get(2)).addClass("highlight");
//$("li:eq(2)").addClass("highlight");
//$("li:gt(2)").addClass("highlight");
//$("li:lt(2)").addClass("highlight");
//获取所有的h标签
//var hs = $("h1,h2,h3,h4,h5,h6");
//hs.addClass("head");
//$(":header").addClass("head");
//内容
//contains
//var nodes = $("li:contains(4)");
//nodes.addClass("highlight");
//var ele = $(":hidden");
//var ele = $(":visible");
//表单
//var ele = $(":text");
//var ele = $(":input");
//表单对象属性
//var fms = $("form").get(0);
//alert(fms.elements.length);
//alert($("input:checked").length);
//alert($("form :checked").length);
//var eles = $("li:contains(4)");
//eles.css("color","red");
----------------
//链式调用源码分析
function Demo()
{
}
Demo.prototype={
setName:function(name)
{
this.name = name;
//返回对象本身
return this;
}
,
getName:function()
{
return this.name;
}
,
setAge:function(age)
{
this.age = age;
return this;
}
,
getAge:function()
{
return this.age;
}
}
//工厂函数
function D()
{
return new Demo();
}
var o = D().setName("xwq").setAge("14");
alert(o.getName()+" "+o.getAge());
});
-------------
1：应用案例1：弹出窗口
A：编写页面：jqueryWin.html
B:编写css：win.css
C:编写js：jqueryWin.js
function showWin()
{
var winNode = $("#win");
//方法一 修改css
//winNode.css("display","block");
//方法二 show()
//winNode.show("slow");  //slow normal fast 可选
//方法三：fadeIn();
//winNode.fadeIn("slow");
//方法四 slideDown
winNode.slideDown(3000);
}
function hide()
{
var winNode = $("#win");
//方法一 修改css
//winNode.css("display","none");
//方法二
//winNode.hide();
//方法三：fadeOut();
//winNode.fadeOut();
winNode.slideUp();
} 
7.12
------
2、应用案例2 弹出菜单
A：编写页面：jqueryMenu.html
B:编写css：menu.css
C:编写js:menu.js
完善点1：单击UL节点任何位置都会触发click事件
完善点2：为二级菜单添加连接，单击后将相关页面在类似与iframe中显示
jQuery(function()
//$(document).ready(function()
{
//var uls = $("ul");
var as = $("ul>a");
as.click(function()
{
//取得当前的点击的ul
var ulNode = $(this);
//找到当前ul下所有li子元素集合 toggle() 切换的显示和隐藏
//ulNode.children("li").toggle("slow");
//完善点一 方法一、nextAll() prevAll()所有li兄弟元素
ulNode.nextAll("li").toggle("slow");
//方法二、parent() 父元素
//ulNode.parent().children("li").toggle("slow");
});
//完善点二
//给子菜单绑定click事件
$("li>a").click(function()
{
//load事件不能用于 $(document).ready
//$("#content").load(this.id);
$("#content").load($(this).attr("id"));
});
});
3、应用案例3：编辑文本框
A：编写html页面-jqueryEdit.html
B:编写css：edit.css
逻辑：
1、让这两个td绑定一个click事件
2、获取当前点击的td对象
3、取出当前td的值，存入临时变量
4、清空td的内容
5、创建一个input输入域
6、将临时变量的值赋给input输入域的value值
7、将该input元素插入到当前td中
8、取消绑定到该td上的click事件
完善点1：修改后单击回车键，修改过的值写入td，input消失,
重新单击时，又可以进入编辑状态
完善点2：文本框内容高亮显示
jQuery(function()
{ 
//绑定事件方法
//$("td").click(tdclick);
//可以绑定多个
$("td").bind(
{
click:tdclick
});
//
});
function tdclick()
{
//获取当前对象中的值
var td = $(this);
var text = td.text();
//var len = text.length;
//清空当前对象中的内容
td.empty();
//创建一个input输入域
var input = $("<input>");
//设置
input.attr("value",text);
//给input绑定keyup事件
input.keyup(function(event)
{
//解决多浏览器获取事件的差异
var myEvent = event||window.event;
//判断是否按下回车键
if(myEvent.keyCode == 13)
{
//保存input元素的内容
var value = input.val();
td.html(value);
//重新获取click事件
td.click(tdclick);
}
});
//将input插入到当前td中
input.appendTo(td);
//td.append(input);
//文本框内容高亮显示
input.get(0).select();
//取消绑定的事件
td.unbind("click");
//另一种方法
//td.html("<input value='"+text+"' size='"+len+"' />");
}
---------------
jQuery(function()
{
$("td").click(tdclick);
});
function tdclick()
{
var td = $(this);
var text = td.text();
td.html("<input value='"+text+"'/>");
var input = td.children();
input.keyup(function(event)
{
var e = event||window.event;
if(e.keyCode == 13)
{
var value = input.val();
td.html(value);
td.click(tdclick);
}
});
td.unbind("click");
}
4：jquery综合案例1：模拟股票涨跌功能
A：建立一个封装股票信息对象：Stock.java
B: 编写服务端的servlet:用于返回实时更新的股票信息 GetStockInfo.java
C:配置web.xml
D：编写页面：jqueryStock.html
完善点1：每隔一秒自动刷新指数
完善点2：当前价格低于昨天收盘价，显示绿盘，否则显示红盘
第二部分：
实现当鼠标移到某个链接后，填出窗口，显示该股票的具体信息
A:修改jqueryStock.html,加入弹出窗口div
B:jqueryStock.js----》jqueryStock1.js
C:编写css,修饰该弹出框：stock.css
D:通过js可控制弹出框的位置
E:返回的JSON格式的值是数组或对象的不同处理方式
var obj;
var sid;
jQuery(function(){
//alert(1);
var stockNode=$("#stock");
//隐藏该弹出框
stockNode.hide();
var as=$("a");
as.mouSEOver(function(event){		
var aNode=$(this);		
//alert(aNode);
var divNode=aNode.parent();
//对象格式
//sid=divNode.attr("id");
//数组格式
sid=divNode.attr("name");
//更新弹出框
updateDIV();
//通过js可控制弹出框的位置
//A:直线移动
//创建该链接的偏移量
//var offset=aNode.offset();
//设置弹出框的left,top
//stockNode.css("left",offset.left+"px")
//.css("top",offset.top+aNode.height()+"px");
//B：平面移动
//FF/IE兼容
var myEvent = event||window.event;
//alert("x:"+myEvent.clientX+"y:"+myEvent.clientY);
stockNode.css("left",myEvent.clientX+5+"px")
.css("top",myEvent.clientY+5+"px");
//显示该弹出框
stockNode.show();
});
as.mouSEOut(function(){
//隐藏该弹出框
stockNode.hide();		
});
getInfo();
setInterval(getInfo,1000);
});
function getInfo()
{
$.get("getStockInfo",null,function(data)
{
//data=[{name:"上证指数",yes:2067.2,tod:2056.3,Now:2046.71},
// {name:"美利纸业",yes:5.12,tod:5.23,Now:5.44}]
//将返回的字符串解析成js对象
var obj = eval(data);
//获取该集合中的具体的股票对象(数组格式)
var szzs = obj[0];
var mlzy = obj[1];
//对象格式
//data=
//{
//       "000001":{name:"上证指数",yes:2067.2,tod:2056.3,Now:2051.3},
//	 "000815":{name:"美利纸业",yes:5.12,tod:5.32,Now:5.34}
}
//var szzs = obj["000001"];
//var mlzy = obj["000815"];
var span1 = $("#000001").children("span");
span1.html(szzs.Now);
var span2 = $("#000815").children("span");
span2.html(mlzy.Now);
//当前价格低于昨天收盘价，显示绿盘，否则显示红盘
if(szzs.Now > szzs.yes)
{
span1.css("color","red");
}
else
{
span1.css("color","green");
}
if(mlzy.Now > mlzy.yes)
{
span2.css("color","red");
}
else
{
span2.css("color","green");
}
//更新弹出框
updateDIV();
});
}
//更新弹出框
function updateDIV(){
var stockObj = obj[sid];
//alert(stockObj.name);
for(var proname in stockObj){
//alert(proname);
if(proname !="name"){
//找到div节点
var spanDiv=$("#"+proname).children("span");
spanDiv.html(stockObj[proname]);
//重新设置红绿盘
if(stockObj.Now > stockObj.yes){
$("#Now").children("span").css("color","red");				
}
else{
$("#Now").children("span").css("color","green");
}
}
}
}
5、jquery综合案例2:模拟下拉框自动补全功能
A：编写服务端代码：AutoComplete.java
B:配置web.xml
C:配写数据文件：word.xml
D：编写页面：jqueryAutoComplete.html
E:编写js:jqueryAuto.js
F:编写补全框的样式：使用js的css方法
G:增加键盘事件：jqueryAuto.js---》jqueryAuto1.js
//定义一个当前高亮显示的节点的索引号
var highlightindex = -1;
jQuery(function()
{
var timeout; //定时器
var wordInput = $("#word");
//获取该输入框的偏移量
var wordInputOffset = wordInput.offset();
//获取autodiv节点对象
var autoNode = $("#auto");
//将自动提示框先隐藏
autoNode.hide().css("border","1px black solid")
.css("backgroundColor","gray")
.css("position","absolute")
.css("left",wordInputOffset.left+"px")
.css("top",wordInputOffset.top+wordInput.height()+7+"px")
.css("width",wordInput.width()+2+"px");
//.width(wordInput.width()+"px");
wordInput.keyup(function(event)
{
var myEvent = event||window.event;
var code = myEvent.keyCode;
//判断是否是a-z，退格键，delete键
if(code >=65 && code<=90 || code==8 || code ==46)
{
var word = wordInput.val();
//将该值交给ajax引擎请求后台服务器
if(word != "")
{
clearTimeout(timeout);
//服务器请求加上延时，最后一个keyup再发送请求
timeout = setTimeout(function()
{
$.post("autoComplete",null,function(data)
{
var jqueryObj = $(data);
//找到所有的word节点
var wordNodes = jqueryObj.find("word");
//清空该提示框
autoNode.empty();
wordNodes.each(function()
{
var text = $(this).text();
if(text.indexOf(word) == 0)
{
//$("<div>").html(text).appendTo(autoNode);
$("<div>").text(text).appendTo(autoNode);
}
});
autoNode.show();
});
},500);
}
else
{
autoNode.hide();
}
}
//单独处理向上和向下键
//向上键
else if(code == 38)
{
var autoNodes = autoNode.children("div");
if(highlightindex == -1)
{
//将索引值置为长度-1
highlightindex = autoNodes.length -1;
}
else
{
//将原来的记录背景还原为白色
autoNodes.eq(highlightindex).css("background-color","white");
highlightindex--;
autoNodes.eq(highlightindex).css("background-color","blue");
}
}
else if(code == 40)
{
var autoNodes = autoNode.children("div");
autoNodes.eq(highlightindex).css("background-color","white");
if(highlightindex == autoNodes.length-1)
{
highlightindex = -1;
}
highlightindex++;
autoNodes.eq(highlightindex).css("background-color","blue");
}
else if(code == 13)
{
if(highlightindex >=0 )
{
var autoNodes = autoNode.children("div");
var wordText = autoNodes.eq(highlightindex).text();
wordInput.val(wordText);
autoNode.hide();
highlightindex = -1;
}
else
{
alert(wordInput.val());
wordInput.blur();
}
}
});
//给按钮绑定click事件
$("input[type='button']").click(function()
{
alert(wordInput.val());
});
});
补充
---------
//js中定义一个对象的方法
var obj={name:"mike",age:12};
jquery中的两大特性：链式调用和隐式递归
html() html(val) //匹配第一个元素
text() text(val) //匹配所有的元素
val() val(val)  //匹配第一个元素
jquery中的相当于js中的onload方法
//jQuery(function()
$(document).ready(function()
/*让相邻框合并*/
border-collapse: collapse;
$():返回一个空的jQuery对象。
$(html):根据提供的HTML字符串,创建DOM 元素,如:$(“<h1>Hello</h1>")
$(elements):将一个或多个DOM元素转化为jQuery对象,如:$(document.body)
//web.xml中的启动时就加载 1是优先级
<servlet>
<servlet-name>getStockInfo</servlet-name>
<servlet-class>com.itany.servlet.GetStockInfo</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
---------
1、使用第三方jar包提供的方法实现将java对象转成JSON格式字符串
A:test.jsp
B:test.js
C:javabean:Person.java,Address.java
D:编写servlet:DemoServlet.java
E:web.xml
servlet
------
resp.setContentType("text/html;charset=utf-8");
//设置该页面无缓存
resp.setHeader("cache-control", "no-cache");
//初始化Person对象
Person p = new Person("xwq","男",24,new Address("江苏省","南京市","浦口区"));
Person p1 = new Person("sj","女",22,new Address("江苏省","南京市","浦口区"));
//将该值存入list集合
List<Person> ps = new ArrayList<Person>();
ps.add(p);
ps.add(p1);
//将该集合转成json数组对象
JSONArray jsonArray = JSONArray.fromObject(ps);
//将sjon数据传给客户端
JSONObject jsonObject = new JSONObject();
jsonObject.put("person", jsonArray);
resp.getWriter().print(jsonObject.toString());
//resp.getWriter().print(JsonUtil.list2json(ps));
js
----
function addPerson()
{
$.ajax(
{
type:"post",
url:"demoServlet",
dataType:"json",
success:function(data)
{
//获取person对象集合
var ps = data.person;
$("#planTable").empty();
$.each(ps,function(i,p)
{
//拷贝行
var row = $("#tr").clone();
//对该行的每个子元素设置
row.find("#name").text(p.name);
row.find("#age").text(p.age);
row.find("#gendar").text(p.gendar);
row.find("#address").text(p.address.province
+p.address.city+p.address.country);
//将该tr追加到table
row.appendTo("#planTable");
});
}
});
}
原文地址：https://cloud.tencent.com/developer/article/2151104