Ajax

原生AJAX

AJAX简介

AJAX全称为Asynchronous JavaScriptAndXML,就是异步的JS和XML
通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势就是：无刷新获取数据
AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

XML简介

XML可扩展标记语言
XML被设计用来传输和存储数据
XML和HTML类似，但是HTML都是预定义标签，而XML没有预定义标签，都是自定义标签
如{name: 'clt',age: 21}对象用XML表示

<student>
	<name>clt</name>
    <age>21</age>
</student>

以前使用XML作为ajax的数据传输格式，但是现在使用更加简洁的json数据格式

AJAX的优缺点

优点

可以在不刷新页面的前提下，向服务器发送请求
允许用户根据事件来更新部分页面数据

缺点

没有浏览历史，不能回退
存在跨域问题（同源）
SEO（搜索被发现）不友好

HTTP介绍

Http请求报文

请求行
请求头
空行
请求体

Http响应报文

响应行
响应头
空行
响应体

express框架的基本使用

步骤

需要node.js环境支持
npm install express
npm install body-parser

编写express框架的服务端

const express = require('express')
//用于解析post请求的body数据
const bodyParse = require('body-parser');
const app =  express()
app.use(bodyParse())


app.all('/login',function(request,reponse){
  reponse.setHeader('Access-Control-Allow-Origin','*')
  reponse.setHeader('Access-Control-Allow-Method','*')
  reponse.setHeader('Access-Control-Allow-Headers','*')
  console.log(request.body)
  reponse.send('success')
})

app.listen(8000,function(){
  console.log('服务器在8000端口启动')
})

使用AJAX发送一个简单的请求

使用express框架搭建服务端

const express = require('express')
const app = express()
app.get('/server',function(request,reponse){
    reponse.setHeader('Access-Control-Allow-Origin','*')
    reponse.send('响应成功')
})
app.listen(8080,function(){
    console.log('服务器在8080端口启动成功')
})

发送AJAX请求

const xhr = new XMLHttpRequest()
xhr.open('get','http://127.0.0.1/server')
//post请求携带数据
xhr.send('123')
xhr.onreadystatechange = function(){
    //readystate是xhr对象上的属性，一共有5个值0，1，2，3，4
    //0-1：
    //1-2:
    //2-3:
    //3-4:
    //以上的4次状态转换都会触发这个函数的调用
    //4代表所有的准备工作都好了，可以处理响应了
    if(xhr.readystate === 4){
        //状态码在200到300之间的代表请求成功
        if(xhr.status >=200&&xhr.status<300){
            //获取响应状态码
            console.log(xhr.status)
            //获取响应字符串
            console.log(xhr.statusText)
            //获取所有的响应头
            console.log(xhr.getAllResponseHeaders())
            //获取响应体
            console.log(xhr.response)
        }else{
            console.log('请求失败')
        }
    }
}

添加自定义的请求头的注意点

ajax

function send() {
    //创建ajax对象
    const xhr = new XMLHttpRequest()
    //设置请求
    xhr.open('post', 'http://127.0.0.1:8080/test')
    //设置请求头
    xhr.setRequestHeader('token',encodeURIComponent('本地token'))
    //发送请求
    xhr.send('a=1&b=2')
    //处理响应
    xhr.onreadystatechange = () => {
        //readystate是xhr对象上的属性，有0，1，2，3，4  4代表已经处理完所有的工作，可以接受响应结果
        if (xhr.readyState === 4) {
            //判断是否请求成功
            if (xhr.status >= 200 && xhr.status < 300) {
                //获得响应状态码
                console.log(xhr.status)
                //获得响应字符串
                console.log(xhr.statusText)
                //获得所有的响应头
                console.log(xhr.getAllResponseHeaders())
                //获得响应体
                console.log(xhr.response)
            } else {

            }
        }
    }
}

express服务端的请求需要这样写

//必须是使用all方法，代表接受所有的请求，因为会有一个权限验证的请求，类型是prefilght，只用post的话会报错
app.all('/test',(req,rep)=>{
  //设置允许跨域请求
  rep.setHeader('Access-Control-Allow-Origin','*')
  //设置可以接受所有的请求
  rep.setHeader('Access-Control-Allow-Headers','*')
  let query = req.query
  rep.send('请求参数为'+query)
})

使用Ajax发送请求获取json数据并自动转换为js数据类型

function json() {
    const xhr = new XMLHttpRequest()
    xhr.open('get', 'http://127.0.0.1:8080/json')
    //使用xhr的属性responseType属性就可以让从后端接受过来的json数据自动转换
    xhr.responseType = 'json'
    xhr.send()
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                console.log(xhr.response)
                console.log(xhr.response.name)
            }
        }
    }
}

使用nodemon热部署工具

作用：实时检测express写的服务，不需要重新启动
使用：
1. npm install -g nodemon
2. nodemon server.js

使用ajax请求解决ie浏览器缓存问题

在请求后面加一个时间戳参数即可

xhr.open('get','http://127.0.0.1:8080/server?t='+Date.now())

ajax请求的请求超时和网络异常处理

timeout属性设置超时时间

ontimeout 设置超时回调函数

onerror 设置网络异常回调

function json() {
    const xhr = new XMLHttpRequest()
    xhr.open('get', 'http://127.0.0.1:8080/json?t='+Date.now())
    xhr.responseType = 'json'
    //设置网络超时的时间
    xhr.timeout = 2000
    //设置请求超时的回调
    xhr.ontimeout = function(){
        alert('请求超时')
    }
    //网络异常的回调处理
    xhr.onerror = function(){
        alert('你的网络出了问题')
    }
    xhr.send()
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                console.log(xhr.response)
                console.log(xhr.response.name)
            }
        }
    }
}

ajax手动取消请求

使用abort（）方法

const xhr = new XmlHttpRequest()
xhr.abort()

使用节流解决ajax重复发送的问题

let flag = false
let xhr
function json() {
    if(flag) xhr.abort()
    xhr = new XMLHttpRequest()
    flag = true
    xhr.open('get', 'http://127.0.0.1:8080/json?t=' + Date.now())
    xhr.send()
    xhr.onreadystatechange = function () {
        if(xhr.readyState === 4){
            flag = false
        }
    }
}

使用Jquery发送Ajax请求

简便写法

//发送GET请求
$.get('http://127.0.0.1:8080/jquery',{name: 'clt',age:21},function(data){
    console.log(data)
},'json')
//发送POST请求
$.get('http://127.0.0.1:8080/jquery',{name: 'clt',age:21},function(data){
    console.log(data)
},'json')
//第一个参数是url，第二个是携带的数据，第三个是成功的回调函数，第四个是后端返回的数据进行自动类型转换

通用写法

$.ajax({
    //请求的地址
    url: 'http://127.0.0.1:8080/jquery',
    //请求的方法
    type: 'GET',
    //携带的数据，对象
    data: {
        name: 'clt',
        age: 21
    },
    //设置请求头
    headers: {
        token: token
    },
    //设置请求超时时间ms
    timeout: 2000
    //响应数据类型自动转换
    dataType: 'json',
    //请求成功回调函数
    success: function(data){
        console.log(data)
    },
    //失败回调函数
    error: function(err){
        console.log(err)
    }
})

对于常规的ajax请求这些配置已经够用了，如果需要个性化的查询：https://jquery.cuishifeng.cn/jQuery.Ajax.html

使用axios发送ajax请求

简便写法

//发送GET请求，第二个参数就是其他配置项
axios.get('http://127.0.0.1:8080/jquery',{
    //url参数
    params: {
        name: 'clt',
        age: 21
    },
    //设置header
    headers: {
        token: 'token'
    }
})
//发送POST请求，第二个参数是请求体参数，第三个才是其他配置
axios.post('http://127.0.0.1:8080/jquery',{name:'clt',age:21},{
    params: {
        hobbys: '123',
        dd: '234'
    },
    headers: {
        token: 'token'
    }
})

使用axios函数

//axios返回的是一个Promise对象
axios({
    url: 'http://127.0.0.1:8080/jquery',
    method: 'POST',
    params: {
        username: encodeURIComponent('陈浪涛'),
        password: '123'
    },
    headers: {
        token: 'jfasdifjdaifoajsdf'
    },
    data: {
        hobbys: ['篮球', '羽毛球']
    }
}).then(value => {
    console.log(value.data)
    console.log(value.status)
    console.log(value.statusText)
})

使用fetch全局函数发送ajax

fetch('http://127.0.0.1:8080/jquery',{
    method: 'POST',
    headers: {
        token: 'dfdf'
    },
    body: 'username=clt&password=123'
}).then(value =>{
    return value.json()
}).then(value =>{
    console.log(value)
})

同源策略

基本介绍

同源策略是Netscape公司提出，是浏览器的一种安全策略
同源：协议，域名，端口号必须完全相同
违背同源策略就是跨域

解决跨域

使用jsonp

在服务端设置CORS

基本介绍
- CORS，跨资源共享。CORS是官方的跨域解决方案，他的特点是不需要在客户端做任何的操作，完全在服务端中进行处理，支持get和post请求。跨域资源共享标椎中新增了一组HTTP首部字段，允许服务器声明那些源站通过浏览器有权限访问那些资源
CORS怎么工作的
- CORS通过在服务器设置响应头告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行
设置

//解决跨域
response.setHeader('Access-Control-Allow-Origin','*')
//允许自定义请求头
response.setHeader('Access-Control-Allow-Headers','*')
//允许所有请求方法访问
response.setHeader('Access-Control-Allow-Method','*')

posted @ 2023-08-03 22:15 在赶路的我阅读(16) 评论(0) 收藏举报

刷新页面返回顶部