首页 > 代码库 > 设置获得的标签体、动态绑定事件以及Ajax
设置获得的标签体、动态绑定事件以及Ajax
前言
主要谈谈Ajax以及jQuery对Ajax的支持
Ajax（Asynchronous javascript and xml）以异步地方式实现局部HTML的刷新。创建交互式web应用程序而无需牺牲浏览器兼容性的流行方法。
正文
设置获得的标签体
动态绑定事件
方式一
方式二
例子
Ajax
1.Ajax是一种在2005年由Google推广开来的编程模式，是一种使用现有标准的新方法通过Ajax，可以创建更好、更快以及更友好的web应用程序。
2.Ajax基于javascript和HTTP请求
3.。通过Ajax您的javascript可以使用javascript的xmlHttpRequest对象来直接与服务器进行通信。通过这个对象，您的javascript可在不重新加载页面的情况与web服务器交换数据。
4.Ajax在浏览器与web服务器之间使用异步数据传输，这样可使网页从服务器请求少量的信息，而非整个页面。
1.ajax
synchronous javascript and xml，为解决传统的web中，"提交--等待---提交"的模式而产生的 技术。其本质就是用javascript获取浏览器里面的一个特殊的内置对象(XmlHttpRequest),给服务器
异步发送请求，服务器会返回xml和文本数据给XmlHttpRequest，然后，通过javascript调用 XmlHttpRequest对象中数据更新页面，在整个过程中，页面无刷新。
2.ajax编程
step1 获取XmlHttpRequest对象
在ie中获取和其他的浏览器不一样，其他浏览器都是通过new XMLHttpRequest()来获取，ie 中是这样来获取 new ActiveXObject()。
function getXmlHttpRequest(){
var xmlHttpRequest=null;
if((typeof XMLHttpRequest)!=‘undefined‘){
xmlHttpRequest=new XMLHttpRequest();
}else{
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHttp");
}
return xmlHttpRequest;
}
step2 使用XmlHttpRequest发送请求
1)发送get请求
var url="some.do?name=zs";
xhr.open("get",url,true);
get:请求的方式
url:请求的地址，可以接上参数
true:异步请求
//注册监听器
xhr.onreadystatechange=f1;
//发送请求，真正的发送请求
xhr.send(null);
2)发送post请求
var url="some.do";
xhr.open("post",url,true);
//设置消息头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.onreadystatechange=f1;
xhr.send("name=zs");
step3 服务器处理请求，返回响应
step4 在监听器处理服务器的响应
function f1(){
//处理相关的代码
}
xhr.onreadystatechange=f1;
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
//获取文本数据
var txt=xhr.responseText;
//获取XML DOM对象
var xml=xhr.responseXml;
// dom 操作 更新页面数据
}
}
例子：检查用户是否可用
例子一，异步地情况
1.jsp页面
2.servelet
<div><script src="https://code.csdn.net/snippets/409620.js" type="text/javascript"></script></div>
3.XmlHttpRequest对象
readyState属性：XmlHttpRequest与服务器通讯的状态。
0(创建完毕) ：XmlHttpRequest对象已经创建好，但没有调用open方法。
1(初始化):XmlHttpRequest没有调用send()方法。
2(发送):XmlHttpRequest开始发送数据给服务器。
3(获取数据):XmlHttpRequest，正获取服务器返回的数据
4(获取数据完毕):此时，可以通过XmlHttpRequest获得服务器 返回的所有数据。
reponseText属性：服务器返回的文本。
responseXML属性：服务器返回的xml数据。
onreadystatechange属性：用来设置回调函数，即处理服务器返回的数据。
status属性：服务器返回的状态码，(200,500,404)
4.缓存问题
在ie浏览器中，如果请求是get方式的请求，ie浏览器会将 请求的数据缓存起来，如果下次访问，地址没变，ie浏览器 就不会发送真正的请求，会将缓存的数据显示给用户。
解决方式：
1.可以在地址后面加上一个随机数。
2.使用post方式发送请求。
5.编码问题
1).在浏览器中，如果请求方式post，浏览器是会utf-8对数据进行编码。
2).在浏览器中，如果请求方式get，ie使用的"gbk/gb2312" 对中文进行编码，
firefox使用utf-8。
解决编码问题：
step1. 修改tomca中的server.xml .
添加URIEcoding="utf-8",
对get请求使用utf-8进行编码
step2. 对请求的地址使用 encodeURI()函数，
对地址中中文使用utf-8编码
6.prototype
$(id) : document.getElementById(id);
$F(id): document.getElementById(id).value;
$(id1,id2.....) 获取多个对象，返回一个数组
evalJSON：将符合JSON格式的字符串，转换成JS对象。
7.JSON
javascript tonation object,是一种轻量级的数据交换的格式， 主要用来在服务器和js之间交换数据。
1).JSON中表示对象
a.表示一个对象
var obj={‘属性‘:‘属性值‘，‘属性‘:‘属性值‘，‘属性‘:‘属性值‘....}
属性要加上引号。
属性值如果是字符串要加上引号。
属性值的类型：string，number，null、object、boolean
b.表示一个数组
var arr=[{},{},{}]
2).将java对象转换成JSON格式的字符串
a.转换一个对象
JSONObject jobj=JSONObject.fromObject(obj);
jobj.toString();
b.转换数组或集合
JSONArray arr=JSONArray.fromObject(stus);
arr.toString();
注册页面检查用户是否可用和城市下拉框的级联
1.WebRoob目录下的注册页面regist.jsp
json-lib-2.2.3-jdk15.jar
4.src目录下得实体类Option.java
5.src目录下的Servlet
ActionServlet.java
jQuery对于Ajax的支持
$.get(url,回调函数，数据类型);
$.post(url,数据，回调函数，数据类型);
传递json数据
json={属性名：属性值，属性名：属性值}；
例子：下拉框的级联
jsp页面
注：图层的设置
样式：z-index:正数；//500为分界线 设置图层
js对象：div.style.zindex=正数
mybg.style.filter=‘"Alpha(opacity=30)";//设置透明度
mybg.style.overflow=‘hidden‘;
总结
知识回顾
JQuery 是一种js的框架
类似的框架 ExtJS
框架:程序代码的一种有机组合，是程序开发过程中的一种半成品
依赖库：jquery-1.4.3.js
语法：
$( )
选择器
基本选择器
id选择器
$("#id值")
标签选择器
$("标签名称")
Class选择器
$(".class值")
群组选择器
$("标签名称1,标签名称2");
包含选择器
$("标签名称1 标签名称2");
表单选择器
$(":input") 选出所有的input标签
:text 选出input标签中type为text的所有标签
:password
:button
:radio
:reset
:checkbox
:hidden
:submit
:image
:file
条件限定选择器
基本条件限定
:first
:last
:lt(下标)
:gt(下标)
:odd 奇数，下标从0开始
:even 偶数，下标从0开始
:eq(下标)
:not(选择器) 取反，去除选择器中选中的
内容限定
:contains(字符) 选中含有某个字符的标签
:parent 是否含有子标签
:empty
:has(选择器) 选中含有某个子标签的父标签
属性限定
[属性名称] 选出含有此属性的所有标签
[属性名=属性值]
可见性限定
:visible 选出可见的
:hidden 选出隐藏的
选中限定
:checked
:selected
子标签的限定
:first-child
:last-child
:nth-child(表达式)
DOM
获取标签
$(选择器);
创建标签对象
$("标签"); 任何JQuery API返回的都是JQuery对象
插入标签
父标签.append("子标签") 追加子标签
父标签.prepend("子标签") 在最前面插入子标签
标签.before("标签");
标签.after("标签");
子标签.appendTo("父标签选择器") 将子标签追加到对应的父标签
删除标签
标签.remove(选择器) 删除特定标签
标签.remove() 删除标签
标签.empty() 删除所有内容
获得添加属性
属性值 = 标签.attr(属性名)
标签.attr("属性名","属性值")
标签.attr({"属性名","属性值","属性名","属性值"});
改变样式
标签.css("样式属性名称","样式值")
标签.css({样式属性名称:"样式值",样式属性名称:"样式值"});
标签.addClass("class值");
标签.removeClass("class选择器的值");
动画效果
show(fast/slow/数字);
hide();
fadeIn(fast/slow/数字); 淡入淡出
fadeOut();
设置获得标签体
var xx = 标签.html()
标签.html("内容")
var val =标签.text()
标签.text("文本");
动态绑定事件
1.$(document).ready(function事件); HTML文档加载完成之后执行Ready中绑定的事件
$(document).ready(function(){
//获得事件发生的标签
$("#span2").bind("mouseover",function(){
alert("hello");
});
});
$(document).ready(function(){
$("#span2").mouseover(function(){
alert("aaaaa");
});
});
2.$(function(){
function事件
});
$(function(){
$("#span2").mouseover(function(){
alert("aaa");
});
});
JQuery对于Ajax的支持
$.get(url,回调函数,数据类型)
$.post(url,数据,回调函数,数据类型)
$.ajax();
$(function(){
$(":text:first").blur(function(){
var val = $(":text:first").attr("value");
var url = "http://localhost:8899/helloJSP129/as?name="+val;
$.get(url,function(data){
$("#span1").html(data);
});
//$.post(url, { name: "John", time: "2pm" } );
});
});
传递Json数据
json = {属性名:属性值,属性名:属性值}
$(function(){
$("select:first").change(function(){
var val = $("select option:selected").attr("value");
$.get("http://localhost:8899/helloJSP129/js?country="+val,function(data){
//将json字符串转成json对象,获得json对象数组
var jsons = eval("("+data+")");
//获得最后一个select,将jquery对象转换成js对象
//var sel = $("select:last").get(0);
var sel = $("select:last");
sel.empty();
for(var i=0;i<jsons.length;i++){
sel.append("<option value=http://www.mamicode.com/‘"+jsons[i].id+"‘>"+jsons[i].name+"");
}
});
});
});