JavaScript-0902-ajax

发布于：2022-12-31 ⋅ 阅读:(368) ⋅ 点赞:(0)

复习

1、MySQL数据库
    1、存储数据的容器，也是一种特殊的软件
    2、MySQL结构
        一个MySQL软件下存在多个数据库
        一个数据库下存在多张表
        一个表中存在多条数据
        每一张表表示一类的数据(例如用户信息、商品信息、商品的打分、商品评论)，一般每张表都存在一个id字段 表示数据的唯一标识
    3、SQL语句
        增：insert into 表名称 (字段列表) values(值列表)
        删：delete from 表名称 where条件
        改：update 表名称 set 字段=值,字段=值... where语句
        查：select *  from 表名称
    4、PHP操作数据库
        1、连接
        2、组装SQL语句
        3、执行SQL语句(查询语句 得到的是结果集)
        4、关闭
2、网络模型
    TCP/IP模型
    应用层：生成数据
    传输层：决定数据的传输方式 TCP\UDP
    IP层:处理目标地址
    网络接口层：具体数据的发送
3、客户端与服务端的通信
    1、建立连接(三次握手)
    2、发送请求(使用tcp协议将http格式的数据发送)
    3、响应请求
    4、关闭连接(四次挥手)
4、三次握手
    通过三次发送消息确保消息通道的稳定
5、四次挥手
    断开连接 通过四次收发消息来确保连接相关的资源销毁

6、http协议：是基于web直接交互数据的一种格式
7、请求
    1、请求格式
        1、请求行
            1、常见的请求方式
                get:获取数据
                post：写入数据
                put：修改数据
                delete：删除数据
            2、get与post的区别
                1、在http协议中规定携带参数的方式不一样 get请求在url地址上，post请求是在请求体中
                2、安全系数 post更高
                3、参数的值get有限制
                4、参数格式post请求 没有任何限制 
        2、请求头
            请求头是客户端通知服务端自身信息
            content-type 设置请求体中数据的格式
            applicatin/json
            applicatin/x-www-from-urlencoded
        3、空白行：分割符号
        4、请求体：请求过程中携带的额外参数信息

响应

响应格式

1、响应行

2、响应头

3、空白行

4、响应体

在这里插入图片描述

响应行

格式

HTTP/1.1 200 OK
http、1.1 表示协议以及版本
200 表示状态码
ok 是状态码的描述字符

常见的状态码

100-199：表示请求还在继续，无法可见

200-299：表响应正常

300-399：表示重定向

​ 301：永久重定向

​ 302：临时重定向

400-499：表示客户端的错误

​ 401：无权限

​ 403：访问拒绝，可能是权限

​ 404：地址错误

500-599：服务端错误

​ 502：表示执行超时

​ 503：务端内部代码错误

响应头

服务端通知客户端自己本身的一些信息

响应头content-type标准响应体中数据格式

浏览器访问网页流程(记忆)

1、浏览器先从输入的地址中提取出有用信息。协议、域名、端口、文件地址、参数等信息。后期会按照协议的不

同使用对应的处理策略(http协议)

2、进行DNS解析，将域名转换为IP地址

​ a)本地DNS解析，window系统下会寻找C:\Windows\System32\drivers\etc/hosts文件得到对应关系，如果有对应的关系就得到IP地址否则就进行下一步

​ b)互联中DNS解析

3、通过三次握手完成连接的连接（会创建socket，以及相关的资源）

4、浏览器根据URL地址信息组装一个http协议格式的数据包 通过使用TCP协议将数据发送给服务端(http协议的数据包会经过tcp、ip 等协议进行封包)

5、服务器接受请求，根据http请求url地址找到对应的文件。并且创建进程读取文件内容。将内容进行组装成为一

个http协议的响应格式，最后视图TCP协议发送给客户端

6、客户端接受结果根据content-type的值不同使用不同的处理策略 例如content-type值为text/html

​ a)按照顺序解析html代码，将页面上标签形成dom树形结构，将每一个元素的样式也形成一个树形结构

​ b)解析过程中遇到资源文件立马继续发送请求得到资源文件

​ c）直到最后将两棵树合并用于控制页面上显示的外观

Ajax概述

全程叫做 async JavaScript and xml。也就是异步的js的代码与xml(数据格式)。

ajax用于实现在页面中直接发送请求（需要数据提供功能的支持 就需要使用ajax完成）

使用ajax最大的好处页面无刷新 提升用户的体验

Ajax使用步骤

服务端代码

服务端的代码怎么写的在哪里，以及文档跟前端都没有关系

1、后端代码

<?php
    // 表示数据库中数据
    $data = [
        ['id'=>1,'nickname'=>'贾克斯','msg'=>'一个能打的都没有'],
        ['id'=>2,'nickname'=>'叶问','msg'=>'我要打十个'],
        ['id'=>3,'nickname'=>'江佳佳','msg'=>'我是废物']  
    ];
    // php中get请求的参数都在$_GET数组中
    $id = $_GET['id'];
    foreach($data as $key=>$value){
        if($value['id'] == $id){
            // die死亡 退出代码
            die(json_encode($value));
        }
    }

2、接口使用文档

接口功能：获取用户信息
接口地址：http://127.0.0.1/whHTML2211/day25/代码/server/data.php
请求方式：get
请求参数：id=值
返回格式：json
示例：
{
  "id": 2,
  "nickname": "叶问",
  "msg": "我要打十个"
}

客户端代码

1、客户端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="">
    <button>获取用户信息</button>
    <div id="user"></div>
    <script>
        document.querySelector('button').onclick = ()=>{
            // 获取到输入的id值
            let id = document.querySelector('input').value;
            // 根据id值从服务端得到对应的用户数据
            // 1、获取对象XMLHttpRequest 是内置所提供的对象 用于发送请求
            let xhr = new XMLHttpRequest;
            // 2、建立连接 open(method,url.async) method就是http协议中请求方式，url请求地址async 表示是否异步 默认为true 表示异步 false表示同步
            xhr.open('GET','http://127.0.0.1/whHTML2211/day25/代码/server/data.php');
            // 3、发送请求
            xhr.send();
            // 4、监听结果
            xhr.onreadystatechange = ()=>{
                if(xhr.status == 200 && xhr.readyState ==4){
                    // 获取结果
                    let response = xhr.responseText
                    console.log(response)
                }
            }


            // xhr.onload = ()=>{
            //     // 直接使用结果
            // }
        }
    </script>
</body>
</html>

2、查看结果
在这里插入图片描述

关于Ajax错误的排查方式

3、抓包
在这里插入图片描述

4、修改代码排错
在这里插入图片描述

Ajax中的属性与方法

readyState属性

readyState属性是用于表示Ajax对象的状态信息

状态值 含义
0 表示对象已经初始化但是没有建立连接
1 表示已经调用了open方法完成了连接的建立
2 表示已经调用了send方法完成了请求的发送
3 表示服务端已经接受请求 正在发送响应结果 目前还没有发送完成
4 表示服务端已经将结果全部发送 只有状态码为4的时候才可以使用响应结果

status属性

http协议响应的状态码

responseText

表示http协议响应过程中的响应体内容。后期需要使用到服务端发送的数据 必定是响应体中内容，内容都是字符

串，如果是JSON格式一定要进行转换(如果JSON格式这里转换出问题绝对是JSON格式错误)

onreadystatechange

注意所有的字符全部都是小写 千万别写错（一旦写错是对象下会添加属性导致结果无法处理）。只要readyState状态码修改就会自动触发对应的函数执行。所以在处理结果时

xhr.onreadystatechange = function(){
    if(xhr.status==200 && xhr.readyState == 4){
        //判断正常接受到结果并且数据已经发送完成，此时才可以使用数据
    }
}
后期简化属性新增加了onload属性

open方法

open方法用于打开连接
xhr.open(methods,url,async)

send方法

send方法用于发送请求
xhr.send(body)
body参数表示设置在请求体中的内容

setRequestHeader方法

setRequestHeader(名称,值) 用于设置请求头
名称 就是请求头的名称 值就是请求头的值

Ajax发送请求

发送get请求

一定要注意get请求参数默认是在URL地址上

1、服务端代码

<?php 

    $address = $_GET['address'];
    $key = 'HGTBZ-MZHKU-NRGV4-246OU-MPLT2-5HFYY';
    $url = 'https://apis.map.qq.com/ws/geocoder/v1/?address='.$address.'&key='.$key;
    echo file_get_contents($url);
?>

2、客户端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <button>获取周边信息</button>
    <script>
        document.querySelector('button').onclick = function(){
            let address = document.querySelector('input').value;
            let xhr = new XMLHttpRequest;
            // 打开连接
            xhr.open('GET','server/get.php?address='+address);
            // 发送请求
            xhr.send();
            // 监听状态的改变
            xhr.onreadystatechange = function(){
                if(xhr.status == 200 && xhr.readyState == 4){
                    let response = JSON.parse(xhr.responseText)
                    console.log(response)
                }
            }

        }
    </script>
</body>
</html>

发送post请求携带表单数据

1、服务端代码

<?php
    // 服务端要求传递lo参数 并且值表示的是经纬度 格式为 "纬度,经度"
    $location = $_POST['lo'];
    $url = 'https://apis.map.qq.com/ws/geocoder/v1/?location='.$location.'&key=HGTBZ-MZHKU-NRGV4-246OU-MPLT2-5HFYY&get_poi=1';
    echo file_get_contents($url);
?>

2、客户端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <button>获取周边</button>
    <script>
        document.querySelector('button').onclick = function(){
            let location = document.querySelector('input').value;
            let xhr = new XMLHttpRequest;
            xhr.open('POST','server/post_form.php');
            // 设置请求头的方法必须在open与send直接
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            // from表单格式 名称1=值1&名称2=值......
            xhr.send(`lo=${location}`);
            
            xhr.onreadystatechange = function(){
                if(xhr.status == 200 && xhr.readyState == 4){
                    let response = JSON.parse(xhr.responseText);
                    console.log(response)
                }
            }
        }
    </script>
</body>
</html>

发送post请求携带JSON格式数据

1、服务端

<?php
    // 服务端要求 传递JSON格式的数据并且数据中携带lat 纬度 lng 经度
    // {"lat":10,"lng":10}
    // 表示获取http协议中请求体的数据
    $data = json_decode(file_get_contents('php://input'),true);
    $lat= $data['lat'];
    $lng = $data['lng'];
    $url = 'https://apis.map.qq.com/ws/geocoder/v1/?location='.$lat.','.$lng.'&key=HGTBZ-MZHKU-NRGV4-246OU-MPLT2-5HFYY&get_poi=1';
    echo file_get_contents($url);
?>

2、客户端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    纬度 <input type="text" class="lat">
    经度 <input type="text"  class="lng">
    <button>获取周边</button>
    <script>
        document.querySelector('button').onclick = ()=>{
            let lat = document.querySelector('.lat').value;
            let lng = document.querySelector('.lng').value;
            let xhr = new XMLHttpRequest;
            xhr.open('POST','server/post_json.php');
            // 设置请求头标注数据格式
            xhr.setRequestHeader('Content-Type','application/json');
            // 当服务端要JSON格式字符串时千万别手动拼接
            let data = {lat,lng};//对象 表示请求的数据 使用了对象简写功能
            // 如果data对象直接放到send方法中作为参数 最终参数绝对是[object Object]
            xhr.send(JSON.stringify(data));
            // xhr.onload 是写xhr.onreadstatechange=function(if(xhr.status==200 && xhr.readyState==4){})简写
            xhr.onload = ()=>{
                console.log(xhr.responseText);
            }
        }
    </script>
</body>
</html>

Ajax案例

注册功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    手机<input type="text" class="mobile">
    密码<input type="text" class="pwd">
    <button>注册</button>
    <script>
        document.querySelector('button').onclick = function(){
            // 1、获取到手机号与密码
            let mobile = document.querySelector('.mobile').value;
            let pwd = document.querySelector('.pwd').value;
            let xhr = new XMLHttpRequest;
            // 打开连接
            xhr.open('POST','http://phpclub.org.cn/edu/server/regist.php');
            // 设置请求头
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            // 发送请求
            xhr.send(`mobile=${mobile}&password=${pwd}`);
            xhr.onload = ()=>{
                
                try {
                    let response = JSON.parse(xhr.responseText);
                    // code 是后端所规定的状态码 只有100 表示的是正常 其他的都是有问题的情况，因为后端不论是正常还是错误都需要将结果通知给前端。所以http协议响应的状态码必定是200  所以在额外的规定了code自定义状态码
                    if(response.code != 100){
                       alert(response.msg);
                       return;
                    }
                    location.href='login.html';
                } catch (error) {
                    // 如果执行这个catch操作说明 返回的结果绝对不是JSON格式
                    alert('网络开小差了!');
                }

                
            }
        }
    </script>
</body>
</html>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布