Ajax-基础学习

Ajax

传统网站问题

• 网速慢的时候，页面加载时间长，用户只能等待。
• 表单提交后，如果内容不合适，需要重新填写表单所有内容。
• 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间。

Ajax是什么

可以页面无刷新更新数据，提高用户浏览网站体验。不刷新情况下像服务器请求数据。

Ajax应用场景

1.页面上加载更多数据
2.列表数据无刷新分页。
3.表单离开焦点数据验证，如验证邮箱是否已经注册。
4.搜索框提示下来列表。

Ajax运行环境

Ajax技术需要进行在网站环境中才能生效。把代码放在html中，把html文件文在静态资源文件夹中，这样通过域名访问html中。

Ajax原理

• Ajax相当于浏览器发送请求与接受响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新也看数据，从而提高用户体验。
• 可发人员可控

实现步骤

1. 创建Ajax对象
2. 告诉Ajax请求地址和请求方式
3. 客户端像服务端发送请求
4. 获取服务端给与客户端的相应数据。
   

服务端影响的数据格式

• 服务端多数情况下以JSON对象作为响应数据的格式。当客户端拿到响应数据时，将JSON数据和HTML字符串拼接，然后将拼接结果展示到页面中。

//json字符串转化为json对象
json.parse()

传递请求参数

• 传统:www.baidu.com?username=zhangsan&password=123456
• ajax的get方法：xhr.open('get'，www.baidu.com?username=zhangsan&password=123456)

 var params = 'username='+nameValue + '&age' + ageValue；
 xhr.open('get'，'http://www.baidu.com/get?+params);

• 请求报文：HTTP请求和响应过程中传递的数据块叫报文，包括要传送的数据和一些附加信息，这些信息要遵守规定的好的格式。可以理解为客户端对服务端说的话。

        var params = 'username='+nameValue + '&age' + ageValue;
//配置ajax对象
 xhr.open('post','http://www.baidu.com/post');
 //设置请求参数格式的类型(post必须设置)
 xhr.setRequestHeader('Content-Type','application/http://www.baidu.com');
 //发送请求
 xhr.send(params);
//获取服务器相应的数据
 xhr.onload = function(){
      console.log(xhr.responseText);
 }

请求格式

• 除了username=zhangsan&password=123456这种形式，还有json
• json格式：(name：‘zhangsan’，age：‘20’)。必须将json对象转化为json字符串，JSON.stringify({name:'lisi',age:50}。请求方式必须post。

        var params = 'username='+nameValue + '&age' + ageValue;
//1.配置ajax对象
 xhr.open('post','http://www.baidu.com/json');
 //2.设置请求参数格式的类型(post必须设置)
 xhr.setRequestHeader('Content-Type','application/json');
 //3.发送请求
 xhr.send(JSON.stringify({name:'lisi',age:50}));
//4.获取服务器相应的数据
 xhr.onload = function(){
      console.log(xhr.responseText);
 }

同步和异步

• ajax是异步代码，最后执行。

Ajax封装

• 封装函数：发送一次请求代码过多。多次发送代码冗杂。所以要封装成函数。

请求参数位置和格式

• 请求参数传递到ajax函数内部，在函数内部根据请求方式的不同将请求参数放置不同的位置。get放在请求地址后面、post放在send里。
• 请求参数:利用&连接、json格式。
• 函数内部用字符串类型更好

    <script>
        function ajax(options) {
            var defaults = {
                type = 'get',
                url = '',
                data = {},
                header = {
                    'Content-Type':'application/x-www-form'
                }
            };
            // 用户传了就是用户的，没传就用defaults的
            // 覆盖
            Object.assign(defaults,options);
            // 1.创建ajax对象
            var xhr = new XMLHttpRequest();
            xhr.open(defaults.type,defaults.url);
            var str = '';
            for (var k in defaults.data) {
                str+=k + '=' +defaults.data[k]+'&';
            }
            // 将最后一个&截取
            str.substr(0,str.length-1);
            // 判断请求方式
            if(defaults.type == 'get'){
                defaultss.url = options.url + '?' + str;
            }
            //2.发送请求
            if(defaults.type == 'post'){
                var contentType = defaults.header['Content-type']
                xhr.setRequestHeader('Content-Type','options.header');
                // 判断是否为json
                if(contentType == 'application/json'){
                    xhr.send(JSON.stringfy(options.data));
                }else {
                    xhr.send(str);
                }
            }else{
                xhr.send();
            }
            // 3.当xhr对象接收完响应数据后触发
            xhr.onload = function() {
                // 获取响应头的数据
                var contentTypr = xhr.getResponseHeader('content-Type');
                // 如果响应类型包含application/json
                if(contentType.includes('application/json')){
                    // 将json字符串转化为json对象
                    responseText = JSON.parse(responseText);
                }
                // 如果失败
                if(xhr.status == 200){
                    defaults.success(xhr.responseText,xhr);    
                }else{
                    defaults.error(xhr.responseText,xhr); 
                }  
            }
        }
        ajax({
            // 对象
            // 请求方式
            // type:'get',
            //请求地址
            url:'http://localhost:3000/first',
            // data: {
            //    name: 'zhangsan',
            //    age: '20'
            // },
            // header: {
            //     'Content-Type':'application/json'
            // },
            success: function(data){
                console.log('这里是success函数'+ data);                
            },
            // error: function(data){
            //     console.log('这里是error函数'+ data);
            //     console.log('xhr');
            // }
        });
    </script>