Ajax入门

express框架的使用

• 下载node.js：cmd输入node -v 检查是否安装
• vs终端打开输入npm init -y 初始化
• 继续输入npm i express 安装express框架
• 创建一个js文件名为express1（自定义）
• 引入express
  • const express = require('express')
• 创建应用对象
  • const app=express()
• 创建路由规则
  • request代表请求报文封装,response代表相应报文封装

app.get('/one',(request,response)=>{//这两名字随意
    //响应报文头,允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //响应报文体
    response.send('我来自后端')
})

• 添加监听端口服务
  • app.listen(8000,()=>{ console.log('服务启动') })
• 当前终端输入node（nodemon） express1

html中使用ajax

button.onclick = function () {
  //创建对象
  let xhr = new XMLHttpRequest()
  //初始化 设置请求方法和url
  xhr.open('GET', 'http://127.0.0.1:8000/one？a=b=200&c=300')//？a=100&b=200&c=300意思是想服务端发数a,b,c.值分别为100，200，300
  //发送
  xhr.send()
  //事件绑定 处理服务端返回的结果
  //readyState是xhr对象的属性，表示状态0，1，2，3，4完全响应
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status < 300){//200多代表成功
        console.log(xhr.status)//状态码
        console.log(xhr.statusText)//状态字符串
        console.log(xhr.getAllResponseHeaders有响应头
        console.log(xhr.response)//响应体
      }
    }
  }
}

• 如果用的post则a,b,c要写在send的括号里，且GET改为POST,app.get改为app.post
• npm install -g nodemon安装一个node工具，这样改服务端代码就不用重启再生效了
• 启动服务器用nodemon js名.js
• 安装之后如果电脑不允许执行脚本，可以打开powershell输入get-ExecutionPolicy RemoteSigned

API：

• xhr.open('GET','http://127.0.0.1:8000')初始化 设置请求方法和url
• xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')设置请求头
• xhr.send('')如果请求类型为post，则请求数据写在里面
• xhr.onreadystatechange = function(){}事件绑定 处理服务端返回的结果;当服务器响应时执行
• xhr.status状态码
• xhr.statusText状态字符串
• xhr.getAllResponseHeaders所有响应头
• xhr.response响应体
• xhr.responseType="json"设置响应体类型
• xhr.timeout = 2000设置超时时间
• xhr.ontimeout = function(){}超时回调
• xhr.onerror=function(){}网络离线回调
• xhr.abort()取消请求
• app.all('/one',(request,response)=>{} request代表请求报文封装,response代表相应报文封装
  • response.setHeader('Access-Control-Allow-Origin','*')响应报文头,允许跨域
  • response.send('我来自后端')响应报文体
• }

IE缓存问题，

• open()中的url每次请求不变的话ie就会用缓存，就得不到服务器的数据，所以在/xxx后加?t='+Data.now()加个时间戳就可以每次都请求了

axios发送Ajax

//引入axios
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

//第一个为发送地址，第二个：get：参数，请求头；post：请求体，参数，请求头
axios.get('http://127.0.0.1:8000/axios', {
  params: {},
  headers: {}
}).then(error,value => {
  console.log(value.data)
  })

• 第二种写法

axios.get({
	url:'',
	params:{},
	Header:{},
	data:{}
})

fetch发送Ajax

fetch({
  method:'.....?vip=10',
  headers:{},
  body:{}
}).then(response=>{})

响应一个页面：

//此处详情见node入门
app.get('/home',(request,response)=>{
	response.sendFile(path.join(__dirname,'网页名.html'))
}
//浏览器输入地址/home请求

jsonp跨域：

• <script src="http://127.0.0.1:8000/jsonp"></script>
• 服务端response.send(字符串形式的js代码)