ajax及ajax的封装

摘要：此外使用的时候必须在请求数据上面添加接收返回值使用会想用一个事件事件当请求被发送到服务器时，我们需要执行一些基于响应的操作。

AJAX 就是浏览器提供的一套API 可以通过javascript调用 从而实现通过代码控制请求与响应 实现网络编程
AJAX 在浏览器端进行网络编程（发送请求 接受响应）的技术方案
通过javascript直接获取服务器的最新的内容而不必重新加载页面 让web更能接近桌面应用的用户体验

   1、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。
　 2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
　 3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
   4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
ajax的优点
   1、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。
　 2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
　 3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
   4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

1.ajax干掉了back按钮，即对浏览器后退机制的破坏
2.安全问题因为ajax技术就像是直接建立一个通道,会暴露比以前数据和服务器逻辑
3.对搜索引擎的支持比较弱
4.一些手机设备现在还不能更好的支持ajax

使用

连接服务器

径，“异步/同步”）。
            第三个参数：true===》异步、false===》同步。
            当请求方式为POST的时候，代码写法如上；
            当请求方式为GET的时候，使用xhr.open（"请求方式（GET/POST）"，url路径 + “？”请求数据 +  ，“异步/同步”）

发送请求

                使用xhr.send（）发送请求
                当请求方式为GET的时候，发送请求为xhr.send(null).
                当请求方式为POST的时候，发送请求为xhr.send(请求数据)。
                此外使用POST的时候必须在xhr.send（请求数据）上面添加

    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");      

3.接收返回值
使用ajax会想用一个事件readystatechange事件：当请求被发送到服务器时，我们需要执行一些基于响应的操作。
        当readystatechange改变的时候，就会触发这个事件执行。
        readyState：请求的状态，返回的是状态码（0 - 4）：0（未初始化）open还没有调用、1（载入）已经调用了send（）正在发送请求、2（载入完成）send方法已经完成  已经收到了全部的响应内容、3（解析）正在解析响应内容、4（完成）响应内容解析完成  可以在客户端用了。
        responseText：返回请求的内容。
        status：返回请求的结果码：返回200（成功）、返回404（未找到）、返回5**（5开头）（服务器错误）

ajax是一套API核心提供的类型：XMLHttpRequest
// 涉及到ajax操作的页面不能使用文件协议访问
// 1 安装浏览器（用户代理）
// xhr就类似于浏览器的作用（发送请求接收响应） 初始化 请求代理对象
var xhr = new XMLHttpRequest();
// 2 打开浏览器 输入网址(open方法已经调用，建立一个与服务器特定端口的链接)
xhr.open("GET","./time.php")
// 3 敲回车键 开始请求
xhr.send()
// 因为客户端永远不知道服务器何时才能返回我们需要的响应
// 所以AJAX API采用事件的机制（通知的感觉）
xhr.onreadystatechange = function(){
// 这个事件并不是只在响应时触发 XHR 状态改变就触发
if(this.readyState !==4) return;
// 不然获取响应的内容
console.log(this.responseText);
}

封装Ajax
var $ = {

// 将{"name":"jack","age":20} 的参数要转换为 ?name=jack&age=20
getpa:function(data){
    if(data && typeof data == "object"){
        var str = "?";
        for(var key in data){
            str = str + key + "=" + data[key] + "&";
        }
        str = str.substr(0,str.length-1);
    }
    return str;
},
// option.type:请求方式
// option.url:请求的url
// option.data:当前请求所传递的参数:规定参数必须是以对象的形式传递{"name":"jack","age":20}
// option.success:渲染方式
ajax:function(option){
    // 接收用户参数进行相应处理
    var type = option.type || "get";
    // location.href 可以获取当前文件的路径 
    var url = option.url || location.href;
    // 接收参数:在js中最方便收集的数据类型为对象，所以我们就规定传递的参数必须是对象
    var data = this.getpa(option.data) || "";
    // 响应成功之后的回调
    var success = option.success;

    // 创建异步对象
    var xhr = new XMLHttpRequest();

    // 让异步对象发送请求
    // 请求行
    if(type == "get"){
        // 拼接参数
        url += data;
        data = null;
    }
    xhr.open(type,url);
    // 请求头
    if(type == "post"){
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    }
    // 请求体
    xhr.send(data);

    // 让异步对象接收响应
    xhr.onreadystatechange = function(){
        // 一个成功的响应有两个条件：1.服务器成功响应 2.数据解析完毕可以使用
        if(xhr.status == 200 && xhr.readyState == 4){
            // 接收响应的返回值
            // responseText   responseXML
            var rh = xhr.getResponseHeader("Content-Type");
            // 判断
            if(rh.indexOf("xml") != -1){
                var result = xhr.responseXML;
            }
            else if(rh.lastIndexOf("json") != -1){
                var result = JSON.parse(xhr.responseText);
            }else{
                var result = xhr.responseText;
            }

            // 接收数据之后，调用回调函数
            success && success(result)
        }
    }
},
get:function(option){

},
post:function(){

}

}