Ajax基础入门

AJAX笔记

传统网站中存在的问题

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

Ajax基础

Ajax概述

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

Ajax的应用场景

1. 页面上拉加载更多数据
2. 列表数据无刷新分页
3. 表单项离开焦点数据验证
4. 搜索框提示文字下拉列表

Ajax的运行环境

• Ajax技术需要运行在网站环境中才能生效

Ajax运行原理及实现

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

Ajax的实现步骤

1. 创建Ajax对象

var xhr = new XMLHttpRequest();

2. 告诉Ajax请求地址以及请求方式
   • 第一个参数：请求方式
   • 第二个参数：请求地址

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

3. 发送请求

xhr.send();

4. 获取服务器给与客户端的响应数据
   • 当Ajax接收完服务器端的响应之后就会触发onload事件
   • xhr.responseText保存服务端返回给客户端的数据

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

服务端响应的数据格式

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

JSON.parse(xhr.responseText)//将json字符串转换为json对象

请求参数传递

传统网站表单提交方式

    <form action="get" action="http://example.com">
        <input type="text" name="username">
        <input type="password" name="password">
    </form>

Ajax的表单提交方式

• GET请求方式

//使用方法
xhr.open('get','http://www.example.com?name=zhanqsansage=20');

//例子
 $('#btn').on('click', function() {
        // 创建ajax对象
        var xhr = new XMLHttpRequest();
        // 获取用户输入的值      
    	var nameValue = $('#name').val();
        var ageValue = $('#age').val();
        // 拼接请求参数
        var params = 'username=' + nameValue + '&age=' + ageValue;
        //配置ajax对象
        xhr.open('get', 'http://localhost:3000/get?' + params);
        // 发送请求
        xhr.send();
        // 获取服务端响应的数据
        xhr.onload = function() {
            console.log(xhr.responseText);
        }
    })

• POST请求方式
  • 请求报文
    • 在HTTP请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，这些数据和信息要遵守规定好的格式。

//使用方法
xhr.setRequestHeader('content-Type','application/x-www-form-urlencoded')
xhr.send('name=zhangsan&age=20');

//例子
 $('#btn').on('click', function() {
        // 创建ajax对象
        var xhr = new XMLHttpRequest();
        // 获取用户输入的值
        var nameValue = $('#name').val();
        var ageValue = $('#age').val();
        // 拼接请求参数
        var params = 'username=' + nameValue + '&age=' + ageValue;
        //配置ajax对象
        xhr.open('post', 'http://localhost:3000/post');
        // 设置请求参数的类型(post请求必须设置)
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        // 发送请求
        xhr.send(params);
        // 获取服务端响应的数据
        xhr.onload = function() {
            console.log(xhr.responseText);
        }
    })

请求参数的格式

1. application/x-www-form-urlencoded

name=zhangsan&age=20&sex=男

2. application/json

{name : 'zhangsan' , age: '20' , sex:'男'}

在请求头中指定Content-Type属性的值是application/json，告诉服务器端当前请求参数的格式是json。

    JSON.stringify() //将json对象转换为json字符串

 <script>
        // 1.创建Ajax对象
        var xhr = new XMLHttpRequest();
        // 2.告诉ajax对象向哪儿发送请求，以什么方式发送请求
        xhr.open('post', 'http://localhost:3000/json');
        // 3.通过请求头告诉服务器端，客户端传递的请求参数合适是json字符串
        xhr.setRequestHeader('Content-Type', 'application/json');
        // 4.发送请求
        xhr.send(JSON.stringify({
            name: '李四',
            age: 50
        }));
        // 5.获取服务端响应到客户端的数据
        xhr.onload = function() {
            console.log(xhr.responseText);
        }
    </script>

获取服务器端的响应(了解性)

• Ajax状态码

  • 在创建ajax对象，配置ajax对象，发送请求，以及接受完服务器端响应数据，这个过程的每一个步骤都会对应一个数值，这个数值就是ajax的状态码。

    Ajax状态码	当前Ajax的状态
    0	请求未初始化(还没有调用open())
    1	请求已经建立，但是还没有发送(还没有调用send())
    2	请求已经发送
    3	请求正在处理，通常响应中部分数据可以用了
    4	响应已经完成，可以获取并使用服务器的响应了

  • onreadystatechange当Ajax状态码发生变化时将自动触发该事件。

    • 通过xhr.readyState获取ajax状态码

    <script>
        var xhr = new XMLHttpRequest();
        // ajax状态码为0，请求未初始化(还没有调用open())
        console.log(xhr.readyState);
        xhr.open('get', 'http://localhost:3000/readystate');
        // ajax状态码为1，请求已经建立，但是还没有发送(还没有调用send())
        console.log(xhr.readyState);
        xhr.onreadystatechange = function() {
            // ajax状态码为2，请求已经发送
            // ajax状态码为3，请求正在处理，通常响应中部分数据可以用了
            // ajax状态码为4，响应已经完成，可以获取并使用服务器的响应了
            console.log(xhr.readyState);
            if (xhr.readyState === 4) {
                console.log(xhr.responseText);
            }
        }
        xhr.send();
    </script>

• 获取服务端响应方式的区别

区别描述	onload事件	onreadystatechange事件
是否兼容IE低版本	不兼容	兼容
是否需要判断Ajax状态码	不需要	需要
被调用次数	一次	多次

Ajax错误处理

1. 网络通畅，服务端能接收到请求，服务端返回的结果不是预期的结果。
   • 可以判断服务器返回的状态码，分别进行处理，xhr.status获取http状态码
2. 网络畅通，服务器端没有接收到请求，返回状态码404
   • 检查请求地址是否错误
3. 网络畅通，服务器端能接收到请求，服务器端返回500状态码
   • 后端的代码出问题了
4. 网络中断，请求无法发送到服务器端(浏览器network设置offline模拟测试)
   • 会触发xhr对象下面的onerror事件,在onerror事件处理函数对错误进行处理

    <button>发送Ajax请求</button>
    <script src="/node_modules/jquery/dist/jquery.js"></script>
    <script>
        $('button').on('click', function() {
            var xhr = new XMLHttpRequest();
            xhr.open('get', 'http://localhost:3000/error');
            xhr.send();
            xhr.onload = function() {
                if (xhr.status === 400) {
                    alert('try again!!!')
                }
            }
            xhr.onerror = function() {
                alert('网络中断无法发送Ajax请求')
            }
        })
    </script>

• 区分Ajax状态码和Ajax状态码
  • Ajax状态码：表示Ajax请求的过程状态ajax对象返回的
  • Http状态码：表示请求处理的结果，是服务器端返回的

低版本浏览器缓存问题

• 问题:在低版本的IE浏览器中，Ajax请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了，客户端依然拿到的是缓存中的旧数据。

• 解决方案:在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同。

 xhr.open('get', 'http://localhost:3000/cache?t='+Math.random());

Ajax异步编程

同步异步概述

同步

• 一个人同一时间只能做一件事，只有一件事做完了，才能做另外一件事
• 在代码中，就是一行代码执行完成后，才能执行下一行代码，即代码逐行执行

异步

• 一个人一件事做了一半，转而去做其他的事情，当其他事情做完以后，再回头来继续做之前未完成的事情
• 在代码中，就是异步代码虽然需要花费时间去执行，但程序不会等待异步代码执行完成后再继续执行后续代码，而是直接执行后续代码，当后续代码执行完成后再回头看异步代码是否返回结果，如果已有返回结果，再调用事先准备好的回调函数处理异步代码执行的结果。

Ajax封装

• 问题:发送一次请求代码过多，发送多次请求代码冗余日重复。

 <script>
        function ajax(options) {
            var defaults = {
                type: 'get',
                url: '',
                data: {},
                header: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                success: function() {},
                error: function() {}
            }
            Object.assign(defaults, options)
                // 创建ajax对象
            var xhr = new XMLHttpRequest();
            //拼接请求参数的变量
            var params = '';
            for (var attr in defaults.data) {
                params += attr + '=' + defaults.data[attr] + '&'
            };
            //截取掉最后的&
            params = params.substr(0, params.length - 1);

            // 判断请求方式，根据不同的请求方式做不同的处理
            if (defaults.type === 'get') {
                defaults.url = defaults.url + '?' + params
            }
            // 配置ajax对象
            xhr.open(defaults.type, defaults.url);

            if (defaults.type === 'post') {
                var contentType = defaults.header['Content-Type']
                xhr.setRequestHeader('Content-Type', contentType)
                if (contentType === 'application/json') {
                    xhr.send(JSON.stringify(defaults.data))
                } else {
                    xhr.send(params)
                }
            } else {
                xhr.send()
            }
            xhr.onload = function() {
                var contentType = xhr.getResponseHeader('Content-Type')
                var responseText = xhr.responseText
                if (contentType.includes('application/json')) {
                    responseText = JSON.parse(responseText)
                }
                if (xhr.status === 200) {
                    defaults.success(responseText)
                } else {
                    defaults.error(responseText, xhr)
                }
            }
        }
    </script>

Ajax编程扩展程序

模板引擎概述

• 作用：使用模板引擎提供的语法，可以将数据和HTML拼接起来
• 官方地址: https://aui.github.io/art-template/zh-cn/index.html

使用步骤

1. 下载art-template模板引擎库文件并在HTML页面中引入库文件

<script src="/node_modules/art-template/lib/template-web.js"></script>

2. 准备art-template模板

<script id="tpl" type="text/html">
  <div class = "checkbox"></div>
</script>

3. 告诉模板引擎将哪─个模板和哪个数据进行拼接

var html = template('tpl',(username:'zhangsan',age:'20'});

4. 将拼接好的html字符串添加到页面中

$('.checkbox').val(html)

5. 通过模板语法告诉模板引学，数据和html字符串要如何拼接

<script id="tpl" type="text/html">
  <div class = "checkbox">{{username}}</div>
</script>

• 实例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-客户端模板引擎使用步骤</title>
    <script src="/node_modules/jquery/dist/jquery.js"></script>
    <!-- 下载art-template模板引擎库文件并在HTML页面中引入库文件 -->
    <script src="/node_modules/art-template/lib/template-web.js"></script>
</head>

<body>
    <div id="container"></div>

    <!-- 准备art-template模板 -->
    <script id="tpl" type="text/html">
        <h1>{{username}}</h1>
    </script>
    <script>
        var html = template('tpl', {
            username: 'art-template模板引擎'
        })
        $('#container').html(html)
    </script>
</body>

</html>

案例

验证邮箱唯一性

• 步骤：
  1. 获取文本框并为其添加离开焦点事件
  2. 离开焦点时，检测用户输入的邮箱格式是否符合规则
  3. 如果邮箱格式不符合规则，阻止程序向下执行并且给出提示信息
  4. 如果邮箱格式符合规则，向服务器发送请求，验证邮箱地址是否被注册
  5. 根据服务器端返回值决定显示何种客户端提示信息

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证邮箱地址唯一性</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<style>
    p:not(:empty) {
        padding: 15px;
    }
    
    .container {
        padding-top: 100px;
    }
</style>

<body>
    <div class="container">
        <div class="form-group">
            <label>邮箱地址</label>
            <input type="email" class="form-control" placeholder="请输入邮箱地址" id="emailInput">
        </div>
        <!-- 通过类名操作提示信息 -->
        <!-- 错误  bg-danger 正确  bg-success -->
        <p id="info"></p>
    </div>
    <script src="/node_modules/jquery/dist/jquery.js"></script>
    <script src="/js/ajxa.js"></script>
    <script>
        var $emailInput = $('#emailInput')
        var $info = $('#info')

        $emailInput.on('blur', function() {
            var email = $emailInput.val()
            var reg = /[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}/
            if (!reg.test(email)) {
                $info.html('请输入符合规则的邮箱地址')
                    .addClass('bg-danger')
                return;
            } else {
                ajax({
                    type: 'post',
                    url: 'heep://localhost:3000/verifyEmailAdress',
                    data: {
                        email: email
                    },
                    success: function(ret) {
                        $info.html(ret.message)
                            .addClass('bg-success')
                    },
                    error: function(ret) {
                        $info.html(ret.message)
                            .addClass('bg-danger')
                    }
                });
            }
        })
    </script>
</body>

</html>

搜索框内容自动提示

• 步骤：
  1. 获取搜索框并为其添加用户输入事件
  2. 获取用户输入的关键字
  3. 向服务器发送请求并携带关键字作为请求参数
  4. 将响应的数据显示在搜索框底部

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03搜索框自动内容提示</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<style>
    .container {
        padding-top: 150px;
    }
    
    .list-group {
        display: none;
    }
</style>

<body>
    <div class="container">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入关键字" id="search">
            <ul class="list-group" id="list-box">
                <li class="list-group-item"></li>
            </ul>
        </div>
    </div>
    <script src="/node_modules/art-template/lib/template-web.js"></script>
    <script id="tpl" type="text/html">
        {{ each ret}}
        <li class="list-group-item">{{$value}}</li> {{/each}}
    </script>
    <script src="/node_modules/jquery/dist/jquery.js"></script>
    <script>
        var $serachInp = $('#search')
        var $listBox = $('#list-box')
        $serachInp.bind('input propertychange', function() {
            var key = $serachInp.val()
            $.ajax({
                type: 'get',
                url: 'http://localhost:3000/searchAutoPrompt',
                data: {
                    key: key
                },
                success: function(ret) {
                    console.log(ret);
                    var html = template('tpl', {
                        ret: ret
                    })
                    $listBox.html(html)
                    $listBox.css('display', 'block')
                }
            })
        });
    </script>
</body>

</html>

FormData

FormData对象的作用

1. 模拟HRML表单对象，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式

   步骤：

   1. 准备HTML表单

       <form action="" class="form">
              <input type="text" name="username">
              <input type="password" name="password">
              <input type="button">
          </form>
      

   2. 将表单转化为formData对象

        var formData = new FormData($('#form')[0])
      

   3. 提交表单对象

      xhr.send(formData)
      

   实例：

   安装npm i formidabl

   服务器端

   // 引入formidabl
   const formidabl = require('formidable')
   
   app.post('/formData', function(req, res) {
       res.setHeader("Access-Control-Allow-Origin", "*");
       res.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
       //创建formidable表单解析对象
       const form = new formidabl.IncomingForm();
       // 解析客户端传递过来的FormData对象
       form.parse(req, function(err, fields, files) {
           res.send(fields)
       })
   })
   

   客户端

   <body>
       <form action="" class="form">
           <input type="text" name="username">
           <input type="password" name="password">
           <input type="button" id="btn" value="提交">
       </form>
       <script src="/node_modules/jquery/dist/jquery.js"></script>
       <script>
           $('#btn').on('click', function() {
               var formData = new FormData($(".form")[0])
               var xhr = new XMLHttpRequest();
               xhr.open('post', 'http://localhost:3000/formData')
               xhr.send(formData)
               xhr.onload = function() {
                   if (xhr.status === 200) {
                       console.log(xhr.responseText);
                   }
               }
           })
       </script>
   </body>
   

FormData对象的实例方法

• 步骤：

  1. 获取表单对象中属性的值

  formData.get('name')
  

  2. 设置表单对象中属性的值

  formData.set('name','value')
  

  3. 删除表单对象中属性的值

  formData.delete('name')
  

  4. 向表单对象中追加属性值

  formData.append('name','value')
  

😬注意: set方法与 append方法的区别是，在属性名已存在的情况下，set 会覆盖已有键名的值，append会保留两个值。

FormData二进制文件上传

案例：

• 客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<style>
    .container {
        padding-top: 60px;
    }
    .padding {
        padding: 5px 0 20px 0;
    }
</style>
<body>
    <div class="container">
        <div class="form-group">
            <input type="file" id="file">
        </div>
    </div>
    <script src="/node_modules/jquery/dist/jquery.js"></script>
    <script>
        $('#file').change(function() {
            var formData = new FormData()
            formData.append('attrNmae', $('#file')[0].files[0])
            var xhr = new XMLHttpRequest()
            xhr.open('post', 'http://localhost:3000/upload')
            xhr.send(formData)
            xhr.onload = function() {
                if (xhr.status === 200) {
                    console.log(xhr.responseText);
                }
            }
        })
    </script>
</body>
</html>

• 服务器端

// 引入formidabl
const formidabl = require('formidable')

app.post('/upload', function(req, res) {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
    //创建formidable表单解析对象
    const form = new formidabl.IncomingForm();
    // 设置客户端上传文件的路径
    form.uploadDir = path.join(__dirname, '/public/uploads');
    // 保留文件的后缀名
    form.keepExtensions = true;
    // 解析客户端传递过来的FormData对象
    form.parse(req, function(err, fields, files) {
        res.send('ok')
    })
})

FormData二进制文件上传进度展示

在客户端 xhr.send(formData)之前加入该条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<style>
    .container {
        padding-top: 60px;
    }
    .padding {
        padding: 5px 0 20px 0;
    }    
    .progress {
        width: 800px;
        height: 20px;
        background-color: grey;
    }
    .progress-bar {
        background-color: skyblue;
    }
</style>
<body>
    <div class="container">
        <div class="form-group">
            <input type="file" id="file">
            <br>
            <div class="progress">
                <div class="progress-bar" style="width: 0%;" id="bar">0%</div>
            </div>
        </div>
    </div>
    <script>
        var file = document.getElementById('file')
        var bar = document.getElementById('bar')
        file.onchange = function() {
            var formData = new FormData()
            formData.append('attrNmae', this.files[0])
            var xhr = new XMLHttpRequest()
            xhr.open('post', 'http://localhost:3000/upload')
            xhr.upload.onprogress = function(e) {
                var ret = (e.loaded / e.total) * 100 + '%'
                bar.style.width = ret;
                bar.innerHTML = ret
            }
            xhr.send(formData)
            xhr.onload = function() {
                if (xhr.status === 200) {
                    console.log(xhr.responseText);
                }
            }
        }
    </script>
</body>
</html>

服务器端

app.post('/upload', function(req, res) {

    //创建formidable表单解析对象
    const form = new formidabl.IncomingForm();
    // 设置客户端上传文件的路径
    form.uploadDir = path.join(__dirname, '/public/uploads');
    // 保留文件的后缀名
    form.keepExtensions = true;
    // 解析客户端传递过来的FormData对象
    form.parse(req, function(err, fields, files) {
        res.send('ok')
    })
})

FormData文件上传图片即时预览

• 在我们将图片上传到服务器端以后，服务器端通常都会将图片地址做为响应数据传递到客户端，客户端可以从响应数据中获取图片地址，然后将图片再显示在页面中。

客户端

<body>
    <div class="container">
        <div class="form-group">
            <input type="file" id="file">
            <div class="padding" id="box">
                <!-- <img src="" alt="" class="img-rounded img-responsive"> -->
            </div>
            <div class="progress">
                <div class="progress-bar" style="width: 0%;" id="bar">0%</div>
            </div>
        </div>
    </div>

    <script>
        var file = document.getElementById('file')
        var bar = document.getElementById('bar')
        file.onchange = function() {
            var formData = new FormData()
            formData.append('attrNmae', this.files[0])
            var xhr = new XMLHttpRequest()
            xhr.open('post', 'http://localhost:3000/upload')
            xhr.upload.onprogress = function(e) {
                var ret = (e.loaded / e.total) * 100 + '%'
                bar.style.width = ret;
                bar.innerHTML = ret
            }
            xhr.send(formData)
            xhr.onload = function() {
                if (xhr.status === 200) {
                    var ret = JSON.parse(xhr.responseText)
                    var img = document.createElement('img')
                    img.src = ret.path
                    img.onload = function() {
                        var box = document.getElementById('box');
                        box.appendChild(img);
                    }
                }
            }
        }
    </script>

服务器端

app.post('/upload', function(req, res) {

    //创建formidable表单解析对象
    const form = new formidabl.IncomingForm();
    // 设置客户端上传文件的路径
    form.uploadDir = path.join(__dirname, '/public/uploads');
    // 保留文件的后缀名
    form.keepExtensions = true;
    // 解析客户端传递过来的FormData对象
    form.parse(req, function(err, fields, files) {
        res.send({
            path: files.attrNmae.path.split('public')[1]
        })
    })
})

同源政策

• Ajax请求限制

Ajax只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站，A网站中的HTML文件只能向A网站服务器中发送Ajax请求，B网站中的HTML文件只能向B网站中发送Ajax请求，但是A网站是不能向B网站发送Ajax请求的，同理，B网站也不能向A网站发送Ajax请求。

• 什么是同源

如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。

同源政策的目的

• 同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指A网站在客户端设置的Cookie，B网站是不能访问的。
• 随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax请求，如果请求，浏览器就会报错。

使用JSONP解决同源限制问题

• jsonp 是json with padding 的缩写，它不属于Ajax请求，但它可以模拟Ajax请求。

• 步骤：

  1. 将不同源的服务器端请求地址写在script标签的src属性中

  <script src = "www.example.com"></script>
  

  <script src = "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  

  2. 服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据要作为函数调用的参数

  const data = 'fn({name:"张三",age:"20"})'
  res.send(data)
  

  3. 在客户端全局作用域下定义函数fn(放在script标签前)

  function fn (data) {	}
  

  4. 在fn函数内部对服务器端返回的数据进行处理

  function fn (data) {console.log(data)}
  

• JSONP代码优化

  1. 客户端需要将函数名称传递到服务器端

     • 在客户端script标签后加上?callback=fn
     • 服务器端使用require.query.callback方法获取到函数的名字

  2. 将script请求的发送变成动态请求

     • 在客户端使用js动态的往页面追加script标签，在获取到客户端的发送的数据之后再删除该script标签

       客户端

       <script>
               function fn(data) {
                   console.log(data.message);
               }
               var btn = document.getElementById('btn')
               btn.onclick = function() {
                   var script = document.createElement('script')
                   script.src = "http://10.69.17.176:3001/test?callback=fn"
                   document.body.appendChild(script)
                   script.onload = function() {
                       document.body.removeChild(script)
                   }
               }
           </script>
       

       服务器端

       app.get('/test', function(req, res) {
           const fnName = req.query.callback
           const ret = fnName + '({name:"张三"})'
           res.send(ret)
       })
       

  3. 👍封装JSONP函数，方便请求发送

     function jsonp(options) {
         // 动态创建script标签
         var script = document.createElement('script');
         // 拼接字符串
         var params = '';
         for (var attr in options.data) {
             params += '&' + attr + '=' + options.data[attr];
         };
         // 获取随机函数名，避免同名覆盖
         var fnName = 'myJsonp' + Math.random().toString.replace('.', '');
         // 开放一个全局函数
         window[fnName] = options.success;
         // 为script添加src属性
         script.src = options.url + "?callback=" + fnName + params;
         document.body.appendChild(script);
         script.onload = function() {
             document.body.removeChild(script)
         };
     }

案例

• 腾讯天气信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腾讯天气</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<style>
    .container {
        padding-top: 50px;
        margin: 0 auto;
    }
</style>

<body>
    <div class="container">
        <table class="table table-striped table-hover" align="center" id="box">

        </table>
    </div>
    <script src="/js/jsonp.js"></script>
    <script src="/node_modules/art-template/lib/template-web.js"></script>
    <script type="text/html" id="tpl">
        <tr>
            <th>时间</th>
            <th>温度</th>
            <th>天气</th>
            <th>风向</th>
            <th>风力</th>
        </tr>
        {{each info}}
        <tr>
            <td>{{dateFormat($value.update_time)}}</td>
            <td>{{$value.degree}}</td>
            <td>{{$value.weather}}</td>
            <td>{{$value.wind_direction}}</td>
            <td>{{$value.wind_power}}</td>
        </tr>
        {{/each}}
    </script>
    <script>
        var box = document.getElementById('box')

        template.defaults.imports.dateFormat = dateFormat;

        function dateFormat(date) {
            var year = date.substr(0, 4);
            var month = date.substr(4, 2);
            var day = date.substr(6, 2);
            var hour = date.substr(8, 2);
            // var minute = date.substr(10, 2);
            // var seconds = date.substr(12, 2);
            return year + '年' + month + '月' + day + '日' + hour + '时';
            // + minute + '分' + seconds + '秒'
        }
        jsonp({
            url: 'https://wis.qq.com/weather/common',
            data: {
                source: 'pc',
                //  weather_type: 'forecast_1h|forecast_24h',
                weather_type: 'forecast_1h',
                province: '江苏省',
                city: '扬州市'
            },
            success: function(data) {
                console.log(data);
                var html = template('tpl', {
                    info: data.data.forecast_1h
                })
                box.innerHTML = html
            }
        })
    </script>
</body>
</html>

CORS跨域资源共享

• CORS:全称为Cross-origin resource sharing，即跨域资源共享，它允许浏览器向跨域服务器发送Ajax请求，克服了Ajax只能同源使用的限制。

在服务器端设置(通过中间件避免每个路由都做重复操作)

app.use((req,res,next)=>{
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With, Current-Page');
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    next();
})

访问非同源数据 服务器端解决方案

• 同源政策是浏览器给予Ajax技术的限制，服务器端是不存在同源攻策限制。

安装第三方包npm i request

服务器端

//引入request
var request = require('request');

app.get('/server',(req.res)=>{
    request('http://localhost:3001/cross',(err,responsse,body)=>{
        res.send(body)
    })
})

jQuery封装的Ajax

$.ajax()方法概述

• 作用；发送Ajax请求

$.ajax({
    type: 'get',
    url: 'http://www.example.com',
    data: {
        name: '张三',
        age: 20
    },
    contentType: 'application/x-www-form-yrlencoded',
    beforeSend: function() {
        return false
    },
    success: function(res) {

    },
    error: function(xhr) {

    }
})

$.ajax({
    type: 'get',
    url: 'http://www.example.com',
    data: JSON.stringify({
        name: '张三',
        age: 20
    }),
    contentType: 'application/json',
    beforeSend: function() {
        return false
    },
    success: function(res) {

    },
    error: function(xhr) {

    }
})

serialize方法

• 作用：将表单中的数据自动拼接成字符串类型的参数

var params = $('#form').serialize()

将表单中用户输入的内容转换为对象类型

function serializeObject(obj){
    var ret = {}
    var params = obj.serializeArray()
    $.each(params,function(index,value){
        ret[value.name] = value.value
    })
    return ret
}

全局事件

.ajaxStart()//请求开始发送时触发
.ajaxComplete()//请求完成时触发