Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步刷新。这意味着可以在不重新加载整个网页的情况下，对网页的某个部分进行更新。

五步创建法

  1. 创建XMLHttpRequest对象
  2. 使用open方法设置和服务器的交换信息
  3. 设置发送的数据，开始和服务器端交互
  4. 注册事件
  5. 更新界面

get请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//步骤一：创建异步对象
var ajax = new XMLHttpRequest();
//步骤二：设置请求的类型和url参数，参数一是请求的类型，参数二是请求的url，可以带参数，动态的传递参数myName到服务端
ajax.open('get','getName.php?myName='+name);
//步骤三：发送请求
ajax.send();
//步骤四：注册事件onreadystatechange状态改变就会调用
ajax.onreadystatechange = function(){
    if (ajax.readyState ==4 && ajax.status == 200){
        //步骤五：如果能够进入这个状态，说明数据完美的回来了，并且请求的页面是存在的
        console.log(ajax.responseText)
    }
         
}

post请求

1
2
3
4
5
6
7
8
9
10
11
12
13
//步骤一：创建一个异步对象
var xhr = new XMLHttpRequest()
//步骤二：设置请求的类型和url参数，post请求一定要添加请求头才行，不然会报错
xhr.open('post','getName.php')
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//步骤三：发送请求
xhr.send('name = fox&age = 18')
//步骤四：注册事件
xhr.onreadystatechange = function(){
    if(xhr.readyState==4 && xhr.status == 200){
        console.log(xhr.responseText)
    }
}

将get请求和post请求封装

为了方便使用，我们可以将它们封装进方法里面，要用的时候，直接调用就好了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
ajax({
    url:"getName.php",
    type:"POST",
    data:{name:"fox",age:20},
    dataType:"json",
    success:function(response,xml){
        //此处放成功后执行的代码

    },
    fail:function(status){
        //此处放失败后执行的代码
    }
});

//开始封装
function ajax(options){
    //获取所有参数
    options = options || {};
    options.type = (options.type || 'GET').toUpperCase();
    options.dataType = options.dataType||"json";
    var params = formatParams(options.data);

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

    //获取请求类型并发送
    if(options.type = "GET"){
        xhr.open('GET',options.url+'?'+params,true)
        xhr.send()
    }else{
        xhr.oprn('post',options.url,true);
        xhr.send(params)
    }


    //注册事件
    xhr.onreadystatechange = function(){
        if(xhr.readyState==4 && xhr.status ==200){
            options.success && options.success(xhr.responseText)
        }else{
            options.fail && options.fail(status)
        }
    }

}
    
//格式化参数
function formatParams(data){
    var arr = [];
    for(var name in data){
        arr.push(encodeURIComponent(name)+"="+encodeURIComponent(data[name]));
    };
    arr.push(("v="+Math.random()).replace("."));
    return arr.join("&")
}