AJAX
Asynchronous JavaScript And Xml:异步的JS和XML
1.优势:
无需刷新获取数据
可根据用户事件更新部分页面内容
缺点:
无浏览历史,不能回退
存在跨越问题(同源)
SEO(搜索引擎优化)不友好
2.发送ajax的四种方式:原生,jQuery,fetch,axios
3.不是新的编程语言,而是将现有的组合在一起
4.HTTP(hypertext transport protocol)协议:超文本传输协议
规定了浏览器和万维网服务器之间互相通信的规则
请求报文:重点是格式与参数
行:GET(或者POST) /?ie=utf-8 HTTP/1.1
头:Host::atguigu.com
Cookie:name=guigu
Content-type:application/x-www-form-urlencoded
User-Agent:chrome 83
空行:必须有
体:GET请求,请求体为空
POST请求,请求体可不为空
如:username=admin&password=admin
响应报文: 行:HTTP/1.1 200 OK
头:Content-Type:text/html;charset=utf-8
Content-length:2048
Content-encoding:gaip
空行必须有
体:
okkk
</.body>
5.vscode启动终端:ctrl+~
6.第八节终端问题
文件命名全英文
Js文件直接放在项目里,不能再项目得文件里
Ctrl+c释放端口
7.
// 1.引入express
const express = require(‘express’);
// 2.创建应用对象
const app = express();
// 3.创建路由规则:request请求报文的封装,response响应报文的封装
app.get(’/’,(request,response)=>{
// 设置响应
response.send(‘okk’);
});
// 4.监听端口启动服务
app.listen(8000,()=>{
console.log(“服务已经启动,8000 端口监听中…”);
})
-
app.get(’/server’,(request,response)=>{
// 当路径是/server时,执行此后面括号里的回调函数,并且由response作出响应
} -
// 1.创建对象
const xhr = new XMLHttpRequest();
// 2.初始化 设置请求方法和url
xhr.open(‘GET’,‘http://127.0.0.1:8000/server’);
// 3.发送
xhr.send();
/*
4. 事件绑定 处理服务端返回的结果
on when 当…时候
readystate 是 xhr 对象中的属性,表示状态 0 1 2 3 4
0 :未初始化
1:open方法调用完毕
2:send方法调用完毕
3:服务端返回部分结果
4:服务的返回所有结果
change 改变
*/// 设置result的文本 result.innerHTML = xhr.response;
10.服务端??
响应体没反应
12.安装nodemon以后:使用nodemon server.js启动终端
避免反复启动
13.
$(‘button’).eq(2).click(function(){
$.ajax({
// 参数是对象
// url
url:‘http://127.0.0.1:8000/jQuery-server’,
// 参数
data:{a:100,b:200},
// 请求类型
type:‘GET’,
// 响应体结果设置
dataType:'json',
// 成功回调
success:function(data){
console.log(data);
},
// 超时
timeout:2000,
// 失败的回调
error:function(){
console.log('error!!');
},
// 头信息
headeres:{
c:300,
d:400
}
})
})
14.同源
协议,域名,端口号 完全相同
15. 跨域解决方案
(1)JSONP:JSON with Padding
非官方跨域解决方案,只支持get请求。
利用script标签实现跨域。
(2)COPS:Cross-Origin Resource-Shareing
官方跨域解决方案
完全再服务器中处理