Ajax详解

一、ajax定义

ajax 的全称是Asynchronous JavaScript and XML，其中，Asynchronous 是异步的意思，它有别于传统web开发中采用的同步的方式。

ajax原理和XmlHttpRequest对象

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。

简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

XMLHttpRequest这个对象的属性及从服务器请求数据的过程：

它的属性有：

  　　onreadystatechange  每次状态改变所触发事件的事件处理程序。

  　　responseText     从服务器进程返回数据的字符串形式。

  　　responseXML    从服务器进程返回的DOM兼容的文档数据对象。

  　　status           从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）

  　　status Text       伴随状态码的字符串信息

  　　readyState       对象状态值

请求数据的过程：　

• 0：未初始化。未调用open()方法
• 1：启动。已经调用open()方法，未调用send()方法
• 2：发送。已经调用send()方法，未接收到响应
• 3：接收。已经接收到部分数据
• 4：完成。已经接收到全部数据，可以在客户端使用

而XMLHttpRequest正是处理了服务器端和客户端通信的问题所以才会如此的重要。

但是，由于各浏览器之间存在差异，所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。

二、jquery中的ajax

先写一个简单例子

    $.ajax({
        type : 'post',
        url : 'http://localhost:8080/devLean',
        data : {age:23},            success : function (data) {
            console.log(data);
        }
    })

1.jQuery.ajax(...)
       部分参数：
　　　　　　　　type：请求方式，GET、POST（1.9.0之后用method）
              url：请求地址
　　　　　　　　data：要发送的数据
　　　　　　　　contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
            　async：是否异步


       beforeSend：发送请求前执行的函数(全局)
          success：成功之后执行的回调函数(全局)
            error：失败之后执行的回调函数(全局)
　　　　　　complete：完成之后执行的回调函数(全局)

          
         dataType：将服务器端返回的数据转换成指定类型
            "xml": 将服务器端返回的内容转换成xml格式
           "text": 将服务器端返回的内容转换成普通文本格式
           "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
         "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
           "json": 将服务器端返回的内容转换成相应的JavaScript对象
          "jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

　　　　　　headers：请求头
          timeout：设置请求超时时间（毫秒）

2. jQuery.get(...)
       所有参数：
              url: 待载入页面的URL地址
             data: 待发送 Key/value 参数。
          success: 载入成功时回调函数。
         dataType: 返回内容格式，xml, json,  script, text, html

3.jQuery.post(...)
       所有参数：
              url: 待载入页面的URL地址
             data: 待发送 Key/value 参数
          success: 载入成功时回调函数
         dataType: 返回内容格式，xml, json,  script, text, html

 $.ajax 中的contentType

在http 请求中，get 和 post 是最常用的。

在 jquery 的 ajax 中， contentType都是默认的值：application/x-www-form-urlencoded，这种格式的特点就是，name/value 成为一组，每组之间用 & 联接，而 name与value 则是使用 = 连接。如： wwwh.baidu.com/q?key=fdsa&lang=zh 这是get , 而 post 请求则是使用请求体，参数不在 url 中，在请求体中的参数表现形式也是: key=fdsa&lang=zh的形式。

键值对这样组织在一般的情况下是没有什么问题的，这里说的一般是，不带嵌套类型JSON，也就是 简单的JSON，形如这样：

{
    a: 1,
    b: 2,
    c: 3
}

但是在一些复杂的情况下就有问题了。 例如在 ajax 中你要传一个复杂的 json 对像，也就说是对象嵌数组，数组中包括对象，兄果你这样传：

{
  data: {
    a: [{
      x: 2
    }]
  }
}

这个复杂对象， application/x-www-form-urlencoded 这种形式是没有办法将复杂的 JSON 组织成键值对形式 ,你传进去可以发送请求，但是服务端收到数据为空， 因为 ajax 没有办法知道怎样处理这个数据。

聪明的程序员发现 http 还可以自定义数据类型，于是就定义一种叫 application/json 的类型。这种类型是 text ， 我们 ajax 的复杂JSON数据，用 JSON.stringify序列化后，然后发送，在服务器端接到然后用 JSON.parse 进行还原就行了，这样就能处理复杂的对象了。

$.ajax({
    dataType: 'json',
    contentType: 'application/json',
    data: JSON.stringify({a: [{b:1, a:1}]})
})

 这样你就可以发送复杂JSON的对象了。

 $.ajax 中的dataType

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。

'''注意'''，我们必须确保网页服务器报告的MIME类型与我们选择的dataType所匹配。比如说，XML的话，服务器端就必须声明 text/xml 或者 application/xml 来获得一致的结果。