Ajax

welkinz
139 阅读2分钟

前后端如何交互

  • form表单提交（会跳转刷新页面，单向提交）
  • ajax（不需要刷新页面）
  • websocket

ajax

(Asynchronous JavaScript and XML)，ajax就是用js向服务器端发起一个请求，并获取服务器返回内容。

其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。

主要特性：异步

  • 实现在页面不刷新的情况下发送请求给服务器。
  • 接收被使用服务器发来的数据。

与之前请求方式不同点：页面没有刷新

属性

readyState

返回XMLHttpRequest代理当前所处的状态

值状态描述
0UNSENT代理被创建，但未调用open()方法
1OPENEDopen()方法已被调用了，可以通过setRequestHeader()方法来设置请求的头部，可以调用send()方法来发起请求
2HEADERS_RECEIVEDsend()方法已被调用，头部和状态已可获得
3LOADING下载中, responseText属性已包含部分数据
4DONE下载操作已完成

onreadystatechange

readyState属性发生变化时触发readystatechange事件的时候被调用。

response

返回响应的正文。

responseText

在一个请求被发送后，从服务器返回文本

readyState == 4 且 status == 200时，responseText是全部后端的返回数据

status

返回了XMLHttpRequest响应中的数字状态码

方法

open()

初始化一个请求

XMLHttpRequest.open(method,url,async)

setRequestHeader()

Http请求头部信息

send()

发送Http请求

XMLHttpRequest.send()
请求方式为POST时，不可为空

不需要发送任何值时
XMLHttpRequest.send(null)

getRequestHeader()

获取头部信息

abort()

取消异步请求

事件

load

一个XMLHttpRequest请求完成的时候会触发load事件

步骤

  1. 创建一个对象
var xhr = new XMLHttpRequest();
  1. 确定请求方式
xhr.open('POST','https://cnodejs.org/api/v1/topics',true)
  1. 发送请求
xhr.send(data)
  1. 处理响应，监听请求成功后的状态变化
//设置onreadystatechange的回调函数
request.onreadystatechange = function() {
//readyState是交互流程有没有结束
//readyState == 4判断请求是否完成，status == 200再判断是否是一个成功的响应
    if(this.readyState == 4 && this.status == 200) {
        console.log(request.responseText);
    }
}
//responseText就是服务器返回内容


//load是当readState == 4 的时候会自动触发load
//这样用表示状态为4了
 xhr.addEventListener('load',function(){  
 // 200~300之间都是成功的只是状态不同，304是数据缓存状态
        if((xhr.readyState == 4)&&(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304 )){
               console.log(xhr.responseText);
        }else {
               console.log('服务器异常')
        }
 })
  1. 发送请求

send()发送请求，GET请求不需要参数，POST请求需要把body部分以字符串或者FormData对象传进去。

request.send()

jQuery.ajax对以上4步进行了封装

$.get('filename').then(function(reponse){
    //这里是response要返回的内容
})

ajax请求

目前最常用的是json格式

$.get('filename').then(function(reponse){
    {"name" : "Jane" }
})

封装一个ajax函数

//    
		function ajax(opts){
        var url = opts.url
        var type = opts.type || 'GET'
        var dataType = opts.dataType || 'json'
        var success = opts.success || function(){}
        var error = opts.error || function(){}
        var data = opts.data || {}

        var dataStr = []
        for(var key in data){
            dataStr.push( data[key])
        }

        var xhr = new XMLHttpRequest()
        if(type === 'GET'){
            xhr.open(type,url + '/' + dataStr,true)
            xhr.send()
        }else if(type === 'POST'){
            xhr.open(type, url, true)
            xhr.send(dataStr)
        }
        xhr.onload = function(){
            if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                //成功了
                if(dataType === 'json'){
                    success( JSON.parse(xhr.responseText))
                    console.log(url)
                }else{
                    success( xhr.responseText)
                }
            } else {
                error()
            }
        }
    }

    ajax({
        type: 'GET',
        url: 'https://cnodejs.org/api/v1/topics',
        data: {
            id: "5433d5e4e737cbe96dcef312",
        },
        success: function(ret){
            console.log(ret)
        },
        error: function(){
            console.log('服务器异常')
        }
    })

搭建服务器

http-server

启动静态服务器。

server-mock

使用server-mock node启动一个能处理静态文件和动态路由的服务器。

线上mock

  1. 使用 easy-mock.com/
  2. 使用 rapapi.org/org/index.d…
  3. 使用 server-mock

参考文章

segmentfault.com/a/119000000…

avatar
文章
阅读
粉丝