异步js和xml(Asynchronous JavaScript And XML)。
通过Ajax可以在浏览器向服务器发送请求。
优势:无刷新获取数据。
缺点:SEO不友好(爬虫爬不到数据)、存在跨域问题
懒加载:按需加载,提高加载速度
XML:可扩展标记语言,用于传输和存储数据,自定义标签
<student>
<name>小明</name>
<age>18</age>
<student>
已被JSON取代
JS对象简谱(JavaScript Object Notation),一种轻量级的数据交换格式。
{"naem":"小明","age":"18"}
超文本传输协议(Hyper Text Transfer Protocol,HTTP)是一个简单的请求-响应协议
行 POST /s?ie=utf-8 HTTP/1.1
头 Host: local.com
Cookie: name=local
空行
体 name=xiaoming&age=18
行 HTTP/1.1 200 OK
头 Content-Type:text/html;charset+utf-8
Content-Length: 2048
空行
体 <html>
<head>
</head>
<body>
<h1>小明</h1>
</body>
</html>
基于 Chrome V8 引擎 的 JavaScript 运行时环境。
web开发框架
学习Ajax需要先服务端发送请求,所以需要服务端框架
npm i express
// 1.引入express
const { request, response } = require('express');
const express = require('express');
// 2.创建语言对象
const app = express();
// 3.创建路由规则
// request是对请求报文的封装
// response是对响应报文的封装
app.get('/serve', (request, response) => {
// 设置允许跨域
response.setHeader('Access-Control-allow-Origin', '*')
// 设置响应
response.send('hello ajax')
});
// 4.监听端口启动服务
app.listen(8000, () => {
console.log("服务器已启动,8000端口监听中");
})
//1.创建对象
const xhr = new XMLHttpRequest()
// 2.初始化,设置请求方法和url,get参数写这
xhr.open('GET','http://localhost:8000/serve/s?name=xiaoming&age=18')
// 3.发送请求,post参数写这
//xhr.send('name=xiaoming&age=18')
xhr.send()
// 4.处理服务返回结果
// readystate 是xhr对象的属性,表示状态0:未初始化 1:open完毕 2:send完毕 3:返回部分 4:返回全部
xhr.onreadystatechange = function(){
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)//响应体
}
}
}
xhr.open('POST','http://localhost:8000/serve')
// 设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send()
const data = {
name: 'xiaohong'
}
let str = JSON.stringify(data)
response.send(str)
// 自动数据转换
xhr.responseType = 'json'
// 手动转换
let data = JSON.parse(xhr.response)
检查文件更改,自动重启服务
//
npm i -g nodemon
//
npm i --save-dev nodemon
nodemon [your node app]
nodemon -h
nodemon ./server.js localhost 8080
url参数加上时间戳
xhr.open('GET','http://localhost:8000/serve/ie?t='+Date.now())
setTimeout(() => {
response.send('请求超时')
}, 3000);
xhr.timeout = 2000
xhr.ontimeout = function(){
alert('网络延迟')
}
xhr.abort()
let isSending = false
btns[0].onclick =function(){
if (isSending) {
xhr.abort()
}
xhr = new XMLHttpRequest()
isSending = true
xhr.open('GET','http://localhost:8000/delay')
xhr.send()
xhr.onreadystatechange = function(){
if (xhr.readystatus === 4) {
isSending = false
}
}
}
$('button').eq(0).click(function(){
$.get('http://localhost:8000/jquery-serve',{a:100,b:200},function(data){
console.log(data)
},'json')
})
$('button').eq(1).click(function(){
$.post('http://localhost:8000/jquery-serve',{a:100,b:200},function(data){
console.log(data)
})
})
$('button').eq(2).click(function(){
$.ajax({
url: 'http://localhost:8000/jquery-serve',
data: {a:100,b:200},
type: 'GET',
dataType: 'json',
success: function(data){
console.log(data)
},
error: function(){
console.log('未知错误')
},
timeout: 2000
})
})
axios.defaults.baseURL = 'http://localhost:8000'
axios.get('/axios-serve',{
params:{
name: 'xiaoming',
age:18
}
}).then((respone)=>{
console.log(respone)
})
axios.post('/axios-serve', {
name:'xiaohong',
age:18
}).then(function (response) {
console.log(response);
})
axios({
method:'get',
url: '/axios-serve',
data:{
name: 'zhangsan',
age:40
}
}).then((response)=>{
console.log(response)
})
fetch('http://localhost:8000/fetch-serve',{
method: 'POST',
headers:{
'user-agent': 'Mozilla/4.0 MDN Example',
'content-type': 'application/json'
},
body:'name=zhangsan'
})
同源策略是一个重要的安全策略,它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。
Origin: 协议+主机(域名)+端口,三个都一致时是同源
//server.js
app.all('/home', (request, response) => {
response.sendFile(__dirname + '/index.html')
})
app.all('/data', (request, response) => {
response.setHeader('Access-Control-Allow-Origin', '*')
response.setHeader('Access-Control-Allow-Headers', '*')
const data = {
data: 'hello same origin'
}
response.send(JSON.stringify(data))
})
//index.html
const xhr = new XMLHttpRequest()
xhr.responseType = 'json'
xhr.open('GET','/data')
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
div.innerHTML = xhr.response.data
}
}
}
由于浏览器同源政策的影响,跨域的ajax请求是不被允许。
项目大数据多可能用到多个不同域名的服务器,因此需要跨域
JSON with padding 非官方的跨域解决方案,只支持get请求。
利用script标签的跨域能力发送请求
app.all('/check-username', (request, response) => {
const data = {
exist: 1,
msg: '用户名已存在'
}
const str = JSON.stringify(data.msg)
response.end(`handel(${str})`)
})
function handel(data){
input.style.border = "soild 1px red"
p.innerHTML = data
}
input.onblur = function(){
let username = this.value
const script = document.createElement('script')
script.src = 'http://127.0.0.1:8000/check-username'
document.body.appendChild(script)
}
Cross-Origin Resourse Sharing 跨域资源共享,官方的跨域解决方案
设置一个请求头告诉浏览器,该请求允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')