AjAX的核心知识

1.简介

Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

2 AJAX核心编程思路

    //1.获取用户名
                var username=$(this).val();
                //2.创建xhr
                var xhr;
                if(window.XMLHttpRequest){//非IE
                    xhr=new XMLHttpRequest();
                }else{//IE浏览器
                    xhr=new ActiveXObject("microsoft.XMLHTTP");
                }
                //3.发送请求传递参数
                xhr.open("GET|POST","(url?name="+username);
                xhr.send();
                //4.处理响应并刷新页面局部
                xhr.onreadystatechange=function () {
                /*
                xhr.readyState    0  xhr 未初始化
                                            1  xhr 已经初始化
                                            2  xhr  发送请求
                                            3  xhr   请求开始响应
                                            4  请求完整响应
                  xhr.status 的不同状态
                      [参考这个链接](https://www.cnblogs.com/liu-fei-fei/p/5618782.html)
                */
                    //处理完整且正确的响应
                    if(xhr.readyState==4&&xhr.status==200){
                        console.log(xhr.responseText);
               
                    }

                }
                

3 AjAX的GET方式编程思路

 //1.获取用户名
                var username=$(this).val();
                //2.创建xhr
                var xhr;
                if(window.XMLHttpRequest){//非IE
                    xhr=new XMLHttpRequest();
                }else{//IE浏览器
                    xhr=new ActiveXObject("microsoft.XMLHTTP");
                }
                //3.发送请求传递参数
                xhr.open("GET","{url?name="+username);
                xhr.send();
                //4.处理响应并刷新页面局部
                xhr.onreadystatechange=function () {
                
   
                    //处理完整且正确的响应
                    if(xhr.readyState==4&&xhr.status==200){
                    xhr.responseText;
               
                    }

                }

3.AJAX的POST请求方式

                //1.获取用户名
                var username = $(this).val();
                //2.创建xhr
                var xhr ;
                if(XMLHttpRequest){
                    xhr = new XMLHttpRequest();
                }else{
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                //3.发送post方式请求并传递参数
                xhr.open("POST","url");
                xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); //设置响应头
                xhr.send("name="+username); //传递参数
                //4.处理响应 并刷新页面局部
                xhr.onreadystatechange = function () {
                    if(xhr.readyState==4 && xhr.status==200){
                        console.log(xhr.responseText);
                    }
                }

4.JSON协议串

5 AJAX的封装

AJAX在创建对象，发送请求等方面存在着大量的冗余，因此对其进行封装
5.1 GET 方式的封装

//get方式请求
function get(url,param,callback){

    //1.创建xhr
    var xhr;
    if(XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject("microsoft.XMLHTTP");
    }

    //2.发送请求并传递参数
    xhr.open("GET",url+"?"+param);
    xhr.send();

    //3.处理响应
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var responseText = xhr.responseText;
            callback(responseText);
        }
    }

}

5.2 POST 方式的封装

function post(url,param,callback){
    //1.创建xhr
    var xhr;
    if(XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject("microsoft.XMLHTTP");
    }

    //2.发送请求并传递参数
    xhr.open("POST",url);
    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
    xhr.send(param);

    //3.处理响应
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var responseText = xhr.responseText;
            callback(responseText);
        }
    }
}
    //3.处理响应
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var responseText = xhr.responseText;
            callback(responseText);

        }
    }
}

5.3 综合方式

function ajax(type,url,param,callback){
    //1.创建xhr
    var xhr;
    if(XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject("microsoft.XMLHTTP");
    }

    //2.发送请求并传递参数
    if(type == "GET" || type == "get"){
        xhr.open("GET",url+"?"+param);
        xhr.send();
    }else{
        xhr.open("POST",url);
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
        xhr.send(param);
    }
    //3.处理响应
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var responseText = xhr.responseText;
            callback(responseText);

        }
    }
}

6.jQuery对ajax的封装

 1.页面中引入对应jQuery的核心js文件
 2, 发送ajax请求
    1）. $.ajax({
                    type:"GET|POST",请求方式
                    url:""，  请求的url路径
                    data:"name=zhangsan&password=123456"|(name:"zhangsan",password:"123456"),
                    dataType:"JSON",//预期服务器响应类型
                    success:function(result){
                        result==xhr.responseText;
                    }
    });
    注意：
           1.当后台响应json格式数据时如果指定了响应类型为application/json时，jquery封装的ajax会自动转为js对象或数组
           2.如果在前台发送ajax请求时明确指定dataType属性为JSON时，即使后台不设置响应类型结果也会自动转为js对象或数组
           3.推荐前台设置响应类型，服务器端统一设置相应类型，结果一定为js对象或数组
     2）. $.get(url,data,function(result),type);  //发送请求传递参数处理响应并执行相应的数据类型
            $.get(url);  //发送get方式请求，不传递参数，不处理响应
            $.get(url,function(result){});  //发送GET方式请求，不传递参数，处理响应
            $.getJSON(url,data,function(result){});
            $.getJSON(url,data,function(result){},type);