AJAX

作者: 礼知白 | 来源:发表于2018-08-22 20:45 被阅读0次

AJAX
JavaScript进阶知识点--AJAX及JSON
HTML5权威指南 | 第五部分高级功能
ajax学习笔记
AJAX
js之AJAX复习
复习jQuery - ajax
jQuery中Ajax请求的使用和四个步骤示例
ajax
ajax

ajax 是什么？有什么作用？

AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest对象与服务器通信。它可以使用JSON，XML，HTML和文本等多种格式发送和接收。AJAX最吸引人的就是它的“异步”特性，也就是说他可以在不重新刷新页面的情况下与服务器通信，交换数据，更新页面。
你可以使用AJAX最主要的两个特性做下列事：

在不重新加载页面的情况下发送请求给服务器。
接受并使用从服务器发来的数据。

AJAX是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。实现在页面不刷新的情况下和服务端进行数据交互
可参考：
MDN AJAX
JavaScript 标准参考教程

如何 mock 数据？

搭建本地服务器
安装Node.js ，通过http-server开启本地服务器
获取端口http://localhost:8000
然后通过在文件夹创建html和json文件来测试数据
示例:

//html文件
   <body>
   <script>
    var xhr = new XMLHttpRequest() //调用XMLHttpRequest()
    xhr.open('GET','/hello.json',true) //指定方式，文件，是否异步
    xhr.send() //发送请求
    xhr.addEventListener('load',function(){
        var date = xhr.responseText;
        console.log(date)
    }) //监听事件，执行相应程序
    </script>
//.json文件，需要符合JSON格式
{
    "name":"xxx",
    "age":"2"
}

通过线上来mock数据

在github写一个服务器
使用 https://easy-mock.com
使用 http://rapapi.org/org/index.do

把视频中GET 和 POST 类型的 ajax 的用法手写一遍，如

var xhr = new XMLHttpRequest()
xhr.open...
xhr.send...
xhr.onload...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
</head>
<body>
    <script>
        //GET的使用
        var xhr = new XMLHttpRequest()
        xhr.open('Get','/login?username=jirengu&password=123',true)
        xhr.send()
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                console.log(xhr.responseText)
            }
        } //此判断方式不全面

        //POST的使用
        var xhr = new XMLHttpRequest()
        xhr.timeout = 3000        //可选，设置xhr请求的超时时间
        xhr.open('POST', '/register', true)

        //判断加载是否正常
        xhr.onload = function(e) { 
          if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            console.log(this.responseText)
          }
        }
         //可选
        xhr.ontimeout = function(e) { 
          console.log('请求超时')
        }
        //可选
        xhr.onerror = function(e) {
          console.log('连接失败')
        }
        //可选
        xhr.upload.onprogress = function(e) {
        //如果是上传文件，可以获取上传进度
        }
        xhr.send('username=jirengu&password=123456')
    </script>
</body>
</html>

封装一个 ajax 函数，能实现如下方法调用

function ajax(options){
    //补全
}
ajax({
    url: 'http://api.jirengu.com/weather.php',
    data: {
        city: '北京'
    },
    onsuccess: function(ret){
        console.log(ret)
    },
    onerror: function(){
        console.log('服务器异常')
    }
})

function ajax(opts){
    var url = opts.url  //定义url参数
    var type = opts.type || 'GET'  //定义方式，默认为'GET'
    var dataType = opts.dataType || 'json'  //返回的数据类型，默认为'json'
    var onsuccess = opts.onsuccess || function(){} 
    var onerror = opts.onerror || function(){}
    var data = opts.data || {}

    //序列化用户传递的数据
    var dataStr = []
    for(var key in data){
        dataStr.push(key + '=' + data[key])
    }
    dataStr = dataStr.join('&')

    //如果方式为'GET'，拼接url
    if(type === 'GET'){
        url += '?' + dataStr
    }
    
    //AJAX
    var xhr = new XMLHttpRequest()
    xhr.open(type, url, true)
    xhr.onload = function(){
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            //成功了
            if(dataType === 'json'){
                onsuccess( JSON.parse(xhr.responseText))  //解析JSON对象
            }else{
                onsuccess( xhr.responseText)
            }
        } else {
            onerror()
        }
    }
    xhr.onerror = onerror
    if(type === 'POST'){
        xhr.send(dataStr)  //如果方式是POST，发送处理后的数据
    }else{
        xhr.send()
    }
}

AJAX详细使用