服务器端和ajax发送请求

最新推荐文章于 2023-02-02 10:01:38 发布

王大锤_code

最新推荐文章于 2023-02-02 10:01:38 发布

阅读量172

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/weixin_44809439/article/details/109091920

版权

本文通过一个示例介绍了如何使用Ajax技术在客户端动态加载资源，包括CSS、JS、HTML和XML文件。服务器端使用Node.js处理请求，根据请求路径返回相应文件内容。Ajax发送请求时，创建XMLHttpRequest对象，设置请求方法，监听onreadystatechange或onload事件，并将响应内容写入页面。同时，文章强调了错误处理和状态码的重要性。

摘要由CSDN通过智能技术生成

背景

AJAX是浏览器的功能

浏览器可以发请求，收响应
浏览器在window上加了一个XMLHttpRequest函数
用这个构造函数可以构造出对象
js通过它实现发请求，收响应

服务器端发送请求

先来康康服务器端发送请求
server.js文件中的代码

var http = require('http')
var fs = require('fs')
var url = require('url')
var port = process.argv[2]

if(!port){
  console.log('请指定端口号好不啦？\nnode server.js 8888 这样不会吗？')
  process.exit(1)
}

var server = http.createServer(function(request, response){
  var parsedUrl = url.parse(request.url, true)
  var pathWithQuery = request.url 
  var queryString = ''
  if(pathWithQuery.indexOf('?') >= 0){ queryString = pathWithQuery.substring(pathWithQuery.indexOf('?')) }
  var path = parsedUrl.pathname
  var query = parsedUrl.query
  var method = request.method

  /******** 从这里开始看，上面不要看 ************/

  console.log('有个傻子发请求过来啦！路径（带查询参数）为：' + pathWithQuery)

  if(path === '/index.html'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(fs.readFileSync('public/index.html'))
    response.end()
  } else if(path === '/main.js'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
    response.write(fs.readFileSync('public/main.js'))
    response.end()
  } else if (path === '/style.css') {
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/css;charset=utf-8')
    response.write(fs.readFileSync('public/style.css'))
    response.end()
  } else if (path === '/2.js') { 
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
    response.write(fs.readFileSync('public/2.js'))
    response.end()
  } else if (path === '/3.html') {
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(fs.readFileSync('public/3.html'))
    response.end()
  } else if (path === '/4.xml') {
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/xml;charset=utf-8')
    response.write(fs.readFileSync('public/4.xml'))
    response.end()
  } else {
    response.statusCode = 404
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(`你输入的路径不存在对应的内容`)
    response.end()
  }

  /******** 代码结束，下面不要看 ************/
})

server.listen(port)
console.log('监听 ' + port + ' 成功\n请用在空中转体720度然后用电饭煲打开 http://localhost:' + port)

上面的代码只用看中间部分，可以看出，就是用if else来判断路径是否存在。
setHeader是请求头，规定了请求的类型，text/html，text/css等
response.write是把请求到的字符串写入response
fs.readFileSync是读文件
读取到的文件，再通过index.html文件提前引入即可（提前写好的）

AJAX发送请求

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <!-- <link rel="stylesheet" href="/style.css"> -->
</head>
<body>
  fuck
  <p>
    <button id="getCSS">请求css</button>
    <button id="getJS">请求js</button>
    <button id="getHTML">请求html</button>
    <button id="getXML">请求xml</button>
  </p>
  <script src="/main.js"></script>
</body>
</html>

而现在不需要提前引入，只需要有一个main.js接口文件即可。
我们在main.js文件中通过操作dom来把请求道的内容写入页面。

main.js文件

getXML.onclick = () => {
  const request = new XMLHttpRequest()
  request.open('GET', '4.xml')
  request.onreadystatechange = () => {
    if (request.readyState === 4 && request.status === 200) {
      const dom = request.responseXML;
      const text = dom.getElementsByTagName('warning')[0].textContent
      console.log(text.trim());
    }
  }
  request.send()
}
getHTML.onclick = () => {
  const request = new XMLHttpRequest()
  request.open('GET', '3.html')
  request.onload = () => {
    const div = document.createElement('div')
    div.innerHTML = request.response
    document.body.appendChild(div)
  }
  request.onerror = () => {}
  request.send();
}

getCSS.onclick = () => {
  const request = new XMLHttpRequest()
  request.open('GET', 'style.css');
  request.onload = () => {
    console.log('success')
    const style = document.createElement('style')
    style.innerHTML = request.response;
    document.head.appendChild(style)
  }
  request.onerror = () => {
    console.log('fail');
  }
  request.send();
}

getJS.onclick = () => {
  const request = new XMLHttpRequest;
  request.open('GET', '2.js');
  request.onload = () => {
    const script = document.createElement('script')
    script.innerHTML = request.response
    document.body.appendChild(script)
  }
  request.onerror = () => {

  }
  request.send()
}

先把代码贴出来，不管是加载css，js，html还是xml文件，步骤都几乎一样

首先：创建XMLHttpRequest对象
调用对象的open方法
监听对象的onreadystatechange事件（上面代码有onload和onerror版本）
用不同的方法，把不同的内容写入页面
调用send方法，把请求发送出去

对比上面的代码很容易理解ajax，就是这么简单，不过其中还有一点细节要注意一下。

所有的文件内容都被转换成字符串，写入文件中，文件和字符串之间转换。
还有一个请求的readyState(状态码) 在这里插入图片描述
图片截图自mdn

对于onreadystatechange来说，当他的状态码为4时，下载成功和失败我们是不知道的。
所以就有了上面代码的if (request.readyState === 4 && request.status === 200)判断是否出错，没有下载成功，server.js就会返回404，(这里也要用到server.js文件)。

代码在我的github仓库
命令行安装node-dev后
node-dev server.js 8888
8888使用的本地的是端口号