一、原生

1、初始化

兼容性判断：

var xhr = null;
if(window.XMLHttpRequest) {
    var xhr = new XMLHttpRequest;
}else if(window.ActiveXObject) {
    var xhr = new XMLHttpRequest(“Microsoft.XMLHttp”)
}

2、设置onreadystatechange事件函数

xhr.onreadystatechange = function() {
    if(xhr.readyState === 4) {
        do something、、、、
    }
}

xhr.readyState表示本次ajax对象的状态

　　0：未初始化

　　1：调用open方法

　　2：响应头已经回来

　　3：解析了一部分数据（存在于相应正文里）

　　4：解析了全部数据，可以使用这些数据了

3、调用open方法

xhr.open(type, url, true)

　　type：请求类型

　　url：等价于form的action属性，表示将本次请求发送到那里去

　　true：表示是否以异步形式发送；true表示异步，false表示同步

4、调用send方法

xhr.send(data)

　　data：向请求正文中填写的数据，以“k=v&k1=v1”形式书写，如果是get请求，没必要填写

5、综合

AJAX发送步骤
var xhr = null;
if(window.XMLHttpRequest) {
    var xhr = new XMLHttpRequest();
}else if(window.ActiveXObject) {
    var xhr = new ActiveXObject("Microsoft.XMLHttp")
}
xhr.onreadystatechange = function() {
if(xhr.readystate === 4) {
        console.log(xhr.responsText)
    }
}
xhr.open(type, url, true);
xhr.send(data);

二、jQuery中ajax

1、发送get请求

$.get(url, data, callback)

　　url：url字符串，表示要将本次请求发送到哪里

　　data：携带的数据，可以hi字符串，对象，可以省略

　　callback：回调函数，有一个形参data，就是本次传递回来的数据

demo：

$.get("/checkname", "a=1&b=2", function(data) {
    console.log(data)
})

2、发送post请求

$.post(url, data, cllback)

三个参数与get参数相同

demo：

$.post("/checkname", query, function(data) {
    console.log(data)
})

3、发送任意请求

$.ajax(options)

　　options:配置对象

　　　　url：url字符串，表示本次请求发送到那里去

　　　　type：请求类型

　　　　data：携带的数据

　　　　dataType：返回值的类型，json

　　　　success：成功之后的回调函数

demo：

$.ajax({
    url: "/checkname",
    type: "get",
    data: {
        username: "张三"
    }，
    dataType: "json",
        success: function(data) {
            console.log(data)
    }
})

 

版权声明：本文为zjp-原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zjp-/p/9227034.html