一、原生

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