目录复制
ajax+跨域+项目结构
ajax
ajax简介
Ajax，全称“Asynchronous JavaScript and XML”，即异步的 JavaScript 和 XML。
通过Ajax可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。
优点
可以无需刷新页面与服务器端进行通信
允许根据用户事件来更新部分页面内容
缺点
没有浏览历史，不能回退
存在跨域问题（同源）
SEO不友好，网页中的内容爬虫爬不到(需要一些操作)
基本使用步骤
1、创建XMLHttpRequest对象
2、设置请求方式和url
3、发送请求
4、拿到响应数据
// 创建xhr对象（基本步骤）
const xhr = new XMLHttpRequest()
// 初始化xhr对象，设置请求方式和请求的url（基本步骤）
xhr.open("get","http://www.baidu.com")
// 设置请求头
xhr.setRequestHeader("Content-Type","application/json;")
//支持跨域发送cookie
xhr.withCredentials=true
//发送请求（基本步骤）
xhr.send()
// 处理数据（基本步骤）
xhr.onreadystatechange() = function(){
// 判断服务器是否已经响应完毕
if(xhr.readystate === 4){
// 判断请求是否成功
if(xhr.status === 200){
console.log(xhr.status) // 响应状态码
console.log(xhr.statusText) // 响应状态文本
console.log(xhr.getAllResponseHeaders()) //获取响应头
console.log(xhr.response) // 获取响应体
}
}
}
POST请求发送数据
post请求发送数据需要在send方法中将数据添加进去
// 创建xhr对象（基本步骤）
const xhr = new XMLHttpRequest()
// 初始化xhr对象，设置请求方式和请求的url（基本步骤）
xhr.open("post","http://www.baidu.com")
// 设置请求头
xhr.setRequestHeader("Content-Type","application/json;")
//支持跨域发送cookie
xhr.withCredentials=true
//发送请求（基本步骤）
xhr.send(JSON.stringify({
"uname": username.value,
"password": pwd.value,
"groupid": groupid
}))//将object转换成json
// 处理数据（基本步骤）
xhr.onreadystatechange() = function(){
// 判断服务器是否已经响应完毕
if(xhr.readystate === 4){
// 判断请求是否成功
if(xhr.status === 200){
var res=JSON.parse(xhr.responseText)//将json数据转换成object
}
}
}
GET请求发送数据
get请求发送数据需要在url中添加
function addaccess(){
var xhr=new XMLHttpRequest()
xhr.open('get',`http://www.baidu.com?id=${arr[1]}`)
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
var res = JSON.parse(xhr.responseText)
addaccessdata(res)
}
}
}
readystate和state
xhr对象的readystate：确定请求是否成功或出现了错误。
0：未初始化
1：open调用成功，初始化完成
2：send调用成功，请求发送成功
3：服务器返回部分数据
4：服务器返回全部数据
onreadystatechange()函数：当xhr对象的readystate变化时调用。
常见xhr对象的status：HTTP响应的状态码，用于指示请求的结果。
200：OK，请求成功
404：Bad Request，请求错误
401：Unauthorized， 未经授权
403：Forbidden，禁止访问
404：Not Found,请求错误,链接失效导致，或者是URL拼写错误
500 :内部服务器错误
链接: 网络请求状态码
数据操作
function addaccessdata(res){
var dataHtml =""
for(let item of res){
dataHtml += `<div class="useraccess">
<div class="uname">${item.uname}</div>
<div class="uaccess">${item.content}</div>
<div class="deletebox"></div>
</div>`
}
document.getElementById("access").innerHTML = dataHtml
}
网络请求分析
1、请求标头（Request Headers）：在发送XHR请求时，可以通过设置请求标头来提供附加的信息。请求标头包含了一些键值对，用于指定请求的属性和要求，比如请求的内容类型、授权信息等。常见的请求标头包括 Content-Type、Authorization 等。
2、请求负载（Request Payload）：请求负载是在XHR请求中发送给服务器的数据。它可以是表单数据、JSON数据、XML数据等。请求负载通常用于将用户输入、文件上传或其他需要发送给服务器的数据传递过去。
3、预览（Preview）：预览是指在发送XHR请求之前，可以使用预览功能来查看即将发送的数据。这可以帮助开发人员确保请求的准确性，以及发送的数据是否符合预期。预览通常用于在开发者工具或网络调试工具中进行。
4、响应（Response）：响应是服务器对XHR请求的回应。服务器可以返回各种类型的响应数据，如文本、JSON、XML、图像等。开发人员可以通过XHR对象获取响应数据，并对其进行处理和解析。
跨域
什么是跨域
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
协议：网址的协议部分指定了用于访问网页的通信协议。常见的协议有：
HTTP（超文本传输协议）：用于在Web浏览器和服务器之间传输超文本。
HTTPS（HTTP安全）：在HTTP的基础上通过SSL/TLS加密保护传输数据。
FTP（文件传输协议）：用于在客户端和服务器之间传输文件。
SMTP（简单邮件传输协议）：用于发送电子邮件。
POP3（邮局协议版本3）：用于接收电子邮件。
例如，http://www.example.com中的协议部分为http。
域名（或IP地址）：域名是一个可读性更高的名称，用于标识网站的位置。如果不
使用域名，也可以直接使用服务器的IP地址进行访问。域名由多个标签组成，由点
号（.）分隔。例如，www.example.com中的域名部分为example.com。
端口号（可选）：端口号用于标识在服务器上运行的特定网络服务。如果没有明确
指定端口号，通常会使用默认的端口号。常见的端口号包括80（HTTP默认端口）、
443（HTTPS默认端口）、21（FTP默认端口）等。例如，
http://www.example.com:8080中的端口号为8080。
路径（可选）：路径部分指定了服务器上特定资源的位置。对于网页，路径表示
网页文件在服务器上的相对或绝对路径。如果没有指定路径，则通常会访问默认的
主页。例如，http://www.example.com/index.html中的路径为/index.html。
为什么出现跨域
跨域问题（Cross-Origin Resource Sharing，简称CORS）是由浏览器的
同源策略引起的。同源策略是一种安全机制，旨在防止不同源（协议、域名、
端口）的网页之间的潜在安全风险和攻击。当页面尝试从不同源请求数据时，
浏览器会阻止该请求。
跨域问题的出现可能会给实现某些功能带来限制，例如通过AJAX请求获取不同
源的数据，或者在网页中嵌入来自不同源的第三方内容（例如图片、样式表或
脚本）。这是出于安全考虑，以防止恶意网站获取用户的敏感数据或进行未经
授权的操作。
PS：需要注意的是，跨域问题只存在于浏览器环境中，而不是在服务器之间的
通信。服务器之间的通信没有同源策略的限制。
如何解决跨域问题
CORS
为了解决跨域问题，服务器端可以在响应头中通过CORS相关的HTTP头部字段允许跨域访问，例如Access-Control-Allow-Origin，Access-Control-Allow-Methods和Access-Control-Allow-Headers等。一般都是后台设置
app.all('/cors',(request,response)=>{
// 设置响应头
response.setHeader('Access-Control-Allow-Origin','*')
response.send('hello,CORS')
})
同时，也可以采用代理服务器、JSONP、跨文档消息传递（PostMessage）或使用反向代理等技术来处理跨域请求。
JSONP
script标签天生具有跨域能力，通过向页面中添加一个新的script标签来向服务器发送请求，服务器返回一个函数调用，要返回的数据作为这个函数的实参。
页面：
<body>
<button>点击获取数据</button>
<p></p>
<script>
// 获取button和p
const btn = document.getElementsByTagName('button')[0]
const p = document.getElementsByTagName('p')[0]
// 声明handle函数
function handle(data){
p.innerHTML = data.msg
}
// 绑定单击事件
btn.onclick = function(){
// 创建一个新的script标签
const script = document.createElement('script')
// 设置src属性，即要请求的服务器地址
script.src = 'http://127.0.0.1:9000/test'
// 将新的script标签放入页面中，即发送请求
document.body.appendChild(script)
}
</script>
</body>
服务端：
// 引入express
const express = require('express')
// 创建应用对象
const app = express()
// 创建路由规则
app.all('/test',(request,response)=>{
const data = {msg:'hello!'}
let str = JSON.stringify(data)
// 设置响应体，返回一个函数调用，将要返回的数据作为实参
response.send(`handle(${str})`)
})
// 监听端口，启动服务
app.listen(9000,()=>{
console.log('服务已启动，正在监听9000...')
})
项目结构
项目结构主要有文件结构和网页结构，中心思想是模块化
文件结构
盘点需要的目录：html页面，css样式，js功能，image图片资源，项目入口文件index.html
网上也有很多优秀项目结构可以参考，好的项目结构能帮助你进行文件分类，代码查询等作用
项目代码一定要写注释：写注释，程序员一生的好习惯，项目越是庞大，注释的作用就越重要
名称语义化：项目里的文件夹，文件，变量，全部使用英文的语义化名称，使用中文可能会出现一些无法检查的错误
网页结构
除了项目文件需要结构之外，网页的布局结构也是很重要的部分，例如：
页面结构根据网页需求随机应变，讲究简介美观，直接明了，体现模块化的思想
扫一扫
814
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
