原生js使用ajax进行简单的前后端的数据交互|js&node&ajax

第一次发布内容,内容简陋请多包含.......

前端html代码:

<html>

<head>

<meta charset="UTF-8">

<title>AJAX 实例</title>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

<script>

var data="data=sdd&hf=jkhklh"   // 要提交的数据

// 使用ajax提交get方式数据

function ajax(){

var oAjax = new XMLHttpRequest();

oAjax.onreadystatechange = function (){

if(oAjax.readyState == 4&& oAjax.status == 200){

alert(oAjax.responseText);

}

}

oAjax.open(‘GET‘, ‘/ss?‘+data);

oAjax.send();

}

// 使用ajax提交post方式数据

function ajaxP(){

var oAjax = new XMLHttpRequest();

oAjax.onreadystatechange = function (){

if(oAjax.readyState == 4&& oAjax.status == 200){

alert(oAjax.responseText);

}

}

oAjax.open(‘POST‘, ‘/ss‘);

oAjax.send(data);

}

</script>

</head>

 <body>

  <button type="button" onclick="ajax()">Get</button>

  <button type="button" onclick="ajaxP()">Post</button>

</body>

</html>

后端node.js代码:

var http = require("http");

var fs = require("fs");

var url=require("url");

var app=(req,res)=>{

var pathname = url.parse(req.url).pathname;

var method = req.method.toLowerCase();

if(pathname=="/favicon.ico")return;

if(pathname=="/"){

fs.readFile("./ajax.html",(err,data)=>{

res.writeHead(200,{‘content-type‘:‘text/html;charset=utf8‘});

res.end(data);

})

}

if(pathname=="/ss"&&method=="get"){

// console.log(url.parse(req.url).query);

res.writeHead(200,{‘content-type‘:‘text/html;charset=utf8‘});

res.end(‘{"data":"这是GET数据"}‘);

}

if(pathname=="/ss"&&method=="post"){

// console.log("sdsd");

req.on("data",function(data){

//打印

// console.log(decodeURIComponent(data));

});

res.writeHead(200,{‘content-type‘:‘text/html;charset=utf8‘});

res.end(‘{"data":"这是POST的数据"}‘);

}

console.log(url.parse(req.url))

}

http.createServer(app).listen(8000);

原文地址:https://www.cnblogs.com/moope/p/12121997.html

时间: 2024-10-10 10:48:56

原生js使用ajax进行简单的前后端的数据交互|js&node&ajax的相关文章

php中使用ajax进行前后端json数据交互

(最近在学习ajax,所以想自己总结一下在PHP中如何使用ajax技术!) 一.ajax注意点: 1.原理图:(来自韩顺平ajax视频) 2.ajax返回数据类型: 文本,json,xml (1)文本格式: (2)xml: 1 <?php 2 //告诉浏览器返回的是xml类型 3 header("Content-Type:text/xml;charset=utf-8"); 4 5 6 7 8 ?> 前端如何取出: xmlrequest.responseXml();//返回的

初识 vue —— 最简单的前后端交互示例

一.初识 vue 时的困惑 最近想学一门前端技术防身,看到博客园中写 vue 的多,那就 vue 吧.都说 vue 的官方教程写得好,所以我就从官方教程开始学习.官方教程说"Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用."但是这个概念是个什么鬼?还是让人一头雾水嘛.而且我一开始也没有搞清楚 vue 的定位,只知道它是一个前端库,但是确实不知道它的优势是什么,还以为它是一个学会就能一劳永

【springMVC】简单的前后端数据交流

最最常见两种,一则返回视图模板(文档),二则为json数据.就使用一个源代码文件来看看springmvc是怎么做到的. 1.UserController.java源代码文件 (这里额外的使用了fastjson架包来将对象解析为json) package com.zay; import com.alibaba.fastjson.JSON; import org.springframework.stereotype.Controller; import org.springframework.web

一个Java程序猿眼中的前后端分离以及Vue.js入门

松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ,因此在我的书里边就没有多说.但是最近总结小伙伴遇到的问题,感觉很多人对前后端分离开发还是两眼一抹黑,所以今天松哥想和大家聊一下前后端分离以及 Vue.js 的一点事,算是一个简单的入门科普吧. 前后端不分 后端模板:Jsp.FreeMarker.Velocity 前端模板:Thymeleaf 前

Ajax与json在前后端中的细节解惑

ajax请求JSON Thinkphp中对是否为Ajax的判断,在TP3.2开发手册中有这么一段:“需要注意的是,如果使用的是ThinkAjax或者自己写的Ajax类库的话,需要在表单里面添加一个隐藏域,告诉后台属于ajax方式提交,默认的隐藏 域名称是ajax(可以通过VAR_AJAX_SUBMIT配置),如果是JQUERY类库的话,则无需添加任何隐藏域即可自动判断.” 我还没细看它的源代码,搜到的出处在这里 define('IS_AJAX', (strtolower($_SERVER['HT

教你如何前后端完全分离(非api、ajax)

我的前后分离,不是api,不是ajax,我这里只讨论html与后端结合 前话 曾经风靡一时的dedecms相信做网站的十有八.九都知道,还有那么一些不是技术出生的人,通过看一下文档,也能访问出网站出来,有的人说dedecms太垃圾了,不知道是从哪些方面来说的,但不得不承认它的优势,又有哪个框架免费给你用,还这么方便的呢 话说回来,dedecms的一大好处就是会模板标签,差不多就会慢慢的做套网页了,真的就是这么简单 phper技术到底如何 之前我面试过一些人,当然我不会拿网上一些现成的试题,或感觉

基于Ajax技术的前后端Json数据交互方式实现

前言 使用浏览器访问网站是日常生活中必不可少的一件事情,当我们在浏览器地址栏中输入网址后会看到网站的内容,那么这个过程中发生了什么?下面简单介绍下浏览器访问网站过程. 第一步:浏览器向DNS服务器发起DNS请求,DNS服务器解析域名后返回域名对应的网站服务器IP地址第二步:浏览器获取IP地址后向网络服务器发送一个HTTP请求第三步:网络服务器解析浏览器的请求后从数据库获取资源,将生成的html文件封装至HTTP 响应包中,返回至浏览器解析 下图抓包显示了访问"www.baidu.com"

一个简单的前后端分离的方案

背景: 1.实现前后端绝对分离.项目迭代过程中,前端后端各自上线,互不影响互不依赖,解决前端逻辑的修改需要依赖后端同学发新包重新上线的问题. 2.保证页面文件的静态化,提高服务相应效率. 3....方案: 1.前后端通信——完全走ajax,使用服务器代理中转(如配置nginx)解决跨域2.file include *本地开发使用nodejs的express框架搭建服务端环境,ejs作为服务端的模板引擎,解决html页面无法使用include file的问题 *上线发布时,使用grunt的ejs任

编码格式分类: 前后端传递数据的编码格式contentType

urlencoded:form表单和ajax提交数据的默认编码格式 form-data:传文件 application/json:json格式数据 >>> 前后端分离 urlencoded() >>> username=jason&password=123 form-data application/json >>>JsonResponse.string({"name":"jason","pas