AJAX全程为Asynchronous JavaScript And XML,就是异步的JS和XML。通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据。AJAX不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。
XML可扩展标记语言。
XML被设计用来传输和存储数据。
XML和HTML类似,不同的是HTML中都是预定义标签,而XML中没有预定义标签,全都是自定义标签,用来标傲世一些数据。
John 18
现在已经被JSON取代了。
{"name":"John","age":18}
1)可以无需刷新页面而与服务端进行通信
2)允许你根据用户事件来更新部分页面内容
1)没有浏览历史,不能回退
2)存在跨域问题(同源)
3)SEO不友好(网页内容无法爬虫)
HTTP(hypertext transport protocol)协议【超文本传输协议】,协议详细规定了浏览器和万维网服务器之间互相通信的规则。
重点是格式和参数
行 GET /s?ie=utf-8 HTTP/1.1 头 Host: atguigu.com Cookie: name=guigu Content-type: application/x-www-form-urlencoded user-Agent: chrome 83 空行 体 username=admin&password=admin
行 HTTP/1.1 200 OK 头 Content-Type: text/html;charset=utf-8 Content-length: 2048 Content-encoding: gzip 空行 体 HHHHello
注:
发送GET请求:在页面检查里面打开网络,刷新页面,发出请求、接收响应,打开最上面的请求,Header中有Response Headers和Request Headers,还有Query String Parameters。Query String Parameters中是对请求的url中的内容做的解析结果,Request Headers中是请求行和请求头的位置,Response Headers是响应行和响应头,点击Response是响应体。
发送POST请求:Headers中的Query String Parameters,会变成其他的。
xhr是XMLHttpRequest的首字母,在网页检查的网络中的XHR是对AJAX请求的筛选。
AJAX发送GET请求在url中携带参数,先用问号分割,然后直接写,用&连接
http:127.0.0.1:8080/server?a=100&b=200&c=300
AJAX发送GET请求在xhr.send()中携带参数
//3.发送 xhr.send('a=100&b=200&c=300'); xhr.send('a:100&b:200&c:300'); xhr.send('1231212313');
AJAX发送GET请求
AJAX GET 请求
AJAX发送POST请求
AJAX POST 请求
对应的后端server.js
const express=require('express') //创建应用对象 const app=express() //创建路由规则 //req是对请求报文的封装 //res是对响应报文的封装 app.get('/server',(req,res)=>{ //设置响应头,设置允许跨域 res.setHeader('Access-Control-Allow-Origin','*'); //设置响应体 res.send('ok'); }) app.post('/server',(req,res)=>{ //设置响应头,设置允许跨域 res.setHeader('Access-Control-Allow-Origin','*'); //设置响应体 res.send('okkkk'); }) //监听端口启动服务 app.listen(8000,()=>{ console.log("服务已经启动,8000端口启动中。。。") })
自定义请求头
//自定义请求头,需要在后端设置好,否则会报错 xhr.setRequestHeader('name','hhhhhh')
对应的后端设置
//可以接收任意类型的请求 app.all('/server',(req,res)=>{ //设置响应头,设置允许跨域 res.setHeader('Access-Control-Allow-Origin','*'); //响应体 res.setHeader('Access-Control-Allow-Headers','*'); //设置响应体 res.send('okkkk'); })
首先res.setHeader(‘Access-Control-Allow-Headers’,‘*’);设置接收所有响应头,接着app.all,表示接收任意类型的请求,因为会传回options类型的请求,无法得到回应,所以改成all接收。
服务端响应JSON数据
app.all('/json-server',(req,res)=>{ //设置响应头,设置允许跨域 res.setHeader('Access-Control-Allow-Origin','*'); //响应头 res.setHeader('Access-Control-Allow-Headers','*'); //响应一个数据 const data={ name:'hoshi' }; //对对象进行字符串转换 let str=JSON.stringify(data); //设置响应体 res.send(str) })
响应体中只能是字符串或buffer,所以要转换类型。
客户端接收到的是字符串,可以转换为JSON对象,有两种方式,一种是自动转换,一种是手动转换。
手动转换:
const data=JSON.parse(xhr.response) result.innerHTML=data.name;
自动转换:
//设置响应体数的类型 xhr.responseType='json'; result.innerHTML=xhr.response.name;