ajax

ajax

如何和后端交互

form表单提交 范例

• submit 的时候会自动提交到action上
• 这个方法非常老
• 提交的时候页面会发生跳转，跳转到另一个页面上
• 不知道后台如何回应这个方法，或者是直接不回应了

ajax

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

怎么实现

• XMLHttpRequest
• fetch兼容

javascript中常见的异步有哪些

• 可以做一些设置，可以发一些请求，具有异步和同步的功能
• 分为同步和异步，在5min内的请求达到我们的需求的时候，我们学的异步的时候
• setHTML
• onclick
• ajax

同步获取数据

• xhr.open('GET','/hello.json',true)

从hello.json中使用get方法同步获取数据
等待发送的请求发送完之后再获取数据

var xhr = XMLHttpRequest()
xhr.open('GET','/hello.json',true)
xhr.send()
var data = xhr.responseText
console.log(data)

异步获取数据

var xhr = XMLHttpRequest()
xhr.open('GET','/hello.json',false)
xhr.send()
xhr.addEventLisrener('load',function(){
    var data = xhr.responseText
    console.log(data)
})

里面的数据不会识别是否发生变化，要在addEventListener中添加一个新的数据

var xhr = XMLHttpRequest()
xhr.open('GET','/hello.json',false)
xhr.send()
xhr.addEventLisrener('load',function(){
    if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304)
    var data = xhr.responseText
    console.log(data)
}else{
    console.log('error')
}
)

onerror

onreadystatechange

var xhr = new XMLHttpRequest()
xhr.open('GET','/hello.json',true)
xhr.send()
console.log('readyState:',xhr.readyState)
xhr.addEventListener('readystatechange',function(){
    console.log('readyState',xhr.readyState)
})

汇总后

xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
        console.log(xhr.response.Text)
    }
}

xhr.readyState是指的是指服务器的准备状态，
在这个准备的状态，

post请求

var xhr = new XMLHttpRequest()
xhr.open('GET','/hello.json',true)
xhr.send('username=jirengu&password=123')

什么是status 什么是readyState

readyState，是指运行AJAX所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤，使用“ajax.readyState”获得

status，status是XMLHttpRequest对象的一个属性，表示响应的HTTP状态码
在HTTP1.1协议下，HTTP状态码总共可分为5大类
（是指无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，使用“ajax.status”获得）

总体理解：可以简单的理解为state代表一个整体的状态。而status是这个大的state下面具体的小的状态。

使用githubpagesmock数据

• 确定数据的结构
• 确定需要哪些接口
• 利用自己构造的假数据去模拟服务器

http-server

启动一个静态服务器

server-mock

手写一个服务器

线上mock数据

Question

ajax 是什么？有什么作用？

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

如何 mock 数据？

使用 http://easy-mock.com/
使用 http://rapapi.org/org/index.do
使用 server-mock

把GET和POST类型的ajax的用法手写一遍

//GET
var xhr = new XMLHttpRequest()
    xhr.open('GET','/weather.php?username =jake&password=123456',true)
    xhr.send()
    xhr.addEventListener('load',function(){
        if(xhr.status > 200 || xhr.status < 300 || xhr.status === 304){
            var data = xhr.responseText()
            console.log(data)
        }else{
            console.log('error')
        }
    })

//POST
  var xhr = new XMLHttpRequest()
    xhr.open('POST', '/login',true)
    xhr.onload = funciton(){
        if(xhr.readystatus === 4 && xhr.status === 200){
            var data = xhr.responseText()
            console.log(data)
        }else{
            console.log('error')
        }
    }

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

    function ajax(opts){
        var url = opts.url
        var type = opts.type || 'GET'
        var dateType = opts.dataType || '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('&')

        if(type === 'GET') {
            url += '?' + dataStr
        }

        var xhr = new XMLHttpRequest()
        xhr.open(type, url, true)
        xhr.onload = function(){
            if(xhr.readystatus === 4&& xhr.status === 200){
                if(dataType === 'json'){
                    onsuccess(JSON.parse(xhr.responseText))
                }else{
                    onsuccess(xhr.responseText)
                }
            }else{
                onerror()
            }
        }
        xhr.onerror = onerror
        if(type === 'POST'){
            xhr.send(dataStr)
        }else{
            xhr.send()
        }
    }
    ajax({
        url: 'http://api.jirengu.com/weather.php',
        data: {
            city: '北京'
        },
        onsuccess: function(ret){
            console.log(ret)
        },
        onerror: function(){
            console.log('服务器异常')
        }
    })