44-【前后分离】AJAX 的原理

最新推荐文章于 2023-03-23 13:04:31 发布

VIP文章小峰同学的前端之路

最新推荐文章于 2023-03-23 13:04:31 发布

阅读量911

点赞数

分类专栏：前后分离

本文链接：https://blog.csdn.net/abc465200/article/details/106510997

版权

文章目录

全文源码地址 https://github.com/yf2050/AJAX-1
AJAX技术是 asyns异步 Javascript And XML

作用：js发请求和收响应

AJAX是浏览器提供的功能，浏览器可以发送请求和收响应，所以浏览器给window上加一个全局函数，XMLHttpRequest构造函数，实现js发请求和收响应

window.XMLHttpRequest
ƒ XMLHttpRequest() { [native code] }
window.Object
ƒ Object() { [native code] }

下载server.js模拟服务器

github里下载
github里快速复制代码内容：从后面选_按住shift点击最前面

npm node-dev 自动重启node进程

yarn global add node-dev

node-dev server.js 8888

复习server.js并简化代码

写index.html路由，路由就是if else

index.html

response.write(`
<!DOCTYPE>
<html>
<head><title>AJAX</title></head>
<body>
    <h1>AJAX demo1</h1>
</body>
</html>
`)

写main.js路由

else if (path === '/main.js') {
        response.statusCode = 200
        response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
        response.write(`console.log('主要js')`)
        response.end()
    }

合并路由

<!DOCTYPE>
<html>
<head><title>AJAX</title></head>
<body>
    <h1>AJAX demo1</h1>
<script src='main.js'></script>
</body>
</html>

简化response.write(‘字符串’)：文件转字符串fs.readFileSync(‘public/index.html’)

const string = fs.readFileSync('public/index.html')
response.write(string)

AJAX实现CSS

getCSS.onclick = () => {
   
    const request = new XMLHttpRequest();//第一步：创造新的对象
    request.open('GET', '/style.css')//第二步：实现对象open()方法，初始化请求
    request.onload = () => {
   //第三步，对象监听事件
        console.log('成功')
        console.log(request.response)
        //创建style标签
        const style = document.createElement('style')
        //style插入内容
        style.innerHTML = request.response
        //把style插入头部
        document.head.appendChild(style)
    }
    request.onerror = () => {
   
        console.log('失败')
    }
    request.send() //第四步：调用对象send方法，发送 HTTP 请求
}

要点：

先启动服务器：node-dev server.js 8888
进入localhost主页面
触发获取css事件
request.response是请求的响应，作为标签内容

AJAX加载JS

原始方法：public里创建2.js,之后连接script

AJAx方法：

getJS.onclick = () => {
   
    const request = new XMLHttpRequest()
    request.open('GET', '2.js')
    request.onload

最低0.47元/天解锁文章

小峰同学的前端之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
44-【前后分离】AJAX 的原理

AJAX技术是 asyns异步 Javascript And XML作用：js发请求和收响应AJAX是浏览器提供的功能，浏览器可以发送请求和收响应，所以浏览器给window上加一个全局函数，XMLHttpRequest构造函数，实现js发请求和收响应window.XMLHttpRequestƒ XMLHttpRequest() { [native code] }window.Objectƒ Object() { [native code] }下载server.jsgithub里快速复
复制链接

扫一扫