web前端全栈0基础到精通（祺）js 15-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_49030317/article/details/114681623

AJAX

概念

ajax用来创建快速动态交互式页面的技术;

通过与后台少量的数据交换, 更新页面

在页面不刷新的基础上更新页面上的某些数据

ajax: Asynchronous javascript and xml

异步 js 和 xml

执行方式

同步: 在数据请求过程中, 必须等待数据返回之后, 才能执行后续的代码

异步: 在数据请求过程中, 不需要等待数据返回, 就能执行后续的代码

常用异步

readyState

readyState:

0: 创建了ajax对象

1: 建立了链接

2: 发送了请求

3: 后台接收到请求并且开始处理

4: 请求处理完成返回了响应包

status

网络状态码: status

1XX: 信息

2XX: 请求成功 200

3XX: 重定向 304

4XX: 页面有报错 400 401 403 404 405

5XX: 服务器有报错 500 503 504

6XX: 归在5中

Conten-type:

表单：application/x-www-form-urlencoded 默认

文本: text/plain

文件: multipart/form-data

get

// 1. 创建ajax对象
var ajax = new XMLHttpRequest();
// console.log(ajax);

// 2. 建立连接
// open(请求方式, 请求地址, 是否异步);
// 请求地址: 相对地址---相对于引入了js的html文件的地址
// 请求方式： get  post
// 是否异步: 同步: false  异步: true(默认)
// 传参: 传输给服务器的参数: 地址?key=value&key=value
ajax.open('get', './a.txt?a=1&b=2', true);
// console.log(ajax);

// 3. 发送请求
ajax.send();

// 4. 监听事件   
ajax.onreadystatechange = function(){
    if(ajax.readyState == 4 && ajax.status == 200){
        // 5. 获取数据
        console.log(ajax.response);
    }
}

post

// 创建ajax对象
var ajax = new XMLHttpRequest();

// 建立连接
ajax.open('post', 'a.txt', true);

// 设置请求头
ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=utf-8');

// 发送请求
ajax.send('a=1&b=2');


// 监听事件
ajax.onreadystatechange = function(){
    if(ajax.readyState == 4 && ajax.status == 200){
        console.log(ajax.response);
    }
}

封装

function ajax(type, url, data, fn) {
    // type: 请求方式 get  post
    // url: 请求地址
    // fn: ajax请求成功后的执行的函数 
    var ajax = new XMLHttpRequest();

    if (type == 'post') {
        // post
        // 建立连接
        ajax.open(type, url, true);
        // 设置请求头
        ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=utf-8');
        // 发送请求
        ajax.send(data);
    } else {
        // get
        ajax.open(type, url + '?' + data, true);
        // 3. 发送请求
        ajax.send();
    }

    // 监听事件
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            fn(ajax.response); // 传实参
        }
    }
}

区别

post: 请求参数在请求头中，安全级别高, 用于提交数据

get: 请求参数拼接在地址后面的，安全级别低, 容易被窃取, 用于请求数据

操作数据

eval

将字符串转成js数据: eval(字符串)

将eval中的字符串转成js代码并且执行

ajax('get', './arr.txt', '', function(res){
    console.log(res); // ajax请求到的数据都是string
    console.log(typeof res); // string

    // 将字符串转成js数据: eval(字符串)   
    // 将eval中的字符串转成js代码并且执行
    console.log('3+5');
    console.log(eval('3+5'));

    console.log(eval(res));
    var r = eval(res);
    console.log(r);
});

ajax('get', 'test.txt', '', function(res){
    console.log(res);
    console.log(typeof res);

    // console.log(eval(res));
    console.log(eval( '(' + res + ')' ));
});