Ajax

发布时间：2020-12-16 03:03:56 所属栏目：百科来源：网络整理

导读：一、原生 1、初始化兼容性判断： var xhr = null ; if (window.XMLHttpRequest) { var xhr = new XMLHttpRequest;} else if (window.ActiveXObject) { var xhr = new XMLHttpRequest(“Microsoft.XMLHttp”)} 2、设置onreadystatechange事件函数 xhr.onread

一、原生

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,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,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)
    }
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!