初学AJAX(1)
- 学习中了解到AJAX作用是进行一段操作然后得到响应,本质和一个函数感觉差不多
XML (可扩展标记语言)
被设计用来传输和储存数据(区分于HTML,后者是在界面中呈现数据,且HTML中的标签都是预定义标签,而XML都是自定义的标签)
但是现在基本用JSON来替代XML。
AJAX的优点
- 可以无刷新实现页面与服务器的通信
- 可根据用户时间来更新部分页面内容
缺点
- 无浏览历史,不能回退
- 存在跨域问题(同源)
- SEO不友好(爬虫爬不到)
HTTP协议 ——超文本传输协议(Hypertext Transfer Protocol)
规定浏览器与万维网服务器间通信的规则
主要分为请求报文和响应报文
请求报文
起始行(start line):描述请求或响应的基本信息;
头部字段(header):使用 key-value 形式更详细地说明报文;
空行
消息正文(entity):实际传输的数据,它不一定是纯文本,可以是图片、视频等二进制数据。
(起始行和头部字段统称为Header,消息正文也叫做实体,统称为body。每份请求报文一定有Header,可无body。)
响应报文
起始行:HTTP/1.1 200 OK
头部字段:Content-Type: text/html;charset=utf-8
Content-length: 2048(…等等)
(对响应体中的内容进行描述)
空行
消息正文(体):<html> <body> …… </body> </html>
之后简单了解了一下express框架
下载了node.js后写了一个HELLO EXPRESS
//1、引入express
const express = require('express');
//2、创建应用对象
const app = express();
//3、创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/', (request, response) => {
response.send('HELLO EXPRESS')
});
//4、监听端口启动服务
app.listen(8000, () => {
console.log("服务已启动,8000 端口监听中......")
})
这个在页面中呈现出
(终于做出第一个小东西了!)
之后尝试着做了一下AJAX与HTML页面的结合
JavaScript代码
//1、引入express
const express = require('express');
//2、创建应用对象
const app = express();
//3、创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server', (request, response) => {
//设置响应头
response.setHeader('Access-Control-Allow-Origin', '*')
//设置响应体
response.send('HELLO EXPRESS')
});
//4、监听端口启动服务
app.listen(8000, () => {
console.log("服务已启动,8000 端口监听中......")
})
再与一个简单的HTML页面结合一起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#result {
width: 500px;
height: 500px;
color: blue;
background-color: bisque;
}
button {
width: 100px;
height: 30px;
}
</style>
</head>
<body>
<button>
cilck me
</button>
<div id="result">
</div>
<script>
//获取button元素
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById("result");
//绑定事件
btn.onclick = function () {
//四个步骤
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化,设置请求方法和url
xhr.open('GET', 'http://127.0.0.1:8000/server');
//3.发送
xhr.send();
//4.事件绑定 处理服务端返回的结果
//readystate 是 xhr对象中德属性,表示状态 0 1 2 3 4
//初始值就是0 1表示open方法调用万病 2表示send方法调用完毕 3表示服务端返回了部分结果 4表示服务端返回所有结果
xhr.onreadystatechange = function () {
//判断
if (xhr.readyState === 4) {
//判断响应状态码 200 404 403 401 500
//2xx成功
if (xhr.status >= 200 && xhr.status < 300) {
//处理结果 行 头 空行 体
//响应行
console.log(xhr.status);//响应状态码
console.log(xhr.statusText);//状态字符串
console.log(xhr.getAllResponseHeaders());//所有响应头
console.log(xhr.response);//响应体
//设置result的文本
result.innerHTML = xhr.response;
}
}
}
}
</script>
</body>
</html>
打开后点击按钮,就实现了不刷新页面然后更新div中的内容了
点击按钮
但是虽然初步做出了程序,但是内部原理还不太懂,之后再接再厉!