Ajax和node相结合 1

最新推荐文章于 2025-04-02 17:22:40 发布

ZhiAng99

最新推荐文章于 2025-04-02 17:22:40 发布

阅读量258

点赞数 1

文章标签： ajax

本文链接：https://blog.csdn.net/ZhiAng99/article/details/108651208

版权

本文介绍了如何使用Ajax与Node.js相结合，从Ajax入门、处理接收到的数据、传递GET和POST请求参数到服务器，到理解Ajax的状态码和错误信息。基础的Ajax代码、GET和POST请求的参数拼接方法以及xhr对象的状态码和错误信息获取是关键点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1.Ajax入门

ajax其实就是服务器和网页之间的中间人网页跳转会经过Ajax的处理服务器返回的信息也会在Ajax中进行处理所以你网页要去哪里怎么去都要通知给Ajax
下面就是Ajax最基础的代码

<script type="text/javascript">
		// 1.创建ajax对象
		var xhr = new XMLHttpRequest();
		// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
		// 1)请求方式 2)请求地址
		xhr.open('get', 'http://localhost:3000/first');
		// 3.发送请求
		xhr.send();
		// 4.获取服务器端响应到客户端的数据
		xhr.onload = function (){
			console.log(xhr.responseText)
		}
	</script>

2.处理Ajax接收的数据

因为node服务器不可以直接传递json对象传递过来的大多都是json字符串的形式所以我们需要自己将json字符串转化为对象

 <script type="text/javascript">
      // 1.创建ajax对象
      var xhr = new XMLHttpRequest();
      // 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
      // 1)请求方式 2)请求地址
      xhr.open("get", "http://localhost:3000/responseData");
      // 3.发送请求
      xhr.send();
      // 4.获取服务器端响应到客户端的数据
      xhr.onload = function () {
        //这样子到页面就不是json对象了 而是json字符串
        //console.log(xhr.responseText);
        //将json字符串转化为json对象
        //JSON.parse(xhr.responseText)
        console.log(JSON.parse(xhr.responseText));
        //将json对象和字符串拼接显示在页面上
        let str = `<h2> ${JSON.parse(xhr.responseText).name}  </h2>`;
        document.body.innerHTML = str;
      };
    </script>

3.传递get请求参数给服务器

get方式传递参数数据一般都在url上所以说我们最主要的是把数据拼接到所访问的url上
1.先获取你要传递的值
2.进行字符串拼接
3.进行发送

<script>
      //获取按键
      let username = document.getElementById("username");
      let age = document.getElementById("age");
      let btn = document.getElementById("btn");
      //btn 添加点击事件
      btn.onclick = function () {
        //1 创建ajax对象
        var xhr = new XMLHttpRequest();
        //接收参数并拼接
        var usernameValue = username.value;
        var ageValue = age.value;
        var params = `username=${usernameValue}&age=${ageValue}`;
        // 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
        // 1)请求方式 2)请求地址
        xhr.open("get", "http://localhost:3000/get?" + params);
        // 3 发送请求
        xhr.send();
        // 4.获取服务器端响应到客户端的数据
        xhr.onload = function () {
          console.log(xhr.responseText);
        };
      };
    </script>

4.传递post请求参数给服务器

post传递参数给服务器有自己独特的方法但是首先还是要获取你要传递的信息然后进行拼接
当要进行post传递时必须要设置一个特殊的参数如果你要传递的参数是字符串那么就设置下面的
xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
如果你传递的是Json对象
xhr.setRequestHeader(‘Content-Type’, ‘application/json’);

<script type="text/javascript">
		// 获取按钮元素
		var btn = document.getElementById('btn');
		// 获取姓名文本框
		var username = document.getElementById('username');
		// 获取年龄文本框
		var age = document.getElementById('age');
		// 为按钮添加点击事件
		btn.onclick = function () {
			// 创建ajax对象
			var xhr = new XMLHttpRequest();
			// 获取用户在文本框中输入的值
			var nameValue = username.value;
			var ageValue = age.value;
			// 拼接请求参数
			var params = 'username='+ nameValue +'&age=' + ageValue;
			// 配置ajax对象
			xhr.open('post', 'http://localhost:3000/post');
			// 设置请求参数格式的类型（post请求必须要设置）
				//xhr.setRequestHeader('Content-Type', 'application/json');
			xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			// 发送请求
			xhr.send(params);
			// 获取服务器端响应的数据
			xhr.onload = function () {
				console.log(xhr.responseText)
			}
		}
	</script>

5.Ajax的状态码

xhr.readyState可以获取Ajax的状态码
0 已经创建了ajax对象但是还没有对ajax对象进行配置
1 已经对ajax对象进行配置但是还没有发送请求
2 请求已经发送了
3 已经接收到服务器端的部分数据了
4 服务器端的响应数据已经接收完成

所以我们不用onlaod也可以获取

  <script type="text/javascript">
		var xhr = new XMLHttpRequest();
		// 0 已经创建了ajax对象 但是还没有对ajax对象进行配置
		console.log(xhr.readyState);
		xhr.open('get', 'http://localhost:3000/readystate');
		// 1 已经对ajax对象进行配置 但是还没有发送请求
		console.log(xhr.readyState);

		// 当ajax状态码发生变化的时候出发
		xhr.onreadystatechange = function() {
			// 2 请求已经发送了
			// 3 已经接收到服务器端的部分数据了
			// 4 服务器端的响应数据已经接收完成
			console.log(xhr.readyState);
			// 对ajax状态码进行判断 如果状态码的值为4就代表数据已经接收完成了
			if (xhr.readyState == 4) {
				console.log(xhr.responseText);
			}
		}
		xhr.send();
	</script>

6.获取Ajax的错误信息

http状态码xhr.status

<script>
      let btn = document.getElementById("btn");
      btn.onclick = function () {
        // 1.创建ajax对象
        var xhr = new XMLHttpRequest();
        // 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
        // 1)请求方式 2)请求地址
        xhr.open("get", "http://localhost:3000/error");
        // 3.发送请求
        xhr.send();
        // 4.获取服务器端响应到客户端的数据
        xhr.onload = function () {
          // http状态码xhr.status
          console.log(xhr.responseText);
          console.log(xhr.status);
        };
      };
    </script>