蓝旭培训ajax+跨域+项目结构-CSDN博客

本文链接：https://blog.csdn.net/qq_61880065/article/details/132029387

目录复制

ajax+跨域+项目结构

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...')
})