前言

主要谈谈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",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></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='"+jsons[i].id+"'>"+jsons[i].name+"</option>"); } }); }); });

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!