Ajax

javascript是一种在浏览器端执行的脚本语言，Ajax是一种创建交互式网页应用的开发技术 ，它是利用了一系列相关的技术其中就包括javascript。

优点：

• 实现了异步操作，具有更加迅速的响应能力
  所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，

• AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

• 把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻了服务端压力

缺点：

• ajax不支持浏览器back按钮。
• 安全问题 AJAX暴露了与服务器交互的细节。
• 对搜索引擎的支持比较弱。
• 破坏了程序的异常机制。
• 不容易调试。

包含的技术：

• 使用CSS和XHTML来表示。
• 使用DOM模型来交互和动态显示。
• 使用XMLHttpRequest来和服务器进行异步通信。(最重要)
• 使用javascript来绑定和调用。

核心：
使用XMLHttpRequest对象与服务器进行异步的数据交换

步骤：
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
(3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求
(5)获取异步调用返回的数据
(6)使用JavaScript和DOM实现局部刷新

创建XMLHttpRequest对象

1.有关XMLHttpRequest对象浏览器兼容（主要是对ie低版本浏览器不兼容）

var request
    if (window.XMLHttpRequest) {
        request = new XMLHttpRequest() //ie7+
    }
    else {
        request = new ActiveXObject("Microsoft.XMLHttp") //ie6,ie5
    }

XMLHttpRequest对象发送请求

方法：
①open(method,url,async)

method：Get / Post
get：获取信息
post：新增/修改信息。需要加报头（比如：处理表单信息）
url:文件在服务器上的位置
async:是否异步处理（默认为true--异步处理）

②send(string):发送请求
③setRequestHeader:设置http头信息（写在open方法和send方法中间）

get和post方法有什么区别?
get用于获取信息。post用于修改信息
get参数放在url上面，post参数放在请求头，相对较安全。
get传送的数据有限，post理论上不限
get传输速度比post快 根据传参决定的。
(post通过请求体传参，后台通过数据流接收。速度稍微慢一些。而get通过url传参可以直接获取)

取得响应

属性：
responseText: 响应的文本信息
responseXML: 响应的XML信息
status、statusText: 响应状态、描述
readyState：
0:请求未初始化，open没有调用
1：服务器连接已经建立open已经调用
2：请求已经接收，接收到头信息了
3：请求处理中，接收到响应主体了
4：服务器完成，响应就绪

方法：
getAllResponseText:
getResponseText:某个字段

监听状态变化

通过onreadystatechange方法监听status变化，status变化就触发一次该事件

request.onreadystatechange=function(){
  if(request.readyState===4){
    //dosomething
  }
}

用jQuery实现Ajax

$.ajax({
    type: "post/get",  //方法
    url: "url",
    data: {//使用post方法提交的信息
        //name:""
    },
    dataType: "json",
    succcess: function (data) {//服务端返回的date

    },
    error: function (jqXHR) {
        jqXHR.status
    }
})

整理：原生的ajax实现

var xhr = window.XMLHttpRequest?
new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp");
xhr.open("GET", url, false);
xhr.onreadtstatechange = function () {
    if (xhr.readystate == 4) {
        //响应内容解析完成，可以在客户端调用了
        if (xhr.status == 200) {
            //客户端的请求成功了
            alert(xhr.responseText);
        }
    }
}
xhr.send(null);