ajax的介绍，实现过程 封装函数

介绍

js交互：
人机：行为，事件
数据：前后端，ajax

ajax:前后端交互的重要手段或桥梁

ajax不是一个技术，一组技术的组合
ajax：a：异步，j：js，a：和，x：服务端的数据
异步的js和服务端的数据
特点：无刷新加载页面，破坏了历史记录，网络优化（SEO）
ajax的组成：
    异步的js（事件）
    其他js（处理解析数据）
    XHR（XMLHttpRequest）对象（前端后链接的载体）
    数据（txt，html，json，xml）（必须都得是字符）符）

ajax的实现过程：

// 打电话借钱

// 1.有手机
// 有XHR对象
var xhr = new XMLHttpRequest();
// 2.拨号：对方的手机号，免提/听筒，同步/异步
// 设置要请求的方式和地址
// xhr.open("get","data/data.txt",true)
xhr.open("get","http://localhost/1910-server/ajax/data/data.txt",true)      //√
// 3.等待监听状态，是否接通的状态
// 监听事件
xhr.onreadystatechange = function(){
    // 手机的功能是否完成
    // 载体自身的执行情况
    // xhr.readyState
    // 运营商的状态
    // 网络的状态
    // xhr.status
    if(xhr.readyState == 4 && xhr.status == 200){
        console.log(xhr.responseText)
    }
    // else{
    //     console.log("失败")
    // }
}
// 4.说话
// 发送
xhr.send();

ajax_get的封装函数：

function ajaxGet(url,cb,data){
// data是对象
// 1.解析要发送的数据
var str = “”;
for(var i in data){
str += ${i}=${data[i]}&;
}
// “user=admin&pass=123”;
// console.log(str.slice(0,str.length-1));
// 2.拼接url
url = url + “?” + str;

    // 3.准备ajax的过程
    var xhr = new XMLHttpRequest();
    xhr.open("get",url,true);
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            cb(xhr.responseText)
        }
    }
    xhr.send();
}

ajax_post的封装函数：

// get和post的不同:
function ajaxPost(url,callback,data){
data = data || {};
var str = “”;
for(var i in data){
str += ${i}=${data[i]}&;
}
var d = new Date();
// 2-1.发送数据的位置，不再是url
url = url + “?__qft=” + d.getTime();

    var xhr = new XMLHttpRequest();
    // 1.open的参数
    xhr.open("POST",url,true);
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            callback(xhr.responseText);
        }
    }
    // 3.send会原模原样的发送自己接受的数据，所以需要在发送之前设置发送数据的格式：表单格式
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    // 2-2.而是send
    xhr.send(str);
}