Ajax全称：Asynchronous JavaScript and XML（异步的JavaScript和XML）

特点：在不必刷新整个网页的情况下实现局部更新，带来更好的用户体验。

因为<code>XMLHttpRequest</code>（XHR）对象的出现才有了异步的概念。通过<code>XMLHttpRequest</code>对象实现后台和服务器进行数据的交换而不必刷新整个页面。

概念介绍

运用HMTL和CSS来实现页面，表达信息。
运用XMLHttpRequest和Web服务器进行数据的异步交换。
运用JavaScript操作DOM元素，实现动态局部刷新。

实例化一个XHR对象

var request =new XMLHttpRequest();

对于IE6及更老版本的IE：

var request;
if(windows.XMLHttpRequest){
  request=new XMLHttpRequest();//IE7+,Fiefix,Chrome,Opera,Safari...
}
else{
    request=new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5
}

"HTTP请求"概念介绍

一个完整的HTTP请求过程，通常需要下面7个步骤：

建立TCP连接
Web浏览器向Web服务器发送请求命令
Web浏览器发送请求头信息
Web服务器应答
Web服务器发送应答头信息
Web服务器向浏览器发送数据
Web服务器关闭TCP连接

一个HTTP请求一般由四部分组成：

HTTP请求的方法或者动作，Get/Post
正在请求的地址URL
请求头，包含一些客户端环境信息，身份验证信息等
请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息

GET与POST

<code>GET</code>：一般用于信息获取

使用URL传递参数（变量会放在URL里边）

对所发送信息的数量也有限制，一般在2000个字符

幂等，执行N次与执行1次效果相同，都不会改变数据库的信息

<code>POST</code>：一般用于修改服务器上的资源

对所发送信息的数量无限制

** 一个HTTP响应一般由三部分组成：**

一个数字和文字组成的状态码，用来告诉客户端请求是成功还是失败
响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型，日期时间，内容类型和长度等
响应体，也就是响应正文，服务器传来的内容

| HTTP状态码分类 |

|-|-|

| 分类 | 分类描述 |

| 1XX 信息 | 服务器收到请求，需要请求者继续执行操作|

| 2XX 成功 | 操作被成功接收并处理，例如 200 OK |

|3XX 重定向|需要进一步的操作以完成请求|

| 4XX 客户端错误|请求包含语法错误或无法完成请求，例如 404 NOT FOUND|

|5XX 服务器错误|服务器在处理请求的过程中发生了错误例如 500|

XHR发送请求

open(method,url,async) async->true异步(默认)/false同步
send(string)
例如：

request.open("GET","get.php",true);
request.send();//因为GET请求内容一般在url中，所以send()可以为空，但是post请求需要在send()中添加信息

request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//请求头信息(一定是写在open()和send()中间)
request.send("name=王二狗&sex=男");

XHR取得响应

<code>responseText</code>：获取字符串形式的响应数据
*<code>responseXML</code>：获取XML形式的响应数据
*<code>status</code>和<code>statusText</code>：以数字和文本形式返回HTTP状态码
<code>getAllRespondseHeader()</code>：获取所有的响应报头
<code>getResponseHeader()</code>：查询响应中的某个字段的值
监听<code>readyState</code>属性
0：请求未初始化，open还没有调用
1：服务器连接已经建立，open已经调用了
2：请求已接收，也就是接收到头信息了
3：请求处理中，也就是接收到响应主体了
4：请求已完成，且响应已就绪，也就是完成响应了

var request=new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
request.onreadystatechange=function(){
      if(request.readyState===4 && request.status===200){
      //做一些事情request.responseText
    }
}

举个栗子(基于之前的数据库，有学生表)~

【前端】

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#search").click(function() {
            var request = new XMLHttpRequest();
            request.open("GET", "/Ajax/Details?id=" + parseInt($("#keyWord").val()), true);    //通过GET方法去请求AjaxController下面的Details方法，并传入id的值作为查询条件
            request.send();
        });
    })
</script>
<label>请输入要查询的学生编号：</label>
<input type="text" id="keyWord"/>
<button id="search">查询</button>

【后端】AjaxController控制器Details方法

public ActionResult Details(int id)
        {
            if (dbContext.StudentSet.Find(id) == null)
            {
                return Content("Fail");
            }
            else
            {
                return Content("Success");
            }
        }

【结果】我的数据库中没有id为1的数据，有id为6的数据

JSON基础

** 简介 JSON： ** JavaScript对象表示法（JavaScript Object Notation） JSON是存储和交换文本信息的语法，类似XML，它采用键值对的方式来组织，易于阅读和编写，同时也易于机器解析和生成* JSON是独立于语言的，也就是说不管什么语言，都可以解析Json，只需要按照json的规则来就行

JSON与XML比较

Json的长度和XML格式比起来很短小（减少带宽）
Json读写的速度更快
Json可以使用JavaScript内建的方法直接进行解析，转换成JavaScript对象，非常方便

JSON语法规则

** JSON数据的书写格式是：名称/值对 **
名称/值对组合中的名称写在前面（在双引号中），值对写在后面（同样在双引号中），中间用冒号隔开，比如，"name":"郭靖"
** JSON的值可以是下面这些类型： **

数字(整型或浮点数)，比如123,1.23
字符串（在双引号中）
逻辑值（true，false）
数组（写在方括号中）
对象（写在花括号中）
null

例如：

{
    "staff":[
    {"name":"宏碁","age":70},
   {"name":"郭靖","age":35},
   {"name":"黄蓉","age":30}
]
}

{
    "nane": "los",
    "success": "True",
    "message": "请求成功",
    "info": [{
        "name": "laosiji",
        "age": "100",
        "asdas": "121",
        "hobby": ["daqiu", "youyong"],
        "aa": [{
            "anme": "aa",
            "age": 20
        }, {
            "aa": "asdas",
            "age": 5565
        }]
    }]
}

JSON解析

** 方式一： **

var jsondata='{"staff":[{"name":"黄蓉","age":25},{"name":"王五","age":25},{"name":"升水","age":22}]}';
var jsonobj=eval('('+jsondata+')');    //如果在json数据中存在js脚本的话会直接执行。（危险）
alert(jsonobj.staff[0].name);

** 方式二 **

var jsondata='{"staff":[{"name":"黄蓉","age":25},{"name":"王五","age":25},{"name":"升水","age":22}]}';
var jsonobj=JSON.parse(jsondata);    //如果在json数据中存在js脚本的话会报错(常用，安全，方便)。
alert(jsonobj.staff[0].name);

在线JSON格式化和校验工具jsonlint

用jQuery实现Ajax

jQuery.ajax({[settings]}) $.ajax([{settings]})
type：Method类型，"POST"或者“GET”，默认为“GET”
url：发送请求的地址
data：一个对象，连同请求发送到服务器的数据
dataType：预期服务器返回的数据类型，如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断，一般我们采用json格式，可以设置为“json”
success：是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功的字符串
error：是一个方法，请求失败时调用此函数。传入XMLHttpRequest对象
** 例如 **
GET