• Ajax学习：原生jsonp实践

    输入内容：丧失焦点 向服务器发送请求 对用户名做是否存在的检测  并且改变框的颜色

     

     服务端：

    1. const {
    2. 	json
    3. } = require('express');
    4. const express = require('express')
    5.  
    6. const app = express();
    7. app.get('/home', function(requset, response) {
    8. 	//设置响应头 名称 值----设置允许跨域
    9. 	// response.setHeader('Access-Control-Allow-Origin','*');
    10. 	//设置响应体
    11. 	response.sendFile(__dirname + '/同源策略.html'); //绝对路径
    12. })
    13. app.get('/data', function(requset, response) {
    14. 	//设置响应头 名称 值----设置允许跨域
    15. 	// response.setHeader('Access-Control-Allow-Origin','*');
    16. 	//设置响应体
    17. 	response.send('用户数据'); //绝对路径
    18. })
    19. app.get('/jsonp', function(requset, response) {
    20. 	//response.send('a');
    21. 	const data = {
    22. 		name: '张三啊'
    23. 	};
    24. 	//将数据转化为字符串
    25. 	let str = JSON.stringify(data);
    26. 	//返回结果 不可以是数据 j代码 end防止添加不知名的响应头 模板字符串是需要传递字符串的
    27. 	//``模板字符串 方便拼接
    28. 	//${str}这里的是对象
    29. 	response.end(`handle(${str})`)
    30.  
    31. })
    32. app.get('/check-username', function(requset, response) {
    33.  
    34. 	const data = {
    35. 		exist: 1,
    36. 		msg: '用户名已经存在'
    37. 	};
    38. 	//将数据转化为字符串
    39. 	let str = JSON.stringify(data);
    40. 	//返回结果 不可以是数据 j代码 end防止添加不知名的响应头 模板字符串是需要传递字符串的
    41. 	//``模板字符串 方便拼接
    42. 	//${str}这里的是对象
    43. 	response.end(`handle(${str})`);//返回函数的调用 然后进行解析处理
    44.  
    45. })
    46.  
    47. app.listen(9000, () => {
    48. 	console.log('9000启动成功')
    49. })

    前端页面： 

    1. html>
    2. <html lang="zh">
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 		<title>Documenttitle>
    8. 	head>
    9. 	<body>
    10. 		用户名：<input type="text" id="username">
    11. 		<p>p>
    12. 		<script>
    13. 			const input = document.getElementById('username');
    14. 			const p = document.querySelector('p');
    15. 			//声明handele函数
    16. 			function handle(data){
    17. 				input.style.border='red 1px solid';
    18. 				//修改提示文本
    19. 				p.innerHTML=data.msg;
    20. 					
    21. 			}
    22. 			input.onblur = function() { // onblur失去焦点时发生
    23. 				let username = this.value;//获取用户输入
    24. 				//向服务器发送请求 检测用户名是否存在
    25. 				//使用jsonp方式的重点就是依靠scrip标签
    26. 				const script=document.createElement('script');
    27. 				//设置src属性
    28. 				script.src="http://127.0.0.1:9000/check-username";
    29. 				//将script插入文档中
    30. 				document.body.appendChild(script)
    31. 				
    32.  
    33. 			}
    34. 		script>
    35. 	body>
    36. html>

     

  • 相关阅读:
    相机Camera
    香港写字楼等级如何划分？从3A到C级一文讲明白
    Vue3学习（仅为了记录，参考意义不大）
    踩坑篇-Nacos+Sping-gateway+shiro实现分布式认证权限框架
    【HDLBits 刷题】Verilog Language -- Basics 部分
    P3879 [TJOI2010] 阅读理解题解
    利用C++开发一个迷你的英文单词录入和测试小程序
    快速入门JWT+Redis实现Token验证
    计算机毕业设计Java家用电器销售网站(源码+系统+mysql数据库+lw文档)
    国内DNS首选
  • 原文地址：https://blog.csdn.net/weixin_47295886/article/details/128154200