Ajax学习：服务端响应Json格式数据的请求

最新推荐文章于 2024-04-26 16:54:26 发布

¡Venceremo

最新推荐文章于 2024-04-26 16:54:26 发布

阅读量1.2k

点赞数

分类专栏： Ajax 文章标签： ajax 学习 json

本文链接：https://blog.csdn.net/weixin_47295886/article/details/128087459

版权

Ajax 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

在实际工作中，向服务端发送请求，服务端返回的结果大都是json格式的数据，

在窗口下面按下任意一个按键就会向服务端发送请求，服务端会返回结果，在div中显示

触发ajax实现局部刷新资源不重新加载（页面没有刷新，前端页面触发ajax和服务器实现交互）

首先进行服务器端进行书写——实际上在我的浏览器版本中直接 send直接传递对象也是可以的

但在实际开发中需要传递json格式字符串较多


//1、导入express
const express=require('express')
//2、创建应用对象  创建web服务器
const app=express()
//3、创建路由规则
//监听客户端的GET请求和POST请求，并向客户端响应具体内容
//requset是对请求报文的封装
//response是对响应报文的封装
app.get('/server',function(requset,response){
    //设置响应头 名称 值----设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    response.send('hello AJAX');
})
app.all('/server',function(requset,response){
    //设置响应头 名称 值----设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');//所有请求头都支持 还是存在问题

    //设置响应体
    response.send('uuiiiii');
})
app.get('/json-server',function(requset,response){
    //设置响应头 名称 值----设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
	//响应一个数据
    const data={//对象
        name:'张三'
    };
    //对对象SON.stringify 进行字符串转成json转换
    let str=JSON.stringify(data);
    //设置响应体
    //目前服务器端传递的是对象 会自动转换为json
    response.send(str);//send方法只能接收字符串和buffer 结果是json格式字符串
})
//4、监听端口 启动服务
//启动服务器.lisen(端口号，（启动成功职之后的回调函数）) 端口号是80可以省略
app.listen(8000,()=>{
    console.log('8000启动成功')
})

这里的重点是：传递对象给客户端

客户端组成

		<style>
			#result {
				width: 200px;
				height: 100px;
				border: 1px black solid;
			}
		</style>
	</head>
	<body>
		<div id="result"></div>

原始的直接传递数据（4步骤走）

	window.onkeydown = function() {
				//4步走
				const result = document.getElementById('result');
				const xhr = new XMLHttpRequest();
              
				xhr.open('GET', 'http://127.0.0.1:8000/json-server');
				xhr.send();
				xhr.onreadystatechange = function() {
					if (xhr.readyState === 4) {
						if (xhr.status < 300 && xhr.status >= 200) {
							//xhr.response服务端返回的响应体
							result.innerHTML=xhr.response;
                           
						}
					}

				}

			}

接收到的内容是字符串 json格式

手动设置数据转换 json转对象JSON.parse(xhr.response);

		window.onkeydown = function() {
				//4步走
				const result = document.getElementById('result');
				const xhr = new XMLHttpRequest();
				xhr.open('GET', 'http://127.0.0.1:8000/json-server');
				xhr.send();
				xhr.onreadystatechange = function() {
					if (xhr.readyState === 4) {
						if (xhr.status < 300 && xhr.status >= 200) {
							//xhr.response服务端返回的响应体
			
                            //手动对数据进行转换 将json格式字符串转换为对象
                            let data=JSON.parse(xhr.response);
                            result.innerHTML=data.name;

            
						}
					}

				}

			}

自动设置数据转换（ //自动转换——借助xhr对象上的属性responseType， xhr.responseType='json';）相应的内容直接转化成为对象数据

				//4步走
				const result = document.getElementById('result');
				const xhr = new XMLHttpRequest();
                自动转换——借助xhr对象上的属性
                //设置响应体数据的类型
                xhr.responseType='json';
				xhr.open('GET', 'http://127.0.0.1:8000/json-server');
				xhr.send();
				xhr.onreadystatechange = function() {
					if (xhr.readyState === 4) {
						if (xhr.status < 300 && xhr.status >= 200) {

                            //自动转换——借助xhr对象上的属性
                            result.innerHTML=xhr.response.name;
            
						}
					}

				}

			}

¡Venceremo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax学习：服务端响应Json格式数据的请求

自动设置数据转换（ //自动转换——借助xhr对象上的属性responseType， xhr.responseType='json';首先进行服务器端进行书写——实际上在我的浏览器版本中直接 send直接传递对象也是可以的。手动设置数据转换 json转对象JSON.parse(xhr.response);在窗口下面按下任意一个按键就会向服务端发送请求，服务端会返回结果，在div中显示。在实际工作中，向服务端发送请求，服务端返回的结果大都是json格式的数据，这里的重点是：传递对象给客户端。
复制链接

扫一扫