jquery与jspjQuery基本回想jQuery与Ajax运用

Ajax全称为“Asynchronous JavaScript XML”(异步javaScript和XML)，它并不是指一种单一的技能，而是有机地利用了一系列交互式网页运用干系的技能所形成的结合体。

Ajax的上风不须要插件的支持

Ajax不须要任何浏览器插件，就可以被绝大多数主流浏览器所支持，用户只须要许可javaScript在浏览器上实行即可。

精良的用户体验

这是Ajax技能的最大优点，能在不刷新全体页面的条件下更新数据，这使得Web运用程序能更为迅速地回运用户的操作。

jquery与jspjQuery基本回想jQuery与Ajax运用 NoSQL

提高Web程序的性能

与传统模式比较，Ajax模式在性能上的最大差异就在于传输数据的办法，在传统模式中，数据提交时通过表单(Form)来实现的，而数据获取是靠全页面刷新来重新获取整页的内容，Ajax模式只是通过XMLHttpRequest工具向做事器提交希望提交的数据，即按需发送。

减轻做事器和宽带的包袱

Ajax的事情事理相称于在用户和做事器之间加了一个中间层，利用户操作与做事器相应异步化，它在客户端创建Ajax引擎，把传统办法下的一些做事器包袱的事情转移到客户端，便于客户端资源来处理，减轻做事器和宽带的包袱。

Ajax的XMLHttpRequest工具

Ajax的核心是XMLHttpRequest工具，它是Ajax实现的关键——发送异步要求、吸收相应及实行回调都是通过它来完成的。
XMLHttpRequest工具最早是在Microsoft Internet Explorer 5.0 ActiveX组件中被引入的，之后各大浏览器厂商都以javaScript内置工具的办法来实现XMLHttpRequest工具，虽然大家对它的实现办法有所差异，但是绝大多数浏览器都供应了类似的属性和方法，而且在实际脚本编写方法上的差异也不大，实现的到的效果也基本相同。

jQuery中的Ajax

jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是load()、$.get()和$.post()方法，第3层是$.getScript()和$.getJSON()方法。

1、load()方法

远程载入HTML文件

load()方法是jQuery中最为大略和常用的Ajax方法，能载入远程HTML代码并插入到DOM中，它的构造为：

load(url [,data] [, callback])

url:待装入 HTML 网页网址。

data:发送至做事器的 key/value 数据。
在jQuery 1.3中也可以接管一个字符串了。

callback:载入成功时回调函数。

$(document).ready(function(){ $("#send").click(function(){ $("#resText").load("test.html"); });});

等DOM元素加载完毕后，通过单击id为“send”的按钮来调用load()方法，然后将test.html的内容加载到id为“resText”的元素里。

显然，load()方法完成了原来很繁琐的事情，开拓职员只须要利用jQuery选择器为HTML片段指定目标位置，然后将要要加载的文件的URL作为参数通报给load()方法即可，当单击按钮后，test.html页面的HTML内容就会被加载并插入对应元素中。

筛选载入的HTML文件

上个例子是将test.html页面中的内容都加载到id为“resText”的元素里，如果只须要加载test.html页面内的某些元素，那么可以利用load()方法的URL参数来达到目的，通过为URL参数指定选择符，就可以很方便地从加载过来的HTML文档里筛选出所须要的内容。

load()方法的URL参数的语法构造为“url selector”,把稳，URL和选择器之间有一个空格，例如只须要加载test.html页面中class为“para”的内容，可以利用如下代码来完成：

$("#resText").load("test.html .para");通报办法

load()方法的通报办法根据参数data来自动指定，如果没有参数通报，则采取GET办法，反之，则会自动转换为POST办法。

回调参数

对付必须在加载完成后才能连续的操作，load()方法供应了回调函数（callback），该函数有3个参数，分别代表要求返回的内容、要求状态和XMLHttpRequest工具，jQuery代码如下：

$("#resText").load("test.html", function(responseText, textStatus, XMLHttpRequest){ //responseText 要求访问的内容 //textStatus 要求状态：success、error、notmodified、timeout //XMLHttpRequest XMLHttpRequest工具});

2、$.get()方法和$.post()方法

load()方法常日用来从Web做事器上获取静态的数据文件，然而这并不能表示Ajax的全部代价，在项目中，如果须要通报一些参数给做事器中的页面，那么可以利用$.get()或者$.post()方法（或$.ajax()方法）。

$.get()

$.get(url [,data] [,callback] [,type]);

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

示例代码如下：

$("#send").click(function(){ $.get("get1.php",{ username: $("#username").val(), content:$("#content").val() }, function(data, textStatus){//code。。。 });});

这是一个大略的 GET 要求功能以取代繁芜 $.ajax 。
要求成功时可调用回调函数。
如果须要在出错时实行函数，请利用 $.ajax。

$.post()

它与$.get()方法的构造和利用办法都相同，不过它们之间仍旧有以下差异。

GET要求会将参数跟在URL后进行通报，而POST要求则是作为HTTP的实体内容发送给Web做事器，当然，在Ajax要求中，这种差异对用户是不可见的。
GET办法对传输的数据有大小限定（常日不能大于2KB），而是用POST办法通报的数据量要比GET办法大得多（理论上不会受限定）。
GET办法要求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等，在某种情形下，GET办法会带来严重的安全性问题，而POST办法相对来说就可以避免这些问题。
GET办法和POST办法通报的数据在做事器真个获取也不相同，在jsp中，GET办法的数据可以用Request.QueryString获取，而POST办法可以用Request.Form获取。

上面利用load()、$.get()和$.post()方法完成了一些常规的Ajax程序，如果还须要编写一些繁芜的Ajax程序，那么就要用到jQuery中的$.ajax()方法，$.ajax()方法不仅能实现与load()、$.get()和$.post()方法同样的功能，而且还可以设beforeSend(提交前回调函数)、error(要求失落败后处理)、success(要求成功后处理)以及complete(要求完成后处理)回调函数，通过这些回调函数，可以给用户更多的Ajax提示信息，其余，还有一些参数，可以设置Ajax要求的超时时间状态等。

3、$.ajax()方法

$.ajax()方法是jQuery最底层的Ajax实现，它的构造为：

$.ajax(url, [settings])

url:一个用来包含发送要求的URL字符串。

settings:AJAX 要求设置。
所有选项都是可选的。

settings选项1

settings选项2

$.ajax("test.json", { type: "get", url: "test.json", dataType: "json", success: function(data){//code… }});序列化元素

serialize() | jQuery API 3.2 中文文档 | jQuery API 在线手册

serializearray() | jQuery API 3.2 中文文档 | jQuery API 在线手册

$.param(obj,[traditional]) | jQuery API 3.2 中文文档 | jQuery API 在线手册

若觉得对您有用，可以关注并转发，您的关注是对我莫大的支持！