AJAX axios JSONP简单实现

AJAX

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

完整教程

实现：

 <div class="container" style="text-align: center">
        <button id="btn">请求数据</button>
        <div id="text"></div>
 </div>
 
 <script>
        // AJAX
        var btn = document.getElementById('btn');
        var txt = document.getElementById('text');
        btn.addEventListener("click", load);
        function load() {
            var xml = new XMLHttpRequest();
            xml.open('GET', 'http://jsonplaceholder.typicode.com/posts', true);
            xml.onreadystatechange = function () {
                if (xml.readyState == 4) {
                    if (xml.status == 200) {
                        console.log(xml.response);
                        var obj = JSON.parse(xml.responseText);
                        txt.innerHTML = 'first person:' + '<br/>' + 'id: ' + obj[0].id + '<br/>' + 'title: ' + obj[0].title;
                    }
                } else {
                    return;
                }
            }
            xml.send();
        }
  </script>

效果演示

Jquery实现AJAX(先引入jquery)

完整教程
完整教程

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button id="b01" type="button">Change Content</button>

<script>
$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myDiv").html(htmlobj.responseText);
  });
});
</script>

axios

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中

完整教程

实现 基于vue-cli3.0

第一步：

$ npm install axios

第二步：

main.js

import  axios from 'axios'

Vue.prototype.$axios = axios;

第三步

//GET请求
mounted() {
    this.$axios
    .get('http://jsonplaceholder.typicode.com/posts')
    .then((response) => {
      var data = response.data[0];
      this.info = data;
    })
    .catch(function(error){
      console.log(error);
    })
  }

//POST请求
this.$axios
.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

JSONP

完整教程

JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

实现：

<div class="container" style="text-align: center">
        <button id="btn">请求数据</button>
        <div id="text"></div>
 </div>
    <script>

        // JSONP
        function jsonpTest(url) {
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = url;
            document.body.appendChild(script);
        }
        function something(data) {
            var txt = document.getElementById('text');
            txt.innerHTML ='first person:' + '<br/>' + 'id: ' + data[0].id + '<br/>' + 'title: ' + data[0].title;
            console.log(data);
        }
        var btn = document.getElementById('btn');
        btn.addEventListener('click', function () {
            jsonpTest('http://jsonplaceholder.typicode.com/posts?callback=something');
        })
    </script>

ps：记得写回调函数 并且只有当后台规定了能用callbcak字段才能用JSONP，否则不能达到效果