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格式数据的获取与响应，其他的并不难。