ajax

最新推荐文章于 2022-06-19 13:50:53 发布

哆来A梦没有口袋

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量175

点赞数

分类专栏： web前端 js 文章标签： ajax 原生ajax 封装ajax jquery的ajax 前端请求数据

本文链接：https://blog.csdn.net/qq_42625428/article/details/103214802

版权

web前端同时被 2 个专栏收录

66 篇文章 4 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

一. 原生ajax

1.原有的数据请求 - 由浏览器进行发送

ajax - 创建ajax对象，ajax搜索引擎进行发送

2.什么是Ajax

ajax是一个引擎对象
优点：通过与后台数据的交换实现局部刷新，用户体验感好
缺点对SEO(搜索引擎优化)不友好 (搜索引擎只能获取到第一次页面刷新获取的数据，不能获取到ajax获取的数据)

3.使用ajax发送get请求

//创建ajax引擎对象  - XMLHttpRequest - 挂载在window下 - 对低版本的ie有兼容问题
var xhr = new XMLHttpRequest();
//写入请求方式与地址
xhr.open('get','./server/mydate.json?username=name&age=18');
//发送
xhr.send();
//绑定监听事件
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200){
    var date = xhr.responseText;  //请求成功接受返回数据
    console.log(date)
    }
}

readyState 准备状态 - ajax创建配置和发送以及接受过程中状态会进行不断变化
值： 0: 请求未初始化 - 创建ajax引擎后
1: 服务器连接已建立 - 发送请求后
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status http状态
responseText 后端返回数据存贮在此属性中

4.使用ajax发送post请求

    var xhr = new XMLHttpRequest();
    xhr.open("post",'./server/mydate.json');
    xhr.setRequestHeader('Content-Typ','application/x-www-form-urlencoded');  //设置请求头
    xhr.send('username=name&age=12');
    xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
          console.log(xhr.responseText);
        }
    }

5.get与post的区别

1.post 比 get在传递的时候多了一个头部结构

2.传递参数的方式不同 get: 传递在地址的后面 www.baidu.com?参数=值&参数=值

post: 传递在send()方法的里面 xhr.send('参数=值&参数=值')

3.get因为是地址传递 - 铭文传递 -不安全 - 传递的数据量小

6.查看调式是否后台调通

通过浏览器打开 - F12 - 在控制太进行查看

XHR - 为ajax的传递

查看提交的地址 - Request URL

查看提交的方式 - Request Method

查看提交的状态 - Statues Code (绿色为传递掉通)

查看传递的数据 - Query String Parameters

查看后台回复 - Response

7.ajax的封装

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 封装方法-ajax -->
    <script>

        let obj = {
            url: './server/mydate.json',
            type: 'get',
            data: {
                name: 'aaa',
                age: 18
            },
            success: function (data) {
                console.log(data)
            }
        }

        ajax(obj);

        function ajax(obj) {
            //创建ajax的对象
            let xhr = new XMLHttpRequest();

            //初始化参数
            let params = '';
            if (obj.data != ''){
                for (key in obj.data) {
                    params += `${key}=${obj.data[key]}&`;
                }
                params = params.substring(0, params.length - 1);
            }
            
            //接收传递类型并转为小写
            let type = obj.type.toLowerCase();

            xhr.open(type ,type == 'get' ? `${obj.url}?${params}` : obj.url);
            // post  - 设置请求头
            if (type === 'post') {
                xhr.setRequestHeader('Content-Typ', 'application/x-www-form-urlencoded');
            }

            type == 'get' ? xhr.send() : xhr.send(params);

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    let result = xhr.responseText;
                    obj.success(result)
                }
            }
        }



    </script>
</body>

</html>

二. JQuery封装后的ajax

1.get发送

get是jQuery封装好的方法，参数（地址，传入后台数据，函数）

data 是ajax成功后台返回数据

 $.get('./server/mydate.json',{
            username:'name',
            age:123
        },function(data){
            console.log(data)
  });

2.post发送

post是jQuery封装好的方法，参数（地址，传入后台数据，函数）,参数的顺序与get一样

data 是ajax成功后台返回数据


 $.post('./server/mydate.json',{
            username:'name'
        },function(data){
            console.log(data);
        })

3.万能传递

 $.ajax({
            url:'./server/mydate.json',  //地址
            type:'get',      //方式 - get/post
            data:{       //传递数据
                username:'name'
            },
            dataType:'json',   //前端接收后台传回数据格式为json格式
            success:function(data){   //成功的毁掉函数
                console.log(data)
            }
        })