ajax中get请求获取数据

回到文章总目录

1.创建在testtwo文件夹并在这个文件夹里面
2.创建get.html文件
3.创建server.js文件

get.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax get 请求</title>
</head>
<body><button>点击发送get请求</button><!-- id为result的div --><div id="result" style="width:  200px;height: 100px;border: solid 1px #770088;"></div><script>// 获取button元素// 1.这个指定元素是那个——第一个按钮 （下标为0）const btn = document.getElementsByTagName('button')[0];// 把获取到的响应体展示在div中const result = document.getElementById("result");// 2.绑定事件 btn.onclick = function(){}// 一般作为开发会进行本网页是否功能正常，测试则为在控制台输出信息// btn.onclick = function(){console.log('测试成功');}// btn.onclick = function(){// 1.创建对象const textone = new XMLHttpRequest();// 2.初始化，设置请求方法和URL// 第一个参数为[什么类型的请求]// 第二个参数为[给那个url发送]textone.open('GET','http://127.0.0.1:8000/server');// 3.发送textone.send();// 4.事件绑定 处理服务端返回的结果// onreadystatechange 的意思//  on 就是when 当...的时候// readystate 是textone 对象中的属性，表示状态    有5个值//                                                                                                  状态     意思//                                                                                                     0        没初始化//                                                                                                     1        open方法调用完毕//                                                                                                     2        send方法调用完毕//                                                                                                     3        服务端返回了部分结果//                                                                                                     4        服务端返回了所有结果// change 更改，改变textone.onreadystatechange = function(){// 判断 (服务端返回了所有的结果) 4if(textone.readyState === 4){// 再次判断响应状态码   200 404 403 401 500之类的// 200-299的都是认定为成功if(textone.status >= 200 && textone.status < 300){// 处理结果// 1.响应行console.log('状态码',textone.status);//状态码console.log('状态符串',textone.statusText);//状态字符串console.log('所有响应头','\n',textone.getAllResponseHeaders());//所有响应头console.log('响应体',textone.response);//响应体// 设置result的文本result.innerHTML = textone.response;}else{}}}}</script>
</body>
</html>

server.js文件

// 1. 引入express
const express = require('express');// 2.创建对象
const app = express();// 3.创建路由规则  里面的形参 request与response   (自己可以随便定义名字的)
//  建议写成  request与response  因为可以见名思意，方便自己看
// request  对请求报文的封装
// responst 对响应报文的封装
//  请求路径为'/server'
app.get('/server', (request, response)=>{// 设置响应头 设置允许跨域// 头名字为Access-Control-Allow-Origin// 头的值为response.setHeader('Access-Control-Allow-Origin','*');// 设置响应体response.send('路由设置为server,响应体为本段文字');});// 4. 监听端口启动服务
// 这里listen(8000)后面添加了一个回调，用来提示，告诉自己是否监听成功
app.listen(8000, ()=>{console.log("服务已经启动，8000端口监听中......");
});

启动node
打开创建的html网页，并且查看是否能正常启动服务端
1.用浏览器方式打开get.html
2.打开127.0.0.1:8000/server页面

点击按钮测试是否能够获取数据

补充一点
这里面的XHR是ajax的筛选

去掉测试的文档为

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax get 请求</title>
</head>
<body><button>点击发送get请求</button><!-- id为result的div --><div id="result" style="width:  200px;height: 100px;border: solid 1px #770088;"></div><script>// 获取button元素// 1.这个指定元素是那个——第一个按钮 （下标为0）const btn = document.getElementsByTagName('button')[0];// 把获取到的响应体展示在div中const result = document.getElementById("result");// 2.绑定事件 btn.onclick = function(){}btn.onclick = function(){// 1.创建对象const textone = new XMLHttpRequest();// 2.初始化，设置请求方法和URL// 第一个参数为[什么类型的请求]// 第二个参数为[给那个url发送]textone.open('GET','http://127.0.0.1:8000/server');// 3.发送textone.send();// 4.事件绑定 处理服务端返回的结果textone.onreadystatechange = function(){// 判断 (服务端返回了所有的结果) 4if(textone.readyState === 4){// 再次判断响应状态码   200 404 403 401 500之类的// 200-299的都是认定为成功if(textone.status >= 200 && textone.status < 300){// 处理结果// 设置result的文本result.innerHTML = textone.response;}else{}}}}</script>
</body>
</html>

ajax中get请求获取数据相关推荐

jQuery使用ajax跨域请求获取数据
jQuery使用ajax跨域请求获取数据跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内 ...
jsp怎么接受ajax请求参数,通过ajax发送JSON并通过JSP中的请求获取参数
我需要通过ajax(使用Jquery)发送JSON对象,并通过JSP(服务器端)中的请求对象获取所有参数.通过ajax发送JSON并通过JSP中的请求获取参数我的JS代码: var request ...
jQuery之ajax的跨域获取数据
如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面.服务 ...
获取天气预报ajax,Ajax 通过城市名获取数据(全国天气预报API)
预览图(比较简单粗糙) 聚合数据全国天气预报接口: 接口地址:http://v.juhe.cn/weather/index 支持格式:json/xml 请求方式:get 请求示例:http://v.j ...
js ajax获取天气预报,Ajax 通过城市名获取数据(全国天气预报API)
AJAX 的 Ajax 通过城市名获取数据(全国天气预报API) 预览图(比较简单粗糙) 聚合数据全国天气预报接口: 接口地址:http://v.juhe.cn/weather/index 支持格式: ...
Python爬虫笔记——分析AJAX传递的JSON获取数据-初步分析动态网页
转载文章链接: Python爬虫:分析AJAX传递的JSON获取数据-初步分析动态网页(1) [4]实战:爬取动态网页的两种思路爬取新浪趣图(1) [5]实战:爬取动态网页的两种思路爬取新浪趣图(2) ...
Promise相关内容（三）——异步获取服务器数据：promise方式解决回调地狱的问题。通过多个.then使代码可读性更高实现异步任务的串行执行，保证按顺序发送请求获取数据
Promise相关内容(三)--异步获取服务器数据:promise方式解决回调地狱的问题.通过多个.then使代码可读性更高 & 实现异步任务的串行执行,保证按顺序发送请求获取数据第一种形式 ...
vue打开后端html文件,vue中怎么请求后端数据？
vue中怎么请求后端数据?下面本篇文章给大家介绍一下vue 请求后台数据.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. vue 请求后台数据需要引用vue-resource 安装 ...
本地主机作服务器解决AJAX跨域请求访问数据的方法
本地主机作服务器解决AJAX跨域请求访问数据的方法参考文章: (1)本地主机作服务器解决AJAX跨域请求访问数据的方法 (2)https://www.cnblogs.com/QiScript/p/5 ...

ajax中get请求获取数据

ajax中get请求获取数据相关推荐

最新文章

热门文章