Ajax

获取-得到-拿到-get-返回-获得-收集

适用范围:

使用前提

• 浏览器环境

作用:

1. 前端发送请求到网络api

优点:

1. 无刷新获取数据(与后端交互)

缺点:

1. 没有浏览历史, 不能返回
2. 存在CORS限制

特点:

4. 对爬虫不友好, 因为数据是js动态添加到页面的, 所以直接查看HTML源代码, 是找不到新数据的

相关概念:

child::XML child::HTTP

使用指南

原生Ajax

语法:

child::原生Ajax

JQuery中的ajax封装

低度封装

$.ajax({
    url: '21json.php',
    type: 'get',
    // 设置的是请求参数
    data: {
        id: 1,
        name: '张三'
    },
    dataType: 'json', // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
    success: function (res) {
        // 一旦设置的 dataType 选项，就不再关心 服务端 响应的 Content-Type 了
        // 客户端会主观认为服务端返回的就是 JSON 格式的字符串
        console.log(res);
    }
});

高度封装

$.get('21json.php', { //发送get请求
    id: 1
}, function (res) {
    console.log(res);
});
 
$.post('21json.php', { //发送post请求
    id: 1
}, function (res) {
    console.log(res);
});
 
$.getJSON('21json.php', { //发送get请求，并将数据转为json数据(无视服务端Content-type)
    id: 1
}, function (res) {
    console.log(res);
});
$.getScript("./23test.js", function (data, textStatus, jqxhr) { //执行一个js文件的代码
    console.log(data); //data returned
    console.log(textStatus); //success
    console.log(jqxhr.status); //200
});
 
//可以返回promise
let projReq = $.get("./js/all-data.json").then(res=>projs=res)