1.什么是ajax?
AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
ajax不是新的编程语言,而是一种使用现有标准的新方法。ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页(不使用ajax)如果需要更新内容,必须重载整个网页面。
ajax的优点:
1、最大的一点是页面无刷新,用户的体验非常好。
2、使用异步方式与服务器通信,具有更加迅速的响应能力。。
3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处 理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
5、ajax可使因特网应用程序更小、更快,更友好。
ajax的缺点:
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试。
1、常用的属性
a)onreadystatechange:当请求状态改变时,需要调用的js方法
b)readystate:当前请求的状态
c)status:服务执行的状态
d)responseText:服务器返回的文本类型的值
e)responseXML:服务器返回的XML类型的值
2、常用的方法
a)abort: 强行停止当前的请求。
b)open(method,url[,requesttype]):加载一个连接/请求
c)send(param):发送请求
d)getAllResponseHeader:获取所有请求的头信息
e)getResponseHeader("header"):获取指定的请求头信息
f)setResponseHeader("header","value"):设置请求的头信息
==================================jquery================================
jQuery也就是JavaScript和Query(查询),即是辅助JavaScript开发的库。
jQuery优势:
1).轻量级
2).强大的选择器
3).出色的DOM操作封装
4).可靠的事件处理机制
5).出色的浏览器兼容性
6).完善的Ajax支持
7).出色的浏览器兼容性等
8).jQuery理念:写的少,做的多
4.jQuery之旅——简单的jQuery对象
$("#test").html()
document.getElementById("tes").innerHTML;
5.jQuery选择器——基本选择器
基本选择器是jQuery中最常用的选择,也是最简单的选择器,它通过id、class和标签名等来查找DOM元素。
选择器 | 描述 | 返回 | 示例 |
#id | 根据给定的ID匹配一个元素 | 单个元素 | $(“#test”)选取ID为test的元素 |
.class | 根据给定的类名匹配元素 | 集合元素 | $(“.test”)选取所有class为test的元素 |
element | 根据给定的元素名匹配元素 | 集合元素 | $(“p”)选取所有的<p>元素 |
* | 匹配所有元素 | 集合元素 | $(“*”)选取所有的元素 |
selector1 … selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 集合元素 | $(“div,span,p”)选取所有的<div><span>标签的一组元素 |
通过DOM元素之间的层次关系来获取特定的元素。
选择器 | 描述 | 返回 | 示例 |
$(“ancestor descendant”) | 选取ancestor元素里的所有的descendant(后代)元素 | 集合 元素 | $(“div span”)选取<div>里所有的<span>元素 |
$(“parent>child”) | 选取parent元素下面的child(子)元素 | 集合 元素 | $(“div > span”)选取<div>下元素名是<span>的子元素 |
$(“prev + next”) | 选取紧接在prev元素后的next元素 | 集合 元素 | $(“.one + div”)选取class为one的下一个<div>元素 |
$(“prev~iblings”) | 选取prev元素之后所有的siblings元素 | 集合 元素 | $(“#two~div”)选取id为two的元素后面的所有div兄弟元素 |
7.jQuery选择器——表单选择器
选择器 | 描述 | 返回 | 示例 |
:input | 选取所有的input、textare、select和Button元素 | 集合元素 | $(“:input”) |
:text | 选取所有的单行文本框 | 集合元素 | $(“:text”) |
:password | 选取所有的密码框 | 集合元素 | $(“:password”) |
:radio | 选取所有的单选按钮 | 集合元素 | $(“:radio”) |
:checkbox | 选择所有的多选框 | 集合元素 | $(“:checkbox”) |
submit | 选取所有的提交按钮 | 集合元素 | $(“:submit”) |
button | 选取所有的按钮 | 集合元素 | $(“:button”) |
file | 选取所有的上传域 | 集合元素 | $(“:file”) |
hidden | 选取所有的不隐藏域 | 集合元素 | $(“:hidden”) |
创建节点:使用 jQuery的工厂函数 $(): $(html);
例如:$(“<p/>”):创建P元素
$(“<li></li>”):创建li元素
注意:
动态创建的新元素节点不会被自动添加到文档中,而是需
要使用其他方法将其插入到文档中;
当创建单个元素时,需注意闭合标签和使用标准的XHTML格式.
例如:创建<p>元素。
$(“<p/>”)或 $(“<p></p>”)
但不能使用$(“<p>”) 或$(“<P>”)
attr(name) 例如:$(“img”).attr(“title”)
attr(key,value)例如 $(“img”).attr(“src”,”a.jpg”)
removeAttr(name)例如:$(“img”).removeAttr(“title”)
html() 例如: varabc=$(“#diva”).html();
html(val) 例如:$(“#diva”).html(“abcd”);
text()
text(val)
css(class,value)
addClass(class)
toggleClass(class)
removeClass([class])
$.ajax({option});
多数的参数都通过option指定。
参数名 | 类型 | 描述 |
url | String | (默认: 当前页地址) 发送请求的地址。 |
type | String | (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 Delete 也可以使用,但仅部分浏览器支持。 |
timeout | Number | 设置请求超时时间(毫秒)。此设置将覆盖全局设置。 |
async | Boolean | (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。 |
beforeSend | Function | 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP头。XMLHttpRequest 对象是唯一的参数。 function (XMLHttpRequest) { |
参数名 | 类型 | 描述 |
cache | Boolean | (默认: true) 设置为 false 将不会从浏览器缓存中加载请求信息。 |
complete | Function | 请求完成后回调函数 (请求成功或失败时均调用)。参数:XMLHttpRequest 对象,成功信息字符串。 function (XMLHttpRequest, textStatus) { |
contentType | String | (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。 |
data | Object, | 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。 |
dataType | String | 预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值: "xml": 返回 XML 文档,可用 jQuery 处理。 "html": 返回纯文本 HTML 信息;包含 script 元素。 "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。 "json": 返回 JSON 数据 。 "jsonp": JSONP 格式。 |
$.load()
load(url,[data], [callback]);
url: 请求HTML网页网址。
data:发送至服务器的key/value数据(可选)。
callback:请求完成时的回调函数。
注意:在load方法中,无论请求是否成功,只要当请求完成后,回调函数就会被触发。
$.get(url,[data], [callback], [type])
参数名称 | 类型 | 描述 |
url(必须) | String | 请求的服务器URL地址 |
Data(可选) | Object | 发送至服务器的key:value数据,会作为QueryString附加到请求的URL中 |
Callback(可选) | Function | 载入成功时回调函数(只有当response的返回状态是success时才调用该方法) |
Type(可选) | String | 服务端返回内容的格式,包括xml、html、script、json、text和_default等 |
$.get("getdemo.jsp", {
username:encodeURI($("#username").val() ) ,
password:encodeURI($("#password").val() )
},function (data){
$("#resText").html( decodeURI(data) ); // 把返回的数据添加到页面上
}
);
jQuery对Ajax的应用——$.post()
$.post(url,[data], [callback], [type])
参数名称 | 类型 | 描述 |
url(必须) | String | 请求的服务器URL地址 |
Data(可选) | Object | 发送至服务器的key/value数据。会作为QueryString附加到请求的URL中 |
Callback(可选) | Function | 载入成功时回调函数(只有当response的返回状态是success时才调用该方法) |
Type(可选) | String | 服务端返回内容的格式,包括xml、html、script、json、text和_default等 |
$.post("postdemo.jsp",{
username:encodeURI($("#username").val() ) ,
password:encodeURI($("#password").val() )
}, function (data){
$("#resText").html(decodeURI(data)); // 把返回的数据添加到页面上
}
);
$.post()的结构和用法与$.get()一致主要区别如下:
1、数组
2、对象
数组在js中是中括号“[]”扩起来的元素,每个元素用逗号
分隔,元素可以是任意的值。
例如:
[ "abc", 123 , true, null ]
访问其中的元素,使用索引号,从0 开始。
对象在js中表示为”{}”扩起来的内容,数据为{key:value,...}的键值对的结构,其中Key和Value之间用冒号分割,每个key-value之间用逗号分割。
例如:
{ "bookname":"Ajax基础",
"publisher":"电子工业出版社",
"price": 56.0
}
访问其中的数据,通过obj.key来获取对应的value
通过对对象、数组2种结构的组合就可以构建成复杂的数据结构。即Object或数组中的值还可以是另一个Object 或者数组。
例如:
[
{“name”:“张三”,“age”:18 , “loves”:[“看书”,“游泳"]},
{"name":"王五","age": 20,"loves":["旅游"]}
]
$.getJSON(url,[data], [callback])
url: 用于获取JSON文件的网址。
data:发送至服务器的key/value数据(可选)。
callback:请求完成时的回调函数。
[
{"ename":"章安","esex":"男","escore":"15"}
,{"ename":"李四","esex":"女","escore":"17"}
]
$.getJSON("test.json",function(data){
}
$.getJSON(url,function(data){
$.each(data,function(index,msg){
alert(msg.ename+"--"+msg.esex);
});
});
jQuery事件——绑定事件
语法如下:bind(type[ ,data ] , fn );
type:事件类型,包括click、blur、focus、load、change等
data:可选参数,作为属性值传递给事件对象的额外数据对象
fn :绑定事件的处理函数
envnt.type 获取事件类型
event.target 获取触发事件的元素
event.pageX event.pageY获取光标相对于页面的坐标
event.which 获取鼠标左中右键或者键盘按键
event.metakey获取ctrl键
event.originalEvent 指向原始的事件对象
语法:unbind( [ type ] [ ,fn] );
type:事件类型 fn:将以移除的函数
语法:one( type [ ,data ],fn );
$("#tsp").one("click",{uname:"admin"},function(event){
alert(event.data.uname);
} );
One绑定的事件在整个文档中,只会执行一次.
方法一:停止事件冒泡event.stopPropagation();
方法二:阻止默认行为event.preventDefault();
$("#tsp").bind("click",{uname:"admin"},function(event){
alert(event.data.uname);
event.stopPropagation();
//或者
event.preventDefault();
});
也可以用return false;代替上述两种方法
1 你在公司是怎么用jquery的?
答:在项目中是怎么用的是看看你有没有项目经验(根据自己的实际情况来回答) 你用过的选择器啊,复选框啊,表单啊,ajax啊,事件等
配置Jquery环境 下载jquery类库 在jsp页面引用jquery类库即可
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"/>
接下来通过在<script> $(function(){ }); </script>
2.你为什么要使用jquery?
答:因为jQuery是轻量级的框架,大小不到30kb,它有强大的选择器,出色的DOM操作的封装,有可靠的事件处理机制(jQuery在处理事件绑定的时候相当的可靠),完善的ajax(它的ajax封装的非常的好,不需要考虑复杂浏览器的兼容性和XMLHttpRequest对象的创建和使用的问题。) 出色的浏览器的兼容性。 而且支持链式操作,隐式迭代。行为层和结构层的分离,还支持丰富的插件,jquery的文档也非常的丰富。
4 你使用jquery遇到过哪些问题,你是怎么解决的?
答:这个答案是开发的,看你是否有相关的项目经验。
例前台拿不到值,JSON 可是出现的错误(多了一个空格等)这编译是不会报错的 jquery库与其他库冲突:
1>如果其他库在jquery库之前导入的话
1.我们可以通过jquery.noconflict()将变量的$的控制权过度给其他库
2.自定义快捷键,用一个变量接住jquery.noconflict()
3.通过函数传参
2>如果jquery库在其他库之前导入就直接使用jquery
今天在处理一个数据问题时,发现jQuery.ajax()方法返回的值一直有问题,清除
缓存后数据无误,多次测试后发现返回的值都是之前的值,并且一直未执行url(后
台为JAVA,设置断点一直未进入)。在网上查找下,发现是未设置type的原因。 如
果没设置jQuery.ajax的type="Post",那么ajax就会默认type="Get",这就会
导致之前数据被缓存起来。加上type="Post",问题解决!
回答:其实美元符号$只是”jQuery”的别名,它是jQuery的选择器,如下代码:
1: $(document).ready(function(){
2:
3: });
当然你也可以用jQuery来代替$,如下代码:
1: jQuery(document).ready(function(){
2:
3: });
jQuery中就是通过这个美元符号来实现各种灵活的DOM元素选择的,例如$(“#main”)即选中id为main的元素。
7.body中的onload()函数和jQuery中的document.ready()有什么区别?
onload()和document.ready()的区别有以下两点:
1、我们可以在页面中使用多个document.ready(),但只能使用一次onload()。
2、document.ready()函数在页面DOM元素加载完以后就会被调用,而
onload()函数则要在所有的关联资源(包括图像、音频)加载完毕后才会调用。
8.Jquery中有哪几种类型的选择器?
从我自己的角度来讲,可以有3种类型的选择器,如下:
1、基本选择器:直接根据id、css类名、元素名返回匹配的dom元素。
2、层次选择器:也叫做路径选择器,可以根据路径层次来选择相应的DOM元素。
3、过滤选择器:在前面的基础上过滤相关条件,得到匹配的dom元素。
9.如何用jQuery禁用浏览器的前进后退按钮?
实现代码如下:
1: <script type="text/javascript" language="javascript">
2:
3: $(document).ready(function() {
4:
5: window.history.forward(1);
6:
7: //OR
8:
9: window.history.forward(-1);
10:
11: });
12:
13: </script>