Java Web开发(五) JavaScript库jQuery学习(3) jQuery与Ajax的应用(1)
关于jQuery选择器的知识这里就先不介绍了，这里向大家介绍一种比较厉害的技术，就是jQuery的Ajax应用，哈哈哈，我们当然先了解一些先进的技术啦，之后再为大家介绍jQuery选择器和其他知识。
现在让我们进入强大的jQuery的Ajax应用学习中吧。
一：Ajax简介
1.Ajax全称为“Asynchronous Javascript And XML”（异步 JavaScript 和 XML)，是指一种创建交互式网页应用的网页开发技术。
2.该技术并不是一种单一的技术，而是一系列交互式网页应用相关的技术所形成的结合体。
3.优点
(1) 创建快速动态网页。
(2) 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。使Web应用程序能更为快速地回应用户的操作。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
(3) 不需要任何插件支持，就能被绝大多数主流浏览器所支持，只需允许JavaScript在浏览器上执行即可。
(4) 与传统模式相比，Ajax模式在性能上的最大区别就在于传输数据的方式。在传统模式中，数据提交是通过表单来实现的，而数据获取是靠全页面刷新来重新获取整页的内容;Ajax模式只是通过XMLHttpRequest对象向服务器端提交希望提交的数据，按需发送。
(5) Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。它在客户端创建Ajax引擎，把传统模式下的一些服务器的工作转到客户端，既便于客户端资源管理，又减轻服务器和带宽的负担。
4.缺点
就算看起来很完美的Ajax也并不是一项完美的技术。Ajax主要有以下几点不足：
(1) 浏览器对XMLHttpRequest对象的支持度不足
为了使Ajax应用能在各个浏览器中正常运行，我们必须花费大量的精力编码兼顾各个浏览器之间的差别,来让Ajax应用能够很好地兼容各个浏览器。这使得Ajax开发的难度比普通的Web开发高出很多。
(2) 破坏浏览器前进，"后退"按钮的正常功能
在Ajax中"前进"和"后退"按钮功能都会失效，大多数程序员宁可放弃前进，后退功能，也不愿意在繁琐的逻辑中去处理问题。然而，对于用户来说，他们会经常想后退取消操作，就会使得通过Ajax交互得到的内容消失掉。
(3) 对搜索引擎的支持的不足
由于是动态网页技术，通常浏览器通过爬虫程序来对互联网上的数据进行搜索整理，然而爬虫程序现在还不能理解那些奇怪的JavaScript代码和引起的页面内容的变化，推广起来会更难。
(4) 开发和调试工具的缺失
这一点相信大家都能理解。
4.Ajax的XMLHttpRequest对象
XMLHttpRequest对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。当页面全部加载完毕后，客户端通过该对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。 而且，它可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。
这个对象是Ajax实现的关键：发送异步请求，接收响应及执行回调都是通过它来完成的。虽然浏览器对它的实现方式有所区别，但是大多数浏览器都提供了类似的属性和方法，编写方法的区别也不大，实现得到的效果也基本相同。
二：jQuery中的Ajax
由于XMLHttpRequest对象的很多属性和方法，对于想要快速入门Ajax的人来说是很困难的，然而，jQuery中提供了一些快捷操作，使得jQuery开发Ajax变得容易，这样，我们就不必理会那些繁琐的XMLHttpRequest对象，就能把大部分程序开发集中在业务和用户体验上，既减轻了我们的负担，又能给用户更好的体验。下面介绍jQuery中的Ajax。
jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，而第二层是load()，$.get()和$.post()方法，第三层是$.getScript()和$.getJSON()方法。下面先介绍第二层的方法。
1.load()方法
(1)结构：load(url[,data][,callback])
(2)作用：载入远程HTML代码并插入DOM中。
(3)参数解释：
| 名称 | 类型 | 说明 |
|---|---|---|
| url | String | 请求的HTML页面的URL地址 |
| data | Object | 发送至服务器的key/value数据 |
| callback | Function | 请求完成时的回调函数，无论请求成功或失败 |
load()方法完成了原本很繁琐的工作。开发人员只需要使用jQuery选择器为HTML片段指定目标位置，然后将要加载的文件的URL作为参数传递给load()方法即可，如果你在主界面用CSS添加了样式，就会应用到新加载的页面上。
参数详解：
url：请求的HTML页面的地址，如果只需要一部分元素，可以通过为URL参数指定选择符。
语法结构为："url selector"，这里要注意的是，URL和选择器之间有一个空格。
data：如果该参数没有，则采取GET方式传递；反之，则会自动转换为POST方式。
该参数是一个键值对集合。
callback：该参数是为在加载完成后才继续执行的操作而设定的。该参数实际上是一个回调函数。
写法为：function(responseText,textStatus,XMLHttpRequest){}
该参数函数也有三个参数：
| response | 请求返回的内容 |
| textStatus | 请求状态success,error,notmodfied,timeout |
| XMLHttpRequest | XMLHttpRequest对象 |
注：无论Ajax请求是否成功，只要当请求完成后，回调函数就被触发。
上面的load()方法通常用来从Web服务器上获取静态的数据文件。但如果需要传递一些参数给服务器中的页面，可以使用$.get()或者$.post()方法或者$.ajax()方法。$.get()和$.post()方法是jQuery中的全局函数，对jQuery对象进行操作。
2.$.get()方法
(1)方式：该方法使用GET方式进行异步请求
(2)结构：$.get(url[,data][,callback][,type])
(3)参数解释：
| 参数名称 | 类型 | 说明 |
|---|---|---|
| url | String | 请求的HTML页的URL地址 |
| data | Object | 发送至服务器的key/value数据会作为QueryString附加到请求URL中 |
| callback | Function | 载入成功时回调函数(只有当Response的返回状态是success才调用该方法)自动将请求结果和状态传给该方法 |
| type | String | 服务端返回内容的格式，包括xml,html,script,json,text和_default |
(4)实例
我们先创建一个评论页面的HTML代码：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>信息网页</title>
<script src = "https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- <script src = "myjQuery.js"></script> -->
<script>
$(document).ready(function(){
});
</script>
</head>
<body>
<form id="forml" action="#">
<p> 请填写 </p>
<p> 姓名 <input type="text" name="name" id="name"/></p>
<p> 内容 <textarea name="content" id="content" rows="5" cols="20"></textarea></p>
<p> <input type="button" id="sendButton" value="发送" /></p>
</form>
<div class="this"> 结果为: </div>
<div id="getText"> </div>
</body>
效果如下：
这里我们先把HTML分为两个文件：
a:我们首先要确定请求页面的URL地址，但是我们提交时会出现错误：
原因很简单，浏览器（Webkit内核）的安全策略决定了file协议访问的应用无法使用
XMLHttpRequest对象。
跨域请求仅支持协议：http, data, chrome, chrome-extension, https, chrome-extension-resource
在某些浏览器中是允许这种操作的，比如Firefox浏览器，也就是说Filefox支持file协议下的AJAX请求。我们这里就用火狐浏览器来进行操作。
b：然后我们获取我们想要得到的数据后，就可以通过回调函数将返回的数据显示在页面上，
这里$.get()的回调函数又两个参数：
function(data,textStatus){
}
| data | 请求返回的内容，可以是XML文档，JSON文件，HTML片段 |
| textStatus | 请求的状态,有success，error，notmodified，timeout |
注：回调函数只有当数据成功返回后才被调用。
(5)type参数数据格式
服务器返回的数据格式可以有多种。下面是几种常见的返回格式：
a：HTML片段
由于返回的是HTML片段，因此并不需要经过处理就可以经返回的数据插入到主页面中。
代码示例：
[code]$(document).ready(function(){
$("#sendButton").click(function(){
$.get("myTest.html",
{
name : $("#name").val(),
content : $("#content").val()
},function(data,textStatus){
$("#getText").html(data);
},
"html");
});
});
优点：使用方便。
缺点：但这种固定的数据结构并不一定能在其他的Web应用程序中广泛使用。
b：XML文档
由于服务器返回数据格式的是XML文档，因此需要对返回的数据进行处理，处理XML文档与处理HTML文档一样，可以使用常规的attr()，find()，filter()以及其他方法。
代码示例：
[code]$(document).ready(function(){
$("#sendButton").click(function(){
$.get("myTest.html",
{
name : $("#name").val(),
content : $("#content").val()
},function(data,textStatus){
//$("#getText").html(data);
var name = $(data).find("this").attr("name");
var content = $(data).find("this content").text();
var txtHtml = "<div class='this'><h6>"+name+":</h6><p class='sa'>"+content+"</p></div>"
$("#getText").html(txtHtml);
});
});
});
这里要注意的是服务端必须为XML格式。
优点：可移植性比较强以这种数据格式提供的数据的重用性将极大提高。
缺点：实现比较复杂，XML体积相对较大，解析和操作它们的速度要慢些。
c：JSON文件
JSON集合了HTTP和XML的优点，即简洁，容易阅读，也可以方便的被重用。
由于服务端返回的数据格式师JSON文件，因此也需要对返回的数据进行处理。
代码示例：
[code]$(document).ready(function(){
$("#sendButton").click(function(){
$.get("myTest.html",
{
name : $("#name").val(),
content : $("#content").val()
},function(data,textStatus){
var name = data.name;
var content = data.content;
var txtHtml = "<div class='this'><h6>"+name+":</h6><p class='sa'>"+content+"</p></div>"
$("#getText").html(txtHtml);
},"JSON");
});
});
上面的代码中，把返回格式设置为"JSON"来指定返回的数据格式。
具体用到哪个格式要具体问题具体考虑。
3.$.post()方法
该方法与$.get()方法的的结构和使用方式都相同，不过它们之间仍有以下区别：
(1)GET请求会将发送的数据作为QueryString附加到请求URL中，而POST请求则是通过HTTP消息的实体内容发送给Web服务器。这种区别对用户是不可见的。
(2)GET方式对传输的数据有大小限制(通常不能大于2KB),而使用POST方式传递的数据量要比GET方式大得多。
(3)GET方式请求的数据会被浏览器缓存起来，会带来严重的安全问题，而POST方式相对来说就可以避免这些问题。
(4)GET方式和POST方式传递的数据在服务端的获取也不相同。在不同的方式下，获取方法也不同。
(5)前面讲到，$.load()方法在加入data参数时，是以POST方式发送请求，因此可以用该方法来完成同样的功能。
上面介绍了jQuery对Ajax操作的第二层的$.load()，$.get()和$.post()方法，之后会介绍可以实现第二层所有功能的$.ajax()方法和可以加载json文件的第三层$.getScript()方法和$.getJson()方法。
阅读更多
- JavaScript学习 jquery学习11 ajax开发
- java web开发：ajax技术（五）——锋利的JQuery
- Java Web开发及应用软件方向的学习计划
- JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果
- 黑马程序员--Java学习笔记之Web开发—JavaScript常用触发事件总结
- 【JavaWeb开发】使用Jquery与Ajax实现动态联级菜单
- 学习使用J2EE Web应用的事件功能-Java基础-Java-编程开发
- web开发-javascript编程prototype、this、ajax、json、结构体和数组-学习笔记十四
- java web开发学习-13 ajax技术简介
- JQuery中使用Ajax传中文参数乱码解决方案(javaweb开发)
- 面向 Java 开发人员的 Ajax: 结合 Direct Web Remoting 使用 Ajax----数据序列化不可能比这更简单了！
- 面向Java开发人员的Ajax:结合Direct Web Remoting使用Ajax
- 谈谈Java Web开发的学习路径
- 面向 Java 开发人员的 Ajax: 使用 Google Web Toolkit 开发 Ajax
- 基于WEB应用开发的java程序员必备工具
- 面向 Java 开发人员的 Ajax: Google Web Toolkit 入门
- 开始学习java web开发
- 基于WEB应用开发的java程序员必备工具
- AJAX开发的性能冲击：使用AJAX提高WEB应用的带宽使用率
- Idea开发Java WEB 应用入门教程