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>
扫一扫
8656
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
