Ajax技术

1.Ajax编程基础

1.Ajax概述：它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。

2.Ajax的运行环境：Ajax技术需要运行在网站环境中才能生效，当前课程会使用Node创建的服务器作为网站服务器。

3.Ajax的运行原理：Ajax相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。

4.Ajax的实现步骤：

• (1)创建Ajax对象

var xhr = new XMLHttpRequest();

• (2)告诉Ajax请求地址以及请求方式

xhr.open('get','http://www.example.com');

• (3)发送请求

xhr.send();

• (4)获取服务器端给与客户端的响应数据

xhr.onload = function() {
	console.log(xhr.responseText);
}

5.Ajax的封装
（1）Ajax函数的简单封装

function ajax(options) {
            //创建ajax对象
            var xhr = new XMLHttpRequest();
            //配置ajax对象
            xhr.open(options.type, options.url);
            //发送请求
            xhr.send();
            //监听xhr对象下面的onload事件
            //当xhr对象接收完响应数据后触发
            xhr.onload = function () {
                options.success(xhr.responseText)
            }
        }

        ajax({
            //请求方式
            type:'get',
            url: 'http://api.k780.com/?app=weather.future&weaid=101210101&&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json',
            success:function(data){
                console.log('这里是success函数' + data)
            }

（2）Ajax函数的通用封装

//封装函数实现ajax数据的获取和传输
//要在别处使用ajax函数，需要像jQuery一样引入，封装好的Ajax
//引用的格式如：<script src="./ajax.js"></script>
function objToString(obj) {
    if(Object.prototype.toString.call(obj) === '[object Object]') {
        let arr = [];
        for(let i in obj) {
            arr.push(i + '=' + obj[i])
        }
        return arr.join('&')
    }
}

function ajax(option) {
    let ajax = new XMLHttpRequest();
    //1.设置请求类型
    option.type = option.type || 'get';
    //2.设置接口地址
    if(!option.url){
        throw new Error('接口地址不能为空');
    }
    //3.操作数据
    if(option.data && Object.prototype.toString.call(option.data) === '[object Object]'){
        //数据存在，同时是对象
        option.data = objToString(option.data);
    }
    //4.数据存在，请求方式是get
    if(option.data && option.type === 'get') {
        option.url += '?' + option.data;
    }
    //5.是否异步问题
    if(option.async === 'false' || option.async === false){
        option.async = false;
    } else {
        option.async = true;    //只要是非false就赋值true
    }
    ajax.open(option.type,option.url,option.async);
    //6.如果数据存在，请求方式是post
    if(option.data && option.type === 'post') {
        ajax.setRequestHeader('content-type','application/x-www-form-urlencoded');
        ajax.send(option.data);
    } else { //其它情况
        ajax.send();
    }
    //7.是否异步
    if(option.async) { //异步
        ajax.onreadystatechange = function() {
            if(ajax.readyState === 4) {
                if (ajax.status === 200) {
                    option.success && option.success(ajax.responseText);  //将接口的值传出去
                } else {
                    option.error && option.error('接口地址有误')
                }
            }
        }
    } else { //同步，接口地址正确即可，无需监听
        if (ajax.status === 200) {
            option.success && option.success(ajax.responseText);  //将接口的值传出去
        } else {
            option.error && option.error('接口地址有误')
        }
    }
}
//调用封装好的Ajax函数
ajax({
            type: 'post',//请求方式，默认为get
            url: 'http://api.k780.com/?app=weather.future&weaid=101210101&&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json', //请求的地址，不能为空。
            data:{  //发送的数据，默认为空
                a:1,
                b:2,
                c:3
            },
            async: true,    //是否异步，默认异步
            success: function(data){    //请求成功的方法
                console.log(data);
            },
            error: function(err) {     //请求失败的方法
                console.log(err)
            }
        })

（3）使用Promise封装Ajax

//promise主要是处理回调问题
function promiseAjaxFn(methods, url, data){
    return new Promise((resolve,reject) => {
        let xhr = new XMLHttpRequest();
        let data = data || null;
        let methods = methods || 'get';
        xhr.open(methods,url,true);
        xhr.onreadystatechange = () => {
            if(xhr.readyState === 4){
                if(xhr.status === 200){
                	//后端传递的一般是JSON数据，所以需要要解析成原生的JS值
                    resolve(JSON.parse(xhr.responseText))  
                } else {
                	//后端传递的一般是JSON数据，所以需要要解析成原生的JS值
                    reject(JSON.parse(xhr.responseText))
                }
            }
        }
        xhr.send(data)
    })
}

promiseAjaxFn('get','http://localhost:3000/promise',null).then( res =>{
    console.log(res);
}, err => {
    console.log(err);
})

6.服务器端响应的数据格式：
在真实的项目中，服务器端大多数情况下会以JSON对象作为响应数据的格式。当客户端拿到响应数据时，要将JSON数据和HTML字符串进行拼接，然后将拼接的结果展示在页面中。
在http请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。

JSON.parse() //将json字符串转换巍json对象

2.jQuery中的Ajax

它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。
Ajax是一种异步无刷新技术，get的参数会跟在后面，post的参数不会跟在后面，get相对于post没有那么安全，get传递的数据也没有post的传递的那么多，但是get比post快，因为get有缓存，post没有缓存。post服务器
这个有跨域问题，要解决一下
1.$.ajax请求

<!DOCTYPE html>
<html lang="en">
<head>
    <title>$.ajax请求</title>
</head>
<body>
    <!-- 
        jQuery调用Ajax方法：
            格式：$.ajax({});
            参数：
                type:请求方式GET/POST
                url:请求地址url
                async:是否异步，默认是true表示异步
                data:发送到服务器的数据
                datatype: 预期服务器返回的数据类型
                contentType: 设置请求头
                success: 请求失败时调用此函数
                error: 请求失败时调用此函数 
    -->
    <button type="button" id="btn">查询数据</button>
    <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $("#btn").click(function(){
            $.ajax({
                type:"get", //大小写都可以
                url:"js/data.txt",
                data:{  //请求数据，是个json对象
                    userName:"hewei"  //如果没有参数，则不需要设置
                },
                dataType: "json", 
                //预期换回的数据类型，如果是json格式，在接收到返回值时会自动封装成json对象
                success:function(data){ //回调函数
                    console.log(data)  //字符串
                    //将字符串转换成json对象
                    // var obj = JSON.parse(data);
                    // console.log(obj)
                    var ul = $("<ul></ul>");
                    //遍历返回的数据数组
                    for(var i = 0; i < data.length; i++) {
                        //得到数组中的每一个元素
                        var user = data[i];
                        //创建li元素
                        var li = "<li>" + user.userName + "</li>";
                        //将li元素设置到ul元素中
                        ul.append(li);
                    }
                    console.log(ul);
                    //将ul设置到body标签中
                    $("body").append(ul)
                }
            })
        })
        
    </script>
</body>
</html>

假数据：

[
    {
        "userId":1,
        "userName":"hewei",
        "userAge":18
    },
    {
        "userId":2,
        "userName":"fanyunli",
        "userAge":19
    },
    {
        "userId":3,
        "userName":"sundingyi",
        "userAge":18
    },
    {
        "userId":4,
        "userName":"shijiaxian",
        "userAge":18
    }
]

2.$.get请求

<!DOCTYPE html>
<html lang="en">
<head>
    <title>$.ajax请求</title>
</head>
<body>
    <!-- 
        $.get();
            语法：
                $.get("请求地址","请求参数",function(形参){

                });
    -->
    <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $.get("js/data.json",{},function(data){
            console.log(data);
        });
    </script>
</body>
</html>

3.$.post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <title>$.ajax请求</title>
</head>
<body>
    <!--
        $.post();
            语法：
                $.post("请求地址","请求参数",function(形参){

                });
    -->
    <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //因为post请求需要服务器，所以会报错
        $.post("js/data.json",{},function(data){
            console.log(data);
        });
    </script>
</body>
</html>

4.$.getJSON请求

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <!-- 
        $.getJSON
            语法：
                $.getJSON("请求地址","请求参数",function(形参){

                });
            注：getJSON方式要求返回的数据格式满足json格式(json字符串)
     -->
    <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $.getJSON("js/data.json",{},function(d){  //只能识别json格式的文件
            console.log(d);
        });
    </script>
</body>
</html>