Ajax第一天笔记

一、了解 ajax

1.什么是ajax

• ajax（阿贾克斯）：在不刷新页面的情况下向服务器请求数据。
  ajax技术真实网站介绍

2.为什么需要ajax

• a.以前我的写的页面全部都是固定的假数据，其实网页的数据都是从服务器获取的，一旦服务器数据变化，网页上的内容也会发生变化。
• b.虽然可以通过在浏览器地址栏直接输入网址（url）的方式向服务器获取数据，但是我们的网页会刷新。
• c.学会ajax：就可以做到在不刷新网页的情况下向服务器请求数据，让网站数据内容动态变化。

3.ajax的工作流程

• a.创建XMLHttpRequest对象 (俗称小黄人)
  • var xhr = new XMLHttpRequest();
• b.设置请求
  • xhr.open('get', 'url 地址');
• c.发送请求
  • xhr.send();
• d.注册回调函数
  • 这个函数不是立即执行的，而是等服务器把数据响应返回才会执行（PS：什么时候执行取决于你的网速快慢）
  • xhr.onload = function () {console.log(xhr.responseText);}

二、了解什么是接口文档

• 1.接口：Web服务器提供的，让ajax请求的网络地址称之为接口，简称API。
• 2.接口文档 ：为了方便开发人员使用，我们的后台小伙伴会提供一种专门的文档，称之为接口文档。
• 3.一个标准的接口文档至少要包含以下三种信息（只能多，不能少）。
  • a.请求的地址 （url）
  • b.请求的方法 （get或者post）
  • c.请求的参数

接口文档示例

1.随机获取笑话的接口

• 请求地址：https://autumnfish.cn/api/joke

• 请求方法：get

• 请求参数：无

• 响应内容：随机笑话

2.demo-英雄外号查询

• 请求地址：https://autumnfish.cn/api/hero/simple

• 请求方法：get

• 请求参数：name

3.用户注册

• 请求地址：https://autumnfish.cn/api/user/register

• 请求方法：post

• 请求参数：username

4.用户验证

• 请求地址：https://autumnfish.cn/api/user/check

• 请求方法：post

• 请求参数：username

三、请求方法 get 与 post 的区别 （传参方式不同）

• 传参方式不同

• get请求： 参数直接在url后面拼接参数 （安全性不高）

    //(1)创建小黄人对象
    var xhr = new XMLHttpRequest();
    //(2)设置请求方法和路径
    xhr.open('get','https://autumnfish.cn/api/joke');  //参数直接在url后面拼接参数  （安全性不高）
    //(3)发送请求
    xhr.send();
    //(4)注册响应事件
    xhr.onload = function(){
    //3.服务器响应返回显示到页面div
    $('.joke-container').text(xhr.responseText);
};

• post请求：

• a.必须要设置请求头(固定格式，强烈建议复制粘贴)
• b.参数需要在send()中拼接 (不要问号,安全性高)

        //(1).实例化ajax对象
        var xhr = new XMLHttpRequest();
        //(2).设置请求方法和地址
        xhr.open('post', 'https://autumnfish.cn/api/user/register');
        //(3)设置请求头（只有post才需要，固定格式）
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        //(4).发送请求
        xhr.send('username=' + username);   //参数需要在send()中拼接  (不要问号,安全性高)
        //(5).注册回调函数
        xhr.onload = function() {
            console.log(xhr.responseText);
            //4.数据响应返回之后显示到info中
            $('.info').text(xhr.responseText);
        };           

四、JSON数据格式解析

1.服务器响应数据格式介绍

• a.为了方便数据的保存以及传递，就有了一些通用的数据格式（前端js和后端php、java等都支持的数据格式），常用的曾经有JSON和XML，但是现在基本上都是用JSON，XML已经退出了历史的舞台。

• b.JSON格式：JSON格式与JS对象互转 (重点)

• JSON > JS : JSON.parse(json数据)

• JS > JSON : JSON.stringify(js对象)