jquery ajax同步和异步 ajax同步异步的处理 收藏 0

Ajax异步操作集合啦

/*

* Ajax的核心操作对象是xmlHttpRequest

*/

实例化对象

考虑到兼容问题,非IE5/IE6 使用 => new XMLHttpRequest;

IE5/IE6使用 => new ActiveXObject(Microsoft.XMLHTTP); ☯神呐，请带走IE吧！

发送请求

使用 XMLHttpRequest 对象的 open(\’GET\’,url,async) 和 send 方法：

❶ open 有三个参数：

分别为http请求方式(get/post) ==》与 POST 相比，GET 更简单也更快，POST 没有数据量限制，不会缓存，相对安全

http请求地址 ==》url(统一资源定位符)文件所在服务器的地址

：true（异步）或 false（同步）

❷send(string) ：仅用于 POST 请求

接受响应，执行回调

当readyState的值发生改变时，触发readystatechange事件，事件中就可以为所欲为了

readyState==4 =>请求加载完成 / http的状态为200 =>响应成功

/*

* js就是这么复杂，一套行云流水的操作下来，浏览器F5，哎，咋没效果，不行，修改代码，再刷，还有bug等着你！ (∪｡∪)｡｡｡zzz 敲两行jQuery放松一下！

* jQuery操作ajax用一个封装的函数 $.ajax 就可以搞定,操作步骤及其简化！！！

*/

常用参数

type:\”get\”, //http请求方式,值为 get/post 默认值为get

url:\”\”, //统一资源定位符 ！！！重要参数

async:true, //值为 true/false 默认值为true,为异步,ajax发送请求后,在等待server端返回的这个过程中，会继续执行ajax块后面的脚本（异步思想）,直到server端返回正确的结果才会去执行success

dataType:\”xml\”, //返回数据的类型 ,值为 xml/html/script/json/jsonp/text

data:obj, //传给sever的数据 可以是字符串也可以是对象(比如登陆时传用户名密码)

cache:true, //默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息

complete:function{}, //请求完成后调用的回调函数（请求成功或失败时均调用）

success:function(res){}, //成功时调用回调函数 ！！！重要回调

error: function (err) {} //发生错误时调用回调函数

jquery封装了 $.ajax $.post $.get $(selector).load $.getJson $.getScript

其实弄懂$.ajax就好了，别的都是它延伸出来，具有某种特异功能，$.ajax是大一统，霸天下，废话不多说，直接上实例，看注释

当然我们可以用浏览器提供的调试工具，搞清楚 阿贾克斯 的一举一动，还是

jQuery基础回顾——jQuery与Ajax应用

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

• 不需要插件的支持

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

• 优秀的用户体验

这是Ajax技术的最大优点，能在不刷新整个页面的前提下更新数据，这使得Web应用程序能更为迅速地回应用户的操作。

• 提高Web程序的性能

与传统模式相比，Ajax模式在性能上的最大区别就在于传输数据的方式，在传统模式中，数据提交时通过表单(Form)来实现的，而数据获取是靠全页面刷新来重新获取整页的内容，Ajax模式只是通过XMLHttpRequest对象向服务器提交希望提交的数据，即按需发送。

• 减轻服务器和宽带的负担

Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化，它在客户端创建Ajax引擎，把传统方式下的一些服务器负担的工作转移到客户端，便于客户端资源来处理，减轻服务器和宽带的负担。

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

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

1、load()方法

• 远程载入HTML文件

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

url:待装入 HTML 网页网址。

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

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

等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”的内容，可以使用如下代码来完成：

• 传递方式

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

• 回调参数

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

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

load()方法通常用来从Web服务器上获取静态的数据文件，然而这并不能体现Ajax的全部价值，在项目中，如果需要传递一些参数给服务器中的页面，那么可以使用$.get()或者$.post()方法（或$.ajax()方法）。

• $.get()

url:待载入页面的URL地址

data:待发送 Key/value 参数。

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

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

示例代码如下：

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

• $.post()

它与$.get()方法的结构和使用方式都相同，不过它们之间仍然有以下区别。

1. GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器，当然，在Ajax请求中，这种区别对用户是不可见的。
2. GET方式对传输的数据有大小限制（通常不能大于2KB），而是用POST方式传递的数据量要比GET方式大得多（理论上不会受限制）。
3. GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等，在某种情况下，GET方式会带来严重的安全性问题，而POST方式相对来说就可以避免这些问题。
4. 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实现，它的结构为：

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

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

settings选项1

settings选项2

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

上一节：

图片上传并回显Ajax异步篇

“FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。这是官方的讲解，我来说一下我的理解，我们new 一个FormData( $(form) )对象时，它会帮我们把form表单里的数据封装成键值对的形式，以前我们都时用input的submit进行提交数据，当我们拿到这个form对象的时候，我们就可以用ajax模拟input的submit提交，既然知道了这些，我们就开始一步步的编程吧。好了，我们开始编写我们的jquery代码吧，在编写之前我们理一下思路，当用户选择好图片时，即input 的change事件触发时，我们就把图片上传到服务器，服务端返回图片的url，我们拿到这个url时，把它设置为我们input外面盒子的背景图。我们已经实现了change事件触发时，我们把图片上传到服务器，我们也可以改变我们已经选择好的图片，到这里肯定还没有结束。因为用户只是选择了一张图片，如果我们的业务需要用户上传多张图片呢，那我们这个肯定就不满足要求了，我们需要再给我们的代码添加一些功能。比如说，当用户选择好一张后，再生成一个form->input标签，然后就这样递归；但我们还需要加一些条件，就是当用户改变已经选择好的图片时，我们不能生成form->input标签。

图片如何无刷新的上传到服务器呢?继前两篇文章后，我们来实战一下如何无刷新的异步上传图片，我们还是先看一下效果

图片上传并回显Ajax异步篇

在实战前呢，我们需要做些准备工作。比如说，了解一下FormData对象

“FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()用来提交表单，这个方法和提交表单按钮很类似。\”)方法来发送数据，从而，发送数据具有同样形式。”

这是官方的讲解，我来说一下我的理解，我们new 一个FormData( $(form) )对象时，它会帮我们把form表单里的数据封装成键值对的形式，以前我们都时用input的submit进行提交数据，当我们拿到这个form对象的时候，我们就可以用ajax模拟input的submit提交，既然知道了这些，我们就开始一步步的编程吧。

我们先完善一下界面，看一下下面的代码

这是body里的内容，不要忘了form，只是没有了action，enctype属性也要设置好，我的上一篇文章有对enctype的讲解

这是css里的内容

基本的样式都已经编写完成，我们来参观一下吧

好了，我们开始编写我们的jquery代码吧，在编写之前我们理一下思路，当用户选择好图片时，即input 的change事件触发时，我们就把图片上传到服务器，服务端返回图片的url，我们拿到这个url时，把它设置为我们input外面盒子的背景图。既然知道了思路我们就编写一下代码吧

我们把change事件的执行函数独立出来，因为我们可能还需要用到这个函数。函数也没有什么难点，就是保存一个this对象，加一个ajax。我们来看一下效果图

我们已经实现了change事件触发时，我们把图片上传到服务器，我们也可以改变我们已经选择好的图片，到这里肯定还没有结束。因为用户只是选择了一张图片，如果我们的业务需要用户上传多张图片呢，那我们这个肯定就不满足要求了，我们需要再给我们的代码添加一些功能。比如说，当用户选择好一张后，再生成一个form->input标签，然后就这样递归；但我们还需要加一些条件，就是当用户改变已经选择好的图片时，我们不能生成form->input标签。好了需求大概就是这样的。

我们来理一下思路：

1、我们需要给form标签外面添加一个盒子，我们把所有生成的form标签都放里面。

2、我们需要有一个计数器，记录form的个数，也是通过这个我们可以给form和input设置不同的id

3、我们需要判断当前change事件是第几个，如果它的id中的数值部分和count一样，我们就新生成一个form，否则就返回

我们先看一下我们的html部分

我们来编码实现一下js

这样的话我们基本就实现了我们的效果，就如开头中的效果，这个是可以无限添加form的，到时候可以给count设置一个上界，根据自己的业务来调整吧，到此我们的图片上传并回显系列就算完结了;

听说520快到了，我们是不是需要new一个会说话的对象呢，520的时候我们就来实战new一个对象吧，也是作为一个礼物送给大家呢(手动滑稽)

图片上传并回显系列

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com