AJAX的GET请求

AJAX GET请求

需求

点击发送按钮将服务端返回的响应体结果在紫色的div框内显示出来

前端页面准备

<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#result{width: 200px;height: 100px;border: solid 1px #90b;}</style>
</head>
<body><button>点击发送请求</button><div id="result"></div>
</body>
</html>

服务端准备

// 引入express
const express=require('express');// 创建应用对象
const app=express();// 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server',(request,response)=>{// 设置响应// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');// 响应体response.send('HELLO AJAX');
});// 监听端口启动服务
app.listen(8000,()=>{console.log("服务已经启动...");
})

启动服务

<script>// 获取元素const btn=document.getElementsByTagName('button')[0];// 绑定事件btn.onclick=function(){// 利用ajax来进行需求操作// 创建对象const xhr=new XMLHttpRequest();// 初始化 设置请求方法和urlxhr.open('GET','http://127.0.0.1:8000/server');// 发送xhr.send();// 事件绑定 处理服务端返回的结果xhr.onreadystatechange=function(){// 针对 onreadystatechange 事件进行解析// on 当// readystate 是 xhr 对象中的属性 表示状态 其状态分别有五个值// 0 未初始化 // 1 open方法调用完毕// 2 send方法调用完毕// 3 表示服务端返回的部分结果// 4 表示服务端返回的所有结果// 以上状态一共能够返回四次 即 0-1 1-2 2-3 3-4// change 改变的时候触发 改一次触发一次// 判断 表明服务端返回了所有的的结果if(xhr.readyState===4){// 判断 相应的状态码 200 404 403 401 500// 提醒：响应状态码为 2xx 只要是 2 开头的都是成功的 if(xhr.status>=200 && xhr.status<=300){// 处理结果 四部分 行 头 空行 体 // 行 三部分 （协议版本，状态码，状态响应字符串）console.log(xhr.status);//状态码console.log(xhr.statusText);//响应状态字符串console.log(xhr.getAllResponseHeaders());//所有响应头console.log(xhr.response);//响应体// 设置result文本result.innerHTML=xhr.response;}else{}}}}</script>

运行点击按钮后

请求头查看

响应体

响应头

最终需求结果

AJAX中url的参数设置

我们平时url的传参都是在地址栏进行传参就好比 www.baiud.com/s?wd=…
但是在AJAX中我们也是可以利用同样的方式在url的末尾进行缀参数的方式进行传参

比如：

    <button>点击发送请求</button><div id="result"></div>// 获取元素const btn=document.getElementsByTagName('button')[0];// 绑定事件btn.onclick=function(){// 利用ajax来进行需求操作// 创建对象const xhr=new XMLHttpRequest();// 初始化 设置请求方法和urlxhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300');         }

AJAX的GET请求相关推荐

js请求结果拦截机器_js利用jquery的jsonp来解决ajax跨域请求被浏览器拦截结果的问题...
先来个表.页面太多对不起我也不知道这张表是从哪个博客保存过来的,所以无法注明博客地址.非常抱歉.URL说明是否允许通信 http://www.a.com/a.jshttp://www.a.com/b. ...
JSONP实现Ajax跨域请求
前言由于浏览器存在同源策略的机制,所谓同源策略就是阻止从一个源(域名,包括同一个根域名下的不同二级域名)加载的文档或者脚本获取/或者设置另一个源加载的文档属性. 但比较特别的是:由于同源策略是浏览器 ...
用iframe设置代理解决ajax跨域请求问题
用iframe设置代理解决ajax跨域请求问题参考文章: (1)用iframe设置代理解决ajax跨域请求问题 (2)https://www.cnblogs.com/ranzige/p/370965 ...
jquery ajax多次请求接口解决方案
jquery ajax多次请求接口解决方案参考文章: (1)jquery ajax多次请求接口解决方案 (2)https://www.cnblogs.com/DreamLiFeng/p/100088 ...
Ajax跨域请求,无法传递及接收cookie信息解决方案
Ajax跨域请求,无法传递及接收cookie信息解决方案参考文章: (1)Ajax跨域请求,无法传递及接收cookie信息解决方案 (2)https://www.cnblogs.com/yalong ...
Ajax跨域请求action方法，无法传递及接收cookie信息（应用于系统登录认证及退出）解决方案
Ajax跨域请求action方法,无法传递及接收cookie信息(应用于系统登录认证及退出)解决方案参考文章: (1)Ajax跨域请求action方法,无法传递及接收cookie信息(应用于系统登录 ...
AJAX跨域请求数据原理与案例
1.如何通过AJAX跨域请求数据 AJAX通过jsonp来实现跨域请求数据,通过设置dataType(jquery)为jsonp即可. 2.AJAX如何通过jsonp实现跨域(来源于其他网站资料) J ...
[转]掌握Ajax 第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 [IBM]
转自:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步 ...
jQuery Ajax： $.post请求示例
jQuery Ajax: $.post请求示例 leyangjun.html页面 <html> <head> <meta http-equiv="Content ...
ajax跨域请求原理,Ajax跨域请求的原理（图文教程）
这篇文章主要为大家详细介绍了Ajax跨域请求的原理,Ajax怎么样做跨域请求?具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了Ajax跨域请求的具体实现过程,供大家参考,具体内容 ...

AJAX的GET请求

AJAX GET请求

需求

前端页面准备

服务端准备

AJAX中url的参数设置

AJAX的GET请求相关推荐

最新文章

热门文章