ajax

最新推荐文章于 2024-09-17 13:42:29 发布

wsm_123456

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量75

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/wsm_123456/article/details/104805425

版权

什么是ajax?

ajax是JS语言和服务器端交互的手段，全称为Asynchronous JavaScript and XML

ajax的特点

优点：

1.不需要插件，用原生JS就可以使用
2.用户体验好，不用刷新页面就可以更新数据
3.减轻服务端和带宽的负担

缺点：

不刷新，不会产生历史记录，破坏了浏览器自身的前进后退功能

发送ajax请求

// 1.：创建xhr对象
    var xhr = new XMLHttpRequest();
// 2.配置请求信息
    xhr.open("get","要请求的地址");
//3.发送请求
    xhr.send("");
//4.接受响应
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            console.log(xhr.responseText);
        }
    }

代码里的xhr.readyState == 4里的“ 4 ”表示的是ajax状态码，状态码有：
0 => 创建ajax对象成功
1 => 配置请求信息成功
2 => 响应已经回到浏览器
3 => 浏览器正在解析响应体
4 => 响应体解析完毕
xhr.status == 200里的“ 200 ”表示的是HTTP响应状态码，而200就是代表成功的意思

ajax的封装

代码如下：

function ajax(ops){
    ops.type = ops.type || "get";
    ops.data = ops.data || "";
    ops.url = ops.type=="get" ? ops.url + "?" + ops.data : ops.url;
    var xhr = new XMLHttpRequest();
    xhr.open(ops.type, ops.url);
    if(ops.type == "get"){
        xhr.send();
    }else{
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(ops.data);
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            ops.success(xhr.responseText);
        }
    }
}