ajax总结——原生js和jquery对ajax的操作

这里写目录标题

一、什么是ajax?
二、 http 请求的7个步骤
三、get post 区别
四、异步操作和同步操作

什么是跨域
是否同源
同源策略

五、原生js操作ajax

1、onreadystatechange
2、get方法
3、对get方法的封装
4、post方法
5、对post方法的封装
6、对数据的处理
7、使用原生js对ajax的get方法和post方法进行封装

六、jquery操作ajax

$.ajax
.load（）方法
$.getJSON（）方法
$.getScript()方法
$.get()方法
$.post()

七、art-templat模板引擎的使用

1、基本方法
2、补充语法- 判断和遍历

八、postman工具和FormData

一、什么是ajax?

ajax是异步 JavaScript 和 XML。是一种用于创建快速动态网页的技术，使用 Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。
此处还应该了解http的一些知识，比如请求步骤等。

二、 http 请求的7个步骤

1.建立tcp连接 (TCP（Transmission Control Protocol 传输控制协议）)
2.web浏览器向web服务器发送请求命令
3.浏览器发送请求头
4.服务器应答
5.服务器发送应答头信息
6.服务发送数据
7.服务器断开tcp

三、get post 区别

get形式请求数据，参数会以明文的形式拼接在url地址的后面，请求的长度受到url地址格式的限制；
post形式请求数据，参数会打包到请求对象中进行传递，不会显示在url地址中。数据请求的安全性比较GET而言更加隐秘！
什么时候用GET？什么时候用POST？
get方式请求数据的效率相比POST方式较高！
参数长度有一定的限制的情况下请求常规数据，使用get方式
参数长度没有限制或者包含二进制数据或者包含安全要求的数据等，请求的数据涉及到安全性的情况下，使用Post方式

四、异步操作和同步操作

同步操作：不同的事情按照一定的顺序进行执行，后一件事情必须等到前一个执行完成才能执行，否则会处于等待状态。
异步操作：不同的事情在执行过程中，同时执行。不分前后顺序

什么是跨域

浏览器使用ajax时，如果请求的接口地址和当前打开的页面地址不同源称之为跨域

是否同源

同源不同源
同源：协议和地址和端口都一样
不同源：协议、地址、端口有一个不同就是不同源

同源策略

同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，
因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

五、原生js操作ajax

1、onreadystatechange

onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
请求成功后，状态值readyState发生改变时执行，状态值是指XMLHttpRequest 对象的所属状态

readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status
200（成功）  服务器已成功处理了请求。
404: 未找到页面

var xhr = new XMLHttpRequest();
        xhr.open('get', 'http://wthrcdn.etouch.cn/weather_mini?city=郑州');
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var obj = JSON.parse(xhr.response);
                console.log(obj);
            }
        }
        xhr.send();

2、get方法

 document.querySelector('button').onclick = function() {
            //无参数
            //创建一个XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            xhr.open('get', 'https://autumnfish.cn/api/joke');
            xhr.onload = function() {
                console.log(xhr.response); //返回的数据
            }
            xhr.send();

            // 有参数
            var xhr = new XMLHttpRequest();
            xhr.open('get', 'https://autumnfish.cn/api/joke/list?num=5');
            //参数 拼接在请求地址的后面，加一个？  key1=value1&key2=value2
            xhr.onload = function() {
                var obj = JSON.parse(xhr.response)
                for (var i of obj.jokes)
                    console.log(i);
            }
            xhr.send();
        }

3、对get方法的封装

<script>
        function get(url, date, callback) {
            var xhr = new XMLHttpRequest();
            url += '?';
            url += date;
            xhr.open('get', url);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    callback(xhr.response);
                    //回调函数，响应回来的就是实参
                }
            }
            xhr.send();
        }
        document.querySelector('button').onclick = function() {
            get('https://autumnfish.cn/api/joke/list', 'num=5', function(backDate) {
                console.log(backDate);
            })
        }
    </script>

4、post方法

  document.querySelector('button').onclick = function() {
            var xhr = new XMLHttpRequest();
            xhr.open('post', 'https://autumnfish.cn/api/user/check');
            // 请求方式为post,增加请求头信息设置  设置发送内容为urlencoded"格式
			//如果有参数的话 ：参数写在send方法中     xhr.send( key=value)
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.onload = function() {
                console.log(xhr.response);
            }
            xhr.send('username=pppp');
        }

5、对post方法的封装

<body>
    <button>按钮</button>
    <script>
        function post(url, date, callback) {
            var xhr = new XMLHttpRequest();
            xhr.open('post', url);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    callback(xhr.response);
                    //回调函数，响应回来的就是实参
                }
            }
            xhr.send(date);
        }

        document.querySelector('button').onclick = function() {
            post('https://autumnfish.cn/api/user/check', 'username=ppp', function(backDate) {
                console.log(backDate);
            })
        }
        //如果跨域需要在后端设置
       // header("Access-Control-Allow-Origin: *");后端设置响应头
        
    </script>
</body>

6、对数据的处理

返回的数据可能是json或者XML

<script>
        // 请求数据返回的是 json对象的字符串
        // JSON.parge();
        var xhr = new XMLHttpRequest();
        xhr.open('get', 'http://wthrcdn.etouch.cn/weather_mini?city=郑州');
         xhr.onload = function() {
             var obj = JSON.parse(xhr.response);
            console.log(obj);
         }
         xhr.send();


        //如果返回的是XML格式
        var xhr = new XMLHttpRequest();
        xhr.open('get', 'https://autumnfish.cn/api/food.xml');
        xhr.onload = function() {
            console.log(xhr.responseXML);
            //dom树的方法操作
            var food = xhr.responseXML.querySelectorAll('food');
            var food1 = food[1];
            var price1 = food1.children[1].innerHTML;
            console.log(price1);
        }
        xhr.send();
    </script>

7、使用原生js对ajax的get方法和post方法进行封装

(function(window) {
    var my = {
        ajax: function(options) {
            var xhr = new XMLHttpRequest();
            if (options.type == 'get') {
                options.url += '?';
                options.url += options.date;
            };
            xhr.open(options.type, options.url);
            if (options.type == 'post') {
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            }
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    options.callback(xhr.response);
                }
            }
            if (options.type == 'post') {
                xhr.send(options.date);
            } else {
                xhr.send();
            }
        }
    }
    window.my = my;
})(window)


//===============================
 document.querySelector('button').onclick = function() {
            my.ajax({
                type: 'post',
                url: 'https://autumnfish.cn/api/user/check',
                date: 'username=pppp',
                callback: function(backDate) {
                    console.log(backDate);
                }
            })
        }

六、jquery操作ajax

$.ajax

				//url  请求路径
				//data  待发送数据 {}
				//data Type  返回的数据类型 “json”,"html","text"........
				//success   回调函数  请求成功后调用的回调函数
				//type  请求的方式 “GET”,"POST" 默认get方式
		 $.ajax({
                    type: 'get',
                    url: 'http://wthrcdn.etouch.cn/weather_mini',
                    data: {
                        city: cityName,
                    },
                    dataType: 'json',
                    success: function(backData) {
                        console.log(backData);
                        var resHtml = template('temp-wearth', backData);
                        $('.wearth').html(resHtml);
                    }
                })

.load（）方法

jquery对象.load()

<body>
    <button>点击</button>
    <div class="con"></div>
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script>
        $(function() {
            // $('button').click(function() {
            // $('.con').load('./be.html');
            //获得nav标签里的所有内容
            // $('.con').load('./be.html .nav');
            // 获得content里面的所有内容
            // $('.con').load('./be.html .content');
            //  });
            $('button').click(function() {
                $('.con').load('./be.html');

            })

        })
    </script>
</body>

$.getJSON（）方法

<body>
    <button>getJSON</button>
    <div class="con"></div>
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script>
        $('button').click(function() {
            //可动态请求js语句
            $.getJSON('./js/03_getJSON.json', function(data, status, xhr) {
                //返回的是个对象,
                $('.con').html(JSON.stringify(data));
            });
        })
    </script>
</body>

$.getScript()方法

<body>
    <button>getScript</button>
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script>
        $('button').click(function() {
            //可动态请求js语句
            $.getScript('./js/02_getScript.js');
        })

        // 02 _getScript.js的代码是
        // alert('你好吗？');
        // console.log('世界');
    </script>
</body>

$.get()方法

 $('button').click(function() {
            //可动态请求js语句
            // $.get('./js/be.txt', function(data, status, xhr) {
            //     //返回的是个对象,
            //     $('.con').html(data);
            // });


            // $.get('./js/be.txt').done(res => {
            //     $('.con').text(res);
            // }).fail(err => {
            //     console.log(err);
            // }).always(() => {
            //     console.log("失败成功都执行");
            // })
            $.get('./js/be.txt').done(res => {
                $('.con').text(res);
            }).fail(err => {
                console.log(err);
            }).always(() => {
                console.log("失败成功都执行");
            })
        })

$.post()

<body>
    <input type="text" name="" id="username">
    <input type="text" name="" id="age">
    <button>get</button>
    <div class="con"></div>
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script>
        $('button').click(function() {
            var name = $('#username').val();
            var age = $('#age').val();
            // var data = {
            //     name,
            //     age
            // };
            // 可传对象
            console.log(name, age);
            $.post('https://www.520mg.com/ajax/echo.php', `name=${name}&age=${age}`).then((res) => {
                $('.con').text(res);
            }).catch((res) => {
                console.log(res);
            })
        })
    </script>
</body>

七、art-templat模板引擎的使用

1、基本方法

使用模板引擎art-template的固定三步:
1.引入模板引擎js文件.
2.准备好一个模板(就是一个固定的页面结构)
必须要使用script标签来写，
这个script标签一定要设置一个id,
还要设置type=‘text/html’ (千万不能不写，或者不能写type=’ text/javascript’ )
3.调用模板引擎的核心方法
template(模板id,数据);

<body>
    <!-- // 使用模板引擎art-template的固定三步: -->
    <!-- // 1.引入模板引擎js文件.  -->
    <script src="./js/template-web.js"></script>
    <!-- // 2.准备好一个模板(就是一个固定的页面结构) // 必须要使用script标签来写， // 这个script标签一定要设置一个id, // 还要设置type='text/html' (千万不能不写，或者不能写type=' text/javascript' ) // -->
    <script id="tempab" type="text/html">
        <div>我的名字是：{{name}}</div>
        <!-- 胡子语法/插值语法 -->
        <p>我的年龄是：{{age}}</p>
        <ul>
            <li>性别：{{sex}}</li>
            <li>身高：{{height}}</li>
        </ul>
    </script>
    <!-- 3.调用模板引擎的核心方法 // template(模板id,数据);  -->
    <script>
        var obj = {
            name: '小欧明',
            age: 18,
            sex: '男',
            height: '180cm',
        }
        var res = template('tempab', obj); //两个参数，一个是准备好的模板id，不需要写# 另一个是对象
        console.log(res);
    </script>

2、补充语法- 判断和遍历

//         判断
        // 		{{ if 判断条件}}
        // { {else if 判断条件 } }
        // { { /if} }
        // 	遍历
        // 		{ {each  遍历对象 } }
        // { {$value } } 是遍历出的一个个的值
        // { { $index } }是遍历出来的一个个索引
        // { { /each } }
        // 			  hob: ['吃饭', '睡觉', '看电影', '唱歌']

        //  {{each hob}}
        //             <li>我的爱好是：{{$value}}------{{$index}}</li>
        //    {{/each}}
        <body>
    <!-- 补充：
    1、判断
    2、遍历 -->


    <script src="./js/jquery-3.5.1.min.js"></script>
    <script src="./js/template-web.js"></script>
    <script id="temp" type="text/html">
        <div>我的名字是：{{name}}</div>
        <p>我的年龄是：{{age}}</p>
        {{if age>=18}}
        <p>我满18岁了，我可以.....,哈哈</p>
        {{else}}
        <p>我还不满18岁，还不能....</p>
        {{/if}}
        <ul>
            <li>性别：{{sex}}</li>
            <li>身高：{{height}}</li>
        </ul>
        <ul>
            {{each hob}}
            <li>我的爱好是：{{$value}}------{{$index}}</li>
            {{/each}}
        </ul>
    </script>
    <script>
        var obj = {
            name: '小欧明',
            age: 15,
            sex: '男',
            height: '180cm',
            hob: ['吃饭', '睡觉', '看电影', '唱歌']
        }

        var res = template('temp', obj);
        $('body').html(res);
        
    </script>
</body>

八、postman工具和FormData

postman工具可检测接口是否可用，FormData的使用就不介绍了
FormData 接口提供了一种表示表单数据的键值对的构造方式
总结一下:
FormData是获取form表单里面的拥有name属性的标签的值，获取到的值是键值对形式的: username=‘小明’ userSkill=‘哈哈’
注意:
创建FormData对象，必须要传入一个form表单，dom元素打印FormData对象中的值，要使用: fd对象.get(键名)；表单元素不带name属性获得的是null

<body>
    <form action="get">
        <p>
            <label>姓名：</label>
            <input type="text" name="username" ,id='username'>
        </p>
        <p>
            <label>密码：</label>
            <input type="password" name="password" ,id='password'>
        </p>
        <p>
            <label>头像：</label>
            <input type="file" name="userIcon" ,id='userIcon'>
        </p>
        <p>
            <button>按钮</button>
        </p>
    </form>

    <script>
        document.querySelector('button').onclick = function(e) {
            e.preventDefault();
            //1、 创建一个FormData对象
            // 获取form表单对象
            // 创建一个FormData对象，参数需要一个form表单对象
            //2、 创建好FormData后，这个fd对象中就拥有了form表单中的name属性的标签数据
            // 直接输出对象是看不到数据的
            var form1 = document.querySelector('form');
            var fd = new FormData(form1);
            console.log(fd.get('username'));
            console.log(fd.get('password'));
            console.log(fd.get('userIcon'));
            //FormData的基本使用
            // 总结一下:
            // FormData是获取form表单里面的拥有name属性的标签的值的.
            // 获取到的值是键值对形式的: username='小明'  userSkill='哈哈'
            // 注意:
            // 创建FormData对象，必须要传入一个form表单，dom元素
            // 打印FormData对象中的值，要使用:  fd对象.get(键名);
            // 表单元素不带name属性获得的是null

        }
    </script>
</body>