ajax异步请求的常见方式

首先先介绍下ajax，ajax(ASynchronous JavaScript And XML)为异步的javascript和xml。所谓的异步和同步是指：

同步：客户端必须等待服务器的响应，在等待期间客户端不能作其余操做。

异步：客户端无须等待服务器的响应，在服务器处理请求的过程当中，客户端能够进行其余的操做。

Ajax可以在无需加载整个页面的状况下，可以更新部分网页内容，能够减少服务器的资源浪费。经过在后台与服务器进行少许数据交换，Ajax 可使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。而传统的网页若是须要更新内容，必须从新加载整个网页页面。

ajax大致上有四种实现方式，因为基于JS的实现方式太过于复杂，基本上用不到，因此就暂不贴出其实现代码了。

1.使用$.ajax()发送异步请求

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其建立的 XMLHttpRequest 对象。大多数状况下你无需直接操做该函数，除非你须要操做不经常使用的选项，以得到更多的灵活性。 最简单的状况下，$.ajax()能够不带任何参数直接使用。 

$.ajax的参数列表以下：

url:(默认: 当前页地址) 发送请求的地址。

async:(默认: true) 默认设置下，全部请求均为异步请求。若是须要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操做必须等待请求完成才能够执行。

type:请求方式，常见参数为POST,GET等等， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可使用，但仅部分浏览器支持。

data:请求参数。必须为 Key/Value 格式。若是为数组，jQuery 将自动为不一样值对应同一个名称。如 {name:["zhangsan", "lisi"]} 转换为 '&name=zhangsan&name=lisi'。

dataTpye:预期服务器返回的数据类型。若是不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，好比XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值以下：

　　　　"xml": 返回 XML 文档，可用 jQuery 处理。

　　　　"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。

　　　　"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。注意：在远程请求时(不在同一个域下)，全部POST请求都将转为GET请求。(由于将使用DOM的script标签来加载)

　　　　"json": 返回 JSON 数据 。

　　　　"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

　　　　"text": 返回纯文本字符串

contentType: 请求数据的类型，(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数状况。若是你明确地传递了一个content-type给 $.ajax() 那么他一定会发送给服务器（即便没有数据要发送）。若是请求数据是json格式的，则须要填写'application/json; charset=UTF-8'，不然后台没法获取到数据。

若是要处理$.ajax()获得的数据，则须要使用回调函数。beforeSend、error、dataFilter、success、complete。

• beforeSend 在发送请求以前调用，而且传入一个XMLHttpRequest做为参数。
• error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（若是有的话）
• dataFilter 在请求成功以后调用。传入返回的数据以及"dataType"参数的值。而且必须返回新的数据（多是处理过的）传递给success回调函数。
• success 当请求以后调用。传入返回后的数据，以及包含成功代码的字符串。
• complete 当请求完成以后调用这个函数，不管成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

注意，必须确保网页服务器报告的MIME类型与咱们选择的dataType所匹配。好比说，JSON的话，服务器端就必须声明application/json来得到一致的结果。

示例：

//发送登录请求
$.ajax({
　 url:"/login.do" , 　type:"POST" , dataType:"text", data:{"name":"zhangbo"}, success:function (data) { 　　　　 alert(data); }, error:function () { alert("请求响应错误"); } }); //加载并执行一个 JS 文件。 $.ajax({ type: "GET", url: "test.js", dataType: "script" }); //装入一个 HTML 网页最新版本。 $.ajax({ url: "test.html", cache: false, success: function(html){ $("#results").append(html); } }); //同步加载数据。发送请求时锁住浏览器。须要锁定用户交互操做时使用同步方式。 var html = $.ajax({ url: "some.php", async: false }).responseText; //发送 XML 数据至服务器。设置 processData 选项为 false，防止自动转换数据格式。 var xmlDocument = [create xml document]; $.ajax({ url: "page.php", processData: false, data: xmlDocument, success: handleResponse });

2.使用$.get()发送get请求

一个简单的 GET 请求功能 。请求成功时可调用回调函数。若是须要在出错时执行函数，请使用 $.ajax。

$.get(url, [data], [callback], [type])的参数列表以下：

url:待载入页面的URL地址

data(可选):待发送 Key/value 参数。

callback(可选)：回调函数。

type(可选):响应结果的类型。xml, html, script, json, text, _default。

$.get("/login.do",{username:"zhangbo"},function (data) {
                alert(data);
      },"text");

3.使用$.post()发送post请求

一个简单的 POST请求功能 。请求成功时可调用回调函数。若是须要在出错时执行函数，请使用 $.ajax。

$.post(url, [data], [callback], [type])的参数列表以下：

url:待载入页面的URL地址

data(可选):待发送 Key/value 参数。

callback(可选)：回调函数。

type(可选):响应结果的类型。xml, html, script, json, text, _default。

$.post("/login.do",{username:"zhangbo"},function (data) {
              alert(data);
            },"text");

除了这些还有put,delete等等请求，和$.get()、$.post()差很少，就不一一叙述了。

上述三种异步实现的方式都大同小异，使用ajax的关键就在于json格式数据的获取与响应，其余的并不难。